CSS-хаки vs Условные комментарии
В очередной раз хочется затронуть тему CSS-хаков. Только не подумайте, что я заядлый CSS-хакер :), дело в моем стремлении все упрощать. Так вот, для себя я выделил альтернативу условным комментариям, которые так не люблю использовать при верстке сайтов.
Ведь в чем заключается задача условных комментариев (conditional comments)? В том, чтобы подключить каскадные таблицы стилей, закомментированные таким способ, который понимает только вечно «кашляющий» браузер Internet Explorer. Верно? Верно.
Да, CSS-хакинг по сути своей — это зло. Но давайте посмотрим на подборку хаков, которые имеются в нашем распоряжении. В этом списке обращаем внимание на то, что для всех версий IE имеется CSS-хак, который проходит проверку на валидность.
Так почему бы не воспользоваться этими валидными CSS-хаками в качестве альтернативы условным комментариям?
Я считаю это вполне допустимым решением — нет нарушений правил валидности, нет необходимости создавать отдельные CSS-файлы (тем более, учитывая то, что часто для IE требуется всего несколько персональных стилей).
Для примера. Вот общее правило для всех браузеров:
.style {color: red}
Если для IE версии 6 и ниже нужно применить отличный от этого параметр, то добавляем такой стиль:
* html .style {color: gray}
Если персональным параметром нужно зацепить и IE 7, до добавляем третий стиль:
*+html .style {color: green}
Структура кода простая, при этом итоговый размер файлов практически идентичен варианту с условными комментариями, за исключением незначительного увеличения размера за счет частей кода * html и *+html.
В общем, я для себя выбираю именно этот вариант.
Комментарии (15)
Первый же filter: рушит эту идилию. И приходя к выводу, что таки надо стили подключать через КК, станет понятно — лучше делать это сразу.
lusever, про какой фильт идет речь?
Да про любой, будь хоть AlphaImageLoader или opacity
зачем мне, как пользователю FF, грузить стили для IE?
))
раньше тож использовал хаки, но со временем перешел на CC.
lusever, а проблема-то в чем? Я так и не понял.
never_again, интересно, а зачем мне тоже, как пользователю Оперы, использовать стили для IE? Для кроссбраузерности наверное? А?
Dimox, я говорил не со стороны верстальщика, а со стороны пользователя.
если человек использует ИЕ пусть грузит дополнительный код, а если человек использует более вменяемый браузер, то зачем ему грузить еще и хаки для ИЕ…
и это всеголишь была шутка…
Проблема в теме поста — в валидности.
Лично я тоже не сторонник кк. И использую хаки для ИЕ — опять-таки хочу согласиться с автором, что их нужно то … пару строчек.
lusever, буду благодарен за написанный кусок кода, который не проходит валидизации — пишу не потому, что лень, а потому, что еще не очень знаком… с фильтрами. Я лично проверял цсс с хаками на валидность — проблем не было. Но с фильтрами не пробовал…
2 never_again: лично я считаю написание дополнительных таблиц стилей к браузерам — глупым и устаревшим методом. Имхо, пару байт никого не спасет, зато «порядок» останется. Зельдман тоже «разорялся» на эту тему.
2lusever: я бы тоже хотел увидеть пример такого кода.
Для нормального отображения png:
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='image')
для прозрачности:
filter: progid: DXImageTransform.Microsoft.Alpha (opacity=50)');
Это самое простое, не счиатя behavior и expression.
Почитать можно на msdn.
2 ASh: сейчас речь идет только о дополнительных стилях для ИЕ. Зачем использовать дыры в браузере если можно использовать метод, предусмотренный разработчиками?
lusever, теперь ясно. Действительно, в таких случаях для соблюдения валидности все-таки придется юзать CC.
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='image')
для прозрачности:
filter: progid: DXImageTransform.Microsoft.Alpha (opacity=50)');
Увы, но используя StandAlone браузеры + в Windows с некоторыми сервиспаками данная фича не работает. Приходится использовать JS для решения таких проблем => СС не так уж и плохи.
+ соглашусь, что грузить лишний код для FF или Opera не имеет смысла.
Вообще, если будет полезно, то я собрал все хаки под ИЕ. Вот статья
Раньше я использовал только условные тэги, но попав сюда немного изменил своё мнение. Хаки действительно проще использовать.
Кстати
используется не только для MS IE 7, но и для MS IE 5 — если ещё такие остались :-)
Вот полная таблица CSS хаков, найденная в сети.