Нет 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.

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