CSS-хаки vs Условные комментарии

12 сентября 2007 г.

В очередной раз хочется затронуть тему CSS-хаков. Только не подумайте, что я заядлый CSS-хакер :), дело в моем стремлении все упрощать. Так вот, для себя я выделил альтернативу условным комментариям, которые так не люблю использовать при верстке сайтов.

Ведь в чем заключается задача условных комментариев (conditional comments)? В том, чтобы подключить каскадные таблицы стилей, закомментированные таким способ, который понимает только вечно “кашляющий” браузер Internet Explorer. Верно? Верно.

Да, CSS-хакинг по сути своей - это зло. Но давайте посмотрим на подборку хаков, которые имеются в нашем распоряжении. В этом списке обращаем внимание на то, что для всех версий IE имеется CSS-хак, который проходит проверку на валидность.

Так почему бы не воспользоваться этими валидными CSS-хаками в качестве альтернативы условным комментариям?

Я считаю это вполне допустимым решением - нет нарушений правил валидности, нет необходимости создавать отдельные CSS-файлы (тем более, учитывая то, что часто для IE требуется всего несколько персональных стилей).

Для примера. Вот общее правило для всех браузеров:

1
.style {color: red}

Если для IE версии 6 и ниже нужно применить отличный от этого параметр, то добавляем такой стиль:

1
* html .style {color: gray}

Если персональным параметром нужно зацепить и IE 7, до добавляем третий стиль:

1
*+html .style {color: green}

Структура кода простая, при этом итоговый размер файлов практически идентичен варианту с условными комментариями, за исключением незначительного увеличения размера за счет частей кода * html и *+html.

В общем, я для себя выбираю именно этот вариант.

Теги: , , автор: Dimox | рубрика CSS-верстка

Комментарии (15): »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

Подписаться, не комментируя

Предыдущие из рубрики