Перейти к навигации · Перейти к содержимому

Нет CSS хакам?

Недавно некоторые известные профессионалы высказались против использования CSS-хаков. А вот у меня по этому вопросу так и не сложилось единое мнение.

Светлая сторона

С одной стороны, хаки — это зло.

  • Они не соответствуют стандартам (некоторые, правда, соответствуют).
  • Представляют из себя бомбы замедленного действия (никто не знает чем обернется их использование в будущем).
  • Хаки являются сознательным использованием неверной интерпретации правил CSS (т. е. они заведомо «ошибочны»).

Все это правильно, но далеко от реальности. Даже сам Dave Shea, в основном, предлагает «быть терпеливыми» и подождать пока «само рассосется».

…then we simply need to be patient until the effects we seek become practical, and with any luck that won’t be long…

А начинать делать страницы без хаков надо уже сейчас.

Темная сторона

Разве уже ушел в прошлое великий и ужасный IE 6? Разве не им все еще пользуются 80% посетителей (я уж не говорю про IE 5)?

Конечно можно сделать дизайн, который не потребует ни одного хака. Только боюсь, что похож он будет на нечто вроде сайта W3C (хотя и они используют хаки). Разве сможем мы продать такой академический дизайн клиентам?

Вопросов много, а ответ один — отказываться от хаков пока рано. Однако, использовать хаки тоже нужно с умом.

Истина где-то рядом…

Во-первых, постарайтесь свести использование хаков к минимуму. Иногда лучше упростить макет, чем засорять таблицы стилей и исходный код многоэтажными конструкциями, в которых через месяц вы сами не сможете разобраться. Тем более, если вы сами выступаете в роли дизайнера.

Во-вторых, организуйте все свои хаки. Вынесите их в отдельный файл, например ie.css (ведь требуются они в основном для семейства IE). А файл этот подключите через условные комментарии. Заодно, вы оградите себя от опасности срабатывания этих хаков в будущих поколениях браузеров.

Таким образом, вы избавитесь от необходимости «вылавливать» IE при помощи хаков в своем основном CSS-файле, но никто вам не запрещает использовать хаки для фильтрации различных версий IE в самом файле ie.css, например так:

.content {
  background: url(fone-trans.png);
} * html .content { 
  background: url(fone-IE5.png); 
  voice-family: "\"}\""; 
  voice-family: inherit;
  background: url(fone-IE6.png);
}

Эти два правила последовательно применяются к трем версиям IE:

  • Первое — только для IE 7, задающее полупрозрачный фон, который не поддерживают предыдущие версии.
  • Второе правило состоит из двух частей: сначала для 5-ой и 6-ой версий (файл fone-IE5.png), а затем только для 6-ой (fone-IE6.png), так как IE 5 прекращает парсинг после voice-family... И вся эта конструкция скрыта от IE 7, так как он не обрабатывает хак * html.

В конечном итоге мы «раздали» трем браузерам три различных значения. Может быть это и зло, но маленькое, и к тому же пока неизбежное…

Комментарии

Ну с первым тантековским хаком ты загнул :)
Неоправданно громоздкий. Лучше экранированием :)

Вау. Мдя… Я думал раньше, что дизайн – штука более креативная, чем кодерство. Теперь, глядя на такое, мнение изменилось =)

Flack: это просто для примера =) Чтобы показать, что хаки — это зло. Тем более, все мы помним, что (от того же Тантека):

A CSS hack should… Be ugly. It’s actually a good thing that a hack be visually ugly from a coding aesthetic point of view in the hopes that the ugliness will be a reminder that the hack is a hack…

Dm: это дизайн в dreamveawer и photoshop — креативная штука, а мир веб-стандартов пока слишком многие отравляют своим присутствием, чтобы жизнь медом казалась =)

Я люблю хаки, вот правда. Романтика, честное слово, при всех недостатках :)

очень правильный метод – давно им сам пользуюсь
весь сайт оформляется как следует, а для швали с отдельным приглашением – ie-hacks.css с conditional comments

Зачастую нет такой возможности, к сожалению.