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

Question

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

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

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

未知维度0[=34=]
解析错误）{ .transparent { 填充：#FFC0CB； }}
所有媒体都不存在 -ms-high-contrast 功能 ),(-ms-high-contrast: active) { .transparent { 填充：#FFC0CB; } }

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

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

谢谢！

Answer 1

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

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

他们是黑客。
CSS 黑客的第一条规则是你不应该使用它们。
第二条规则是，如果你真的需要它们，那么选择被认为比 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[=11=]）或非标准属性（如 -ms-high-contrast）的一些解析错误。有效 CSS 被现代浏览器识别为预期的，因此您不能使用 that 将样式应用于某些浏览器而不是其他浏览器。

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

他们不知道或者他们知道，但真的真的需要与其他人或 Safari 或 Chrome 或 Firefox 不同的风格 IE10/11，他们不想只为 1 加载 Modernizr hack（如果有很多差异，他们可能会）。
Valid CSS 是一种很好的定性工作方式，但它本身并不是目标。页面不一定会像 ill-formed XML.

那样中断

Is there a way to make this mixin valid CSS?

你想达到什么目的？您没有告诉我们为什么您需要特别针对 IE 修改样式（原因太多...）。
@supports 或 Modernizr 可能是更好的解决方案，也可能不是：这取决于 front-end 世界中的往常。

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

If-IE mixin isn't passing CSS validator

css

validation

internet-explorer

sass

mixins