' CSS Hack”的定义是什么？-css教程-PHP中文网

' CSS Hack”的定义是什么？

您至少写了CSS已有几年了，那么您肯定会使用CSS Hack。但是，如果您对CSS相对较新，那么您可能已经听过该术语了，但不确定它的含义。

> 在这篇文章中，我将解释CSS hack术语的含义以及如何使用CSS hack。但是首先，一些背景可以解释为什么我觉得这篇文章甚至是必要的。

钥匙要点

a CSS hack是一种将样式应用于特定浏览器版本的技术，同时被他人忽略。它通常用于克服浏览器的不一致或局限性，尤其是在较旧版本的浏览器中，这些浏览器可能无法完全支持最新的CSS标准。

>在某些情况下CSS骇客可能很有用，但通常被认为是一种不良的做法，因为它们可以使代码更加复杂，更难维护。建议使用标准CSS技术和设计网站在较旧的浏览器中优雅地降低。
>

>您当前写下以下哪个Microsoft浏览器或包含CSS hacks？

>当我第一次研究结果时，我似乎错过了这个问题的结果。幸运的是，研究了微软最新浏览器的工程师David Storey指出了这一点。在回答这个问题的1,418个人中，结果是这样的：

IE9 - 62％ IE10 - 61％ IE11 - 57％

边缘 - 45％

IE8 - 35％

IE6 - 3％
>足够糟糕的是，有60％以上的开发人员声称为IE9和IE10编写CSS hacks，但是Edge为45％？尽管Edge有一些已发布的黑客攻击，但它们尚未在浏览器网站上，因此似乎不太可能有这么多人在浏览器中使用hacks。但是更重要的问题是：开发人员遇到了哪些问题，将CSS渲染到Edge中，他们需要黑客攻击？
起初，我认为许多参与者都会通过用户代理嗅探将hacks与浏览器检测混淆。但这也无法解释为什么边缘的数字如此之高。

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

登录后复制

>上述示例中的CSS（通常称为“ Star-Html Hack”）将目标

>仅针对Internet Explorer版本6及以下。大多数支持IE6的开发人员在IE6之前都不真正在乎任何东西，因此通常可以用作IE6 hack。 >“黑客”的部分是星号，其次是“ html”。这是通用选择器和元素类型选择器的组合。在某个时候，有人发现这两个选择器在另一个选择器之前仅在某些版本的IE中起作用，而在其他浏览器中没有效果。这意味着上面代码示例中定义的.sidebar元素上的左边距仅适用于IE6或更早。在这种情况下，CSS实际上是有效的，因此您不会出现错误或警告（稍后再详细介绍）。>

这是从浏览器网站上获取的另一个示例，这次是针对IE11的：

>我不会介绍为什么这是一个黑客的细节（部分是因为我不确定自己理解它），但是上述CSS仅适用于Internet Explorer版本11。从技术上讲，Browserhacks说“ IE11及以上”，所以我假设这意味着它也将在Microsoft的Edge浏览器中使用，但是我尚未验证。

<span>_<span>:-ms-fullscreen, :root .selector</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

登录后复制

>这里的重要一点不是针对哪些浏览器，而是我们在同一页面上都在了解什么是CSS hack。

CSS hacks无效CSS？

>如果您的样式表中有黑客攻击，则如果您通过W3C的CSS验证器运行，您的CSS可能会发出警告和/或错误。但这不是保证，也不是一种识别某物是否是黑客的方式。

>您的CSS可能会包含黑客攻击，也可能不会产生任何警告或错误。例如，如果您仅使用的CSS黑客使用Star-HTML hack来定位IE6，则您的样式表将验证良好，而无需与黑客相关的错误或警告。

>另外，一些hacks（例如我上面讨论的IE11黑客）使用特定于供应商的代码（例如：-ms-fullscreen）。在这种情况下，验证器中的默认设置可以通过“通过”绿屏消息显示您的CSS：

' CSS Hack”的定义是什么？

但是，如果您在验证器屏幕上向下滚动，则会看到这样的警告：

' CSS Hack”的定义是什么？

在这种情况下，警告我是因为：-ms-fullscreen被认为是“未知的供应商扩展伪级”。如果您更舒服地将这种CSS视为错误而不仅仅是警告，则可以使用验证器输入区域下方的“更多选项”部分调整验证器的设置：

' CSS Hack”的定义是什么？

>如果“错误”将“供应商扩展”选项更改为“错误”，则如果其中包含供应商前缀或其他特定于浏览器的CSS（不一定是hacks），则可以防止样式表传递验证。

上述CSS目标IE8及以下。 “黑客”是后斜线和九个（9）的组合。大多数浏览器都会忽略整个线路，因为9个部分使该行无效CSS。但是，无论出于何种原因，Internet Explorer版本8及较低的版本仍然将其视为有效，并将应用保证金设置。但是，在这种情况下，无论您为验证器选择哪种设置，它都会显示错误消息，样式表将不会传递验证：>

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

登录后复制

哪些技术不是hacks？

以下方法和技术不一定应归类为CSS hacks：

！重要的声明不是hacks

附加重要的关键字的CSS行完全是另一个问题。这是有效的CSS，不用于针对特定的浏览器。这不是黑客，但可以将其视为不良的CSS。

>供应商前缀不一定是hacks

