If-IE mixin не передает CSS validator

Question

Так что я довольно новичок в разработке интерфейса. Я следую за курсом около 4 лет через 5 месяцев. Но я немного застрял в IE mixin. Mixin если-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; 
} 
} 

Но когда я проверяю выход CSS в W3C валидатор он выплевывает 3 ошибки:

• Неизвестный размер 0 \ 0
• Parse Ошибка). {.transparent {fill: # FFC0CB; }}
• Функция -ms-high-contrast не существует для всех носителей ), (- ms-high-contrast: active) {.transparent {fill: # FFC0CB; }}

Я видел, что другие разработчики используют этот тип mixin в Интернете, и мои коллеги даже используют его на работе. Поэтому у меня есть 2 вопроса:

1. Почему так много людей используют это, когда это недействительно CCS?
2. Есть ли способ сделать этот 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 .

Hacks в основном базируются на некоторые ошибки синтаксического анализа от некоторых версии (-ы) браузера, например 0\0 или нестандартные свойства, такие как -ms-high-contrast. Действительный CSS признан как ожидаемый современными браузерами, поэтому вы не можете использовать , чтобы применял стиль к некоторым браузерам, а не к другим.

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

Они не знают, или лучше они делают, но на самом деле действительно нужно укладывать по-разному IE10/11 от других или Safari или Chrome или Firefox, и они не хотят, чтобы загрузить Modernizr всего за 1 хак (они» d, если бы было много несоответствий, возможно).
Действительный CSS - это прекрасный способ сделать вашу работу качественным способом, но это не самоцель. Страницы не обязательно будут ломаться, как с плохо сформированным XML.

Is there a way to make this mixin valid CSS?

Что вы пытаетесь достичь? Вы не сказали нам, почему вам нужно взломать стили специально для IE (так много причин ...).
@supports или Modernizr может быть лучшим решением, а может и нет: это зависит, как обычно, в интерфейсе.