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)
  1. 1

    Первый же filter: рушит эту идилию. И приходя к выводу, что таки надо стили подключать через КК, станет понятно — лучше делать это сразу.

  2. 2

    lusever, про какой фильт идет речь?

  3. 3

    Да про любой, будь хоть AlphaImageLoader или opacity

  4. 4
    never_again

    зачем мне,как пользователю FF, грузить стили для IE?
    ))

    раньше тож использовал хаки,но со временем перешел на CC.

  5. 5

    lusever, а проблема-то в чем? Я так и не понял.

    never_again, интересно, а зачем мне тоже, как пользователю Оперы, использовать стили для IE? Для кроссбраузерности наверное? А?

  6. 6
    never_again

    Dimox, я говорил не со стороны верстальщика, а со стороны пользователя.

    если человек использует ИЕ пусть грузит дополнительный код, а если человек использует более вменяемый браузер,то зачем ему грузить еще и хаки для ИЕ…

    и это всеголишь была шутка…

  7. 7

    Проблема в теме поста — в валидности.

  8. 8
    ASh

    Лично я тоже не сторонник кк. И использую хаки для ИЕ — опять-таки хочу согласиться с автором, что их нужно то … пару строчек.
    lusever, буду благодарен за написанный кусок кода, который не проходит валидизации — пишу не потому, что лень, а потому, что еще не очень знаком… с фильтрами. Я лично проверял цсс с хаками на валидность — проблем не было. Но с фильтрами не пробовал…

    2 never_again: лично я считаю написание дополнительных таблиц стилей к браузерам — глупым и устаревшим методом. Имхо, пару байт никого не спасет, зато «порядок» останется. Зельдман тоже «разорялся» на эту тему.

  9. 9

    2lusever: я бы тоже хотел увидеть пример такого кода.

  10. 10

    Для нормального отображения png:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’image’)

    для прозрачности:
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)’ );

    Это самое простое, не счиатя behavior и expression.
    Почитать можно на msdn.

  11. 11
    never_again

    2 ASh: сейчас речь идет только о дополнительных стилях для ИЕ. Зачем использовать дыры в браузере если можно использовать метод, предусмотренный разработчиками?

  12. 12

    lusever, теперь ясно. Действительно, в таких случаях для соблюдения валидности все-таки придется юзать CC.

  13. 13
    Дмитрий

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’image’)

    для прозрачности:
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)’ );

    Увы, но используя StandAlone браузеры + в Windows с некоторыми сервиспаками данная фича не работает. Приходится использовать JS для решения таких проблем => СС не так уж и плохи.

    + соглашусь, что грузить лишний код для FF или Opera не имеет смысла.

  14. 14

    Вообще, если будет полезно, то я собрал все хаки под ИЕ. Вот статья

  15. 15

    Раньше я использовал только условные тэги, но попав сюда немного изменил своё мнение. Хаки действительно проще использовать.
    Кстати

    *+html .style {color: green}

    используется не только для MS IE 7, но и для MS IE 5 — если ещё такие остались :-)
    Вот полная таблица CSS хаков, найденная в сети.