供应商的前缀针对特定的浏览器，但这些不是我们通常称为黑客的浏览器。在大多数情况下，如果您使用的是供应商前缀，则还提供有效的随附标准代码。那不是黑客。话虽如此，在某些情况下，您会编写特定于供应商的代码来定位浏览器，从而成为侵略者。上述使用_： - ms-fullscreen的代码是一个示例。另一个很好的例子是触发硬件加速度在Webkit浏览器中。但是供应商的前缀在大多数情况下是一个独立的主题。实际上，W3C具有有关供应商特定代码的文档，支持这样的观点，即这些概念本身不应将其视为黑客。

高特异性选择器不是hacks

真正地使用选择器，以试图在样式表的另一部分（例如身体.content #sidebar p）中覆盖某些东西不是CSS hack。这是不好的CSS，但这不是黑客。

旧语法不是hack

一个很好的例子是Flexbox中深浏览器支持所需的复杂代码。除了今天这可能是不必要的事实之外，我也不会将这种事情归类为黑客。当这些浏览器支持它时，这是有效的代码，因此它可能具有与黑客攻击相同的效果，但我认为这不是同一件事。

有条件评论呢？

>有条件的注释，您可以编写CSS甚至HTML来定位某些版本的Internet Explorer（甚至排除某些版本的Internet Explorer）是一个灰色区域。如果以某种方式写的话，它们是有效的HTML，但它们是“ hacky”。早在2008年，保罗·爱尔兰（Paul Irish）普及了我们所说的“有条件课程”，我敢肯定我们中的许多人已经使用过。这些使用有条件的注释来产生您可以在样式表中使用的类，以使用有效的CSS来定位IE的特定版本。

>那么，有条件评论的使用是否是“ CSS HACK”吗？我会说是的，仅仅是因为他们在使用更习惯的CSS hack时完成了完全相同的事情。

您应该使用CSS hacks吗？

与许多Web开发主题一样，此处的答案不仅是是YAS

或

> no 。正确的答案是>取决于。大多数纯粹主义者会说不要使用它们。但这通常不是那么简单。当谈到黑客时，我的建议是：>

在项目的预算和时间限制内完成所有力量的所有操作，以编写有效的，基于标准的跨浏览器CSS，而无需使用hacks。

>写黑客时，做类似哈里·罗伯茨（Harry Roberts）建议的事情，因此您的黑客分离且在您的时间和预算允许时更容易重构。

>始终将注释（或文档）与黑客包含，并尝试尽快重新分配代码。

总结

如果您不记得这篇文章的其他内容，请记住这一点：

a CSS hack在一个或多个特定的浏览器版本中应用CSS，而其他浏览器将忽略同一CSS。

这是CSS黑客的简单定义。因此，仅仅因为您支持CSS中的Microsoft Edge，并不意味着您为Edge编写hacks;支持是一个不同的主题。

这篇文章中可能有几件事并不是每个人都同意的，但是我认为大多数了解hacks的开发人员都会同意上述结论的摘要。

如果我遗漏了任何东西或犯了任何错误，请随时在评论中告诉我，我将进行任何必要的更正。

经常询问有关CSS hacks

的问题（常见问题解答）

> CSS hack？

a css hack是Web开发人员使用的一种技术来创建特定的样式或布局，而标准CSS规则可能无法使用特定样式或布局。这些骇客通常用于克服浏览器不一致或局限性。例如，开发人员可能会使用CSS Hack来确保网站在旧版本的Internet Explorer中正确显示，这可能无法完全支持最新的CSS标准。但是，很重要的是，只有在必要时才使用CSS黑客攻击，因为它们可以使您的代码更加复杂，更难维护。

>我如何识别CSS hack？涉及以非常规的方式使用CSS选择器或属性。例如，开发人员可能会使用CSS黑客来实现特定的浏览器，以利用该浏览器唯一的错误或功能。这可能涉及使用仅由该浏览器识别的CSS属性，或以仅浏览器理解的方式使用CSS选择器。如果您看到CSS代码似乎不寻常或不遵循标准CSS语法，则可能是CSS Hack。在某些情况下，它们通常被认为是一种不好的做法。这是因为它们可以使您的代码更难理解和维护，并且可以在不同的浏览器中引起意外行为。通常最好使用标准CSS技术并以在较旧的浏览器中优雅降低的方式设计您的网站，而不是使用CSS hacks。

>有哪些常见的CSS hacks？

>一些常见的CSS hacks包括“框模型hack”，这些hack用于修复浏览器如何计算元素宽度和高度的差异以及元素的宽度和高度的差异引起的布局问题，以及“ Star Hack”，用于针对Internet Explorer 7及以下。另一个常见的CSS黑客是“下划线黑客”，它用于针对Internet Explorer 6及以下。

>我如何避免需要使用CSS hacks？使用CSS Hacks是以与所有主要浏览器兼容的方式设计您的网站。这可能涉及使用CSS重置以确保您的样式在不同的浏览器上持续应用，并避免使用不广泛支持的CSS功能。此外，您可以使用诸如我可以使用的工具来检查不同CSS功能的浏览器兼容性。

> CSS hacks的替代方案是什么？

而不是使用CSS Hacks，您可以使用功能检测库（如Modernizr）以检测用户浏览器是否支持特定的CSS功能。然后，您可以使用此信息根据浏览器的功能应用不同的样式或布局。另一种选择是使用CSS预处理器（例如Sass或更少），这使您可以编写更强大且可维护的CSS代码。

>我如何了解有关CSS Hacks的更多信息？您可以在线了解有关CSS黑客的更多信息。 CSS-tricks和Smashing Magazine等网站经常发表有关CSS Hacks和其他高级CSS技术的文章。此外，您可以在Codepen和Jsfiddle等网站上找到许多CSS hacks的教程和示例。