yui css reset_YUI CSS分钟–第3部分–骇客

yui css reset

The previous parts are here (building and testing) and here (what gets minified). Now let's see how YUI CSS min handles CSS hacks.

前面的部分在此处(构建和测试)和此处(最小化)。 现在，让我们看看YUI CSS min如何处理CSS hack。

As you know CSS hacks often use errors in CSS parsers in browsers to target specific browser versions and supply additional rules to work around other issues in said browsers. That makes any CSS tool's job slightly more challenging. Not only does the tool have to avoid repeating the browsers errors, but also has to understand what browsers got wrong and support it too. Fun stuff. Isn't it a joy being a web developer?

如您所知，CSS黑客经常在浏览器CSS解析器中使用错误来定位特定的浏览器版本，并提供其他规则来解决所述浏览器中的其他问题。 这使得任何CSS工具的工作都更具挑战性。 该工具不仅必须避免重复浏览器错误，而且还必须了解哪些浏览器出了错并提供支持。 好玩的东西。 成为网络开发人员不是很高兴吗？

So here are some hacks that are tested to work with the YUICopmpressor's CSS min.

因此，这里有一些经过测试可与YUICopmpressorCSS min一起使用的技巧。

下划线/星级黑客 (Underscore/star hack)

The simplest ever hack to target IE6 and IE7. In the example below normal browsers see 1px dropping _width and *width as invalid, IE7 ignores the *, drops the _width as invalid and sees 3pt, IE6 ignores the _ and sees _width as width, so it sees 2em.

针对IE6和IE7的最简单的黑客攻击。 在下面的示例中，普通浏览器看到1px删除_width和*width无效，IE7忽略*，将_width删除无效，并看到3pt，IE6忽略_并将_width视为width ，因此它看到了2em。

CSS min doesn't parse and doesn't understand CSS properties, so it accepts pretty much any property.

CSS min无法解析且不了解CSS属性，因此它几乎接受任何属性。

Before:

之前：

#element {
    width: 1px;
    *width: 3pt;
    _width: 2em;
}

After:

后：

#element{width:1px;*width:3pt;_width:2em}

儿童选择器骇客 (Child selector hack)

CSS min strips comments but there is this child selector hack people use to hide declarations from IE7 and below.

CSS min去除注释，但是人们可以使用此子选择器来隐藏IE7及以下版本的声明。

CSS min retains empty comments that immediately follow > (thanks go out to Chris Burroughs)

CSS min保留紧随其后的空注释> (感谢Chris Burroughs )

Before:

之前：

html >/**/ body p {
    color: blue; 
}

After:

后：

html>/**/body p{color:blue}

IE5 / Mac黑客 (IE5/Mac hack)

This hack targets IE5/Mac, if anyone still worries about this browser. The hack is retained after minification, only it's minified.

如果仍然有人对该浏览器感到担心，则此黑客针对IE5 / Mac。 hack会在缩小后保留，只有缩小后才会保留。

Before:

之前：

/* Ignore the next rule in IE mac \*/
.selector {
   color: khaki;
}
/* Stop ignoring in IE mac */

After:

后：

/*\*/.selector{color:khaki}/**/

盒子模型黑客 (Box model hack)

This hack uses valid CSS and there's no special use of comments so it's retained.

该hack使用有效CSS，并且注释没有特殊用途，因此被保留。

Before:

之前：

#elem { 
    width: 100px; /* IE */
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 200px; /* others */
}
html>body #elem {
    width: 200px; /* others */
}

After:

后：

#elem{width:100px;voice-family:"\"}\"";voice-family:inherit;width:200px}html>body #elem{width:200px}

Seems like the code highlighter chokes here though. It ain't easy 🙂

似乎代码突出显示在这里令人窒息。 这不容易🙂

就是这样，伙计们！ (That's all, folks!)

Thanks and please, feel free to suggest improvements and report bugs. Also play with the web UI of the JS-version here to see for yourself what it does to your code.

谢谢，请随时提出改进建议并报告错误。 也可以在此处使用JS版本的网络用户界面，亲自了解它对代码的作用。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/yui-css-min-part-3-hacks/

yui css reset