css - If-IE mixin 没有通过 CSS 验证器

Question

所以我对前端开发还很陌生。我现在正在学习大约 4 到 5 个月的类(class)。但我有点被 IE mixin 困住了。 mixin if-IE mixin 效果很好，请参阅:

@mixin if-ie {
@media screen and (min-width:0\0) {
    @content;
 }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active {
    @content;
 }
}

但是当我检查 W3C 验证器中的 css 输出时，它吐出 3 个错误:

• 未知维度 0\0
• 解析错误 ) { .transparent { fill: #FFC0CB; }
• 功能 -ms-high-contrast 对于所有媒体都不存在 ),(-ms-high-contrast: active) { .transparent { 填充:#FFC0CB; }

我看到其他开发人员在 Internet 上使用这种类型的 mixin，我的同事甚至在工作中也使用它。所以我有两个问题:

1. 当它不是有效的 CCS 时，为什么有这么多人使用它？
2. 有没有办法让这个 mixin 成为有效的 CSS？

谢谢!

Answer 1

关于你的解析错误:应该在第二个选择器的末尾关闭括号:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* */
}

他们是黑客。
CSS hacks 的第一条规则是你不应该使用它们。
第二条规则是，如果你真的需要它们，那么，选择被认为比 UA 字符串检测更强大的那些，比如 BrowserHacks 中的那些。 :

Reminder!
Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS or use feature detection.

黑客攻击主要基于某些浏览器版本(如 0\0)或非标准属性(如 -ms-high-contrast)的一些解析错误。现代浏览器可以识别有效的 CSS，因此您不能使用 that 将样式应用于某些浏览器而不应用于其他浏览器。

1.Why are so many people using this when it isn't valid CCS?

他们不知道或者他们知道，但真的真的需要将 IE10/11 与其他人或 Safari、Chrome 或 Firefox 设计不同的样式，他们不想只为 1 次 hack 加载 Modernizr(如果有的话，他们会可能有很多差异)。
有效的 CSS 是一种非常好的定性工作方式，但它本身并不是目标。页面不一定会像格式错误的 XML 那样中断。

Is there a way to make this mixin valid CSS?

你想达到什么目的？你没有告诉我们为什么你需要 hack 样式，尤其是 IE(这么多原因……)。
@supports 或 Modernizr 可能是更好的解决方案，也可能不是:这取决于前端世界。