CSS Условные комментарии в LESS CSS

Хотя Интегрирование МЕНЬШЕ CSS, я столкнулся с некоторыми условными комментариями в CSS, какCSS Условные комментарии в LESS CSS

[if IE 7] margin-top: -2px; 
[if IE 8] margin-top: -3px; 
[if Webkit] margin-top: -1px;

И, конечно, они не могут быть скомпилированы для CSS менее компилятором,

Так что для IE Я нашел способ избежать условного комментария и заставить их работать, как упомянуто IN THIS ARTICLE

Но, похоже, для [IF Webkit] не существует способа, а не обнаруживать webkit через JS и добавлять класс.

Может ли любое тело, пожалуйста, потрошить меня?

источник

2013-12-09 Saurabh Bayani

Эти биты '[if ...]' недействительны CSS. Если они вообще будут работать в файле '.css', я бы немного удивился. – cHao

Условные комментарии работают только для IE (точнее, с IE 5 до 9), другие браузеры не будут делать логику внутри условных комментариев. Другие браузеры просто видят их просто как комментарии. –

Вы должны использовать условные комментарии при указании которых стилей для использования, а не внутри таблицы стилей .. Как так:

<!--[if IE 6]> 
    <link rel="stylesheet" href="style_ie6.css"> 
<![endif]-->

Или вы должны использовать специальные классы в ваших CSS файлов:

.ie6 .container {}

и убедитесь, что вы используете класс .ie6 в своем html, если необходимо

В некоторых случаях может быть хорошей идеей использовать специальные таблицы стилей браузера, но я очень reco mmend, который вместо тестирования для браузеров проверяет функции, если это возможно. Проверьте modernizr

источник

2013-12-09 17:48:05

Ya! Я уже делал это ... ссылаясь на документ, упомянутый выше, но, похоже, работает только для IE. Есть ли способ для [IF webkit] –

Я не уверен, есть ли «условный тег» для webkit (просто Google), но я очень рекомендую «обнаружение функции». проверьте обновленный ответ. –

Хотя технически это не является действительным CSS вы можете получить его через определенные эвакуационных писак:

.cond(@c, @p, @v) { 
    -: ~"; [if @{c}] @{p}: @{v}"; 
} 

div { 
    .cond(IE 7, margin-top, -2px); 
    .cond(IE 8, margin-top, -3px); 
    .cond(Webkit, margin-top, -1px); 
}

Это упрощена минималистичный пример получения в выходной фиктивный -: ; (вы найдете более великолепный побег хак примеры, поиск здесь для ~").

P.S. Я даю этот ответ на всякий случай, т. Е. Показать, что вы можете получить эти строки в LESS, но это не отменяет тот факт, что этот CSS сам по себе очень сомнительный ([if Webkit]? - в каком браузере/библиотеке он поддерживается?)

источник

2013-12-09 18:01:58

CSS Условные комментарии в LESS CSS

ответ

Смежные вопросы