Чтобы не использовать хаки для IE соответствующие стили стоит вынести в отдельные файлы и подключать их через условный комментарий. Так и основные CSS файлы не будут загромождаться мусором и можно отделить особенные стили для разных версий.
Но можно использовать несколько иной подход.
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
В этом случае через условный комментарий корневому элементу документа назначаются разные классы в зависимости от версии браузера. А затем этот класс используется в селекторе с каскадом.
.block {
padding-bottom: 0;
}
.ie6 .block,
.ie7 .block {
padding-bottom: 1em;
}
Например, для всех браузеров нижний отступ у элемента с классом block будет нулевым, а в IE6 и IE7 он будет равен 1em.
Стоит заместить, что IE10 игнорирует любые условные комментарии.
Коментарии к заметке
Html5boilerplate рекомендует немного другую запись.
В этом случае можно написать css короче:
.lt-ie8 .block {...}https://github.com/h5bp/html5-boilerplate/blob/master/index.html
Согласен. Когда приходится писать много селекторов для нескольких версий, то это может сэкономить время на написание CSS. Но, мне кажется, что селектор с конкретной версией считывается в коде гораздо лучше. А тут нужно ещё надо соображать
.lt-ie8включает в себя 8 версию или нет.Мне кажется, этот способ уже почти не имеет смысла использовать, если не требуется идентичное отображение во всех версиях ИЕ (что уже само по себе плохо :) Обычно я обхожусь одним CSS-файлом для ИЕ, который подключаю через условный комментарий. Обычно для ИЕ8 и ниже. А внутри уже добавляю хаки, если нужно. Обычно у меня этот такой файл довольно короткий.
Идентичное отображение уже, хвала богам, никто не требует. Но какие-то точечные исправления всё же приходится делать. Например, для IE9 делать градиент в SVG, для IE6-8 делать его фильтром, если нужно, а IE10 будет понимать свойство без браузерного префикса.
Хаки в файле, который подключен через условный комментарий — это вообще, я считаю, ещё больший хак. Не наш метод, однозначно.
Ещё бывают ситуации, когда ресурсы я загружаю динамически с помощью моей системы зависимостей . Модуль (набор JS и CSS файлов) грузится тогда, когда он понадобится на странице. В любом случае нужен какой-то маркер, чтобы подгрузить CSS файл для IE. Я уж лучше в одном файле сделаю каскады, чем буду грузить дополнительный файл.
Остается не решённым для меня комромис: появление каскадности буквально на ровном месте в основном CSS файле или дополнительные маленькие файлы для каждой версии. Даже не знаю пока что лучше. Точнее я сейчас предпочитаю каскад.
Я ничего плохого не вижу в сваливании всех хаков для старых ИЕ в один файл. Но всё зависит от задачи — если их действительно много, то лучше поделить. Но у меня такое редко бывает (пока ни разу, если не считать работу).
Ты ещё сделай по отдельному файлу для всех проверок модернизера :)
То, что по ссылке, — чем оно лучше (отличается) RequireJS?
Артём, я как-нибудь отдельную статью напишу по этому поводу. Оно на RequireJS вообще не похоже, если быть кратким.