Internet Explorer – каждой версии свой набор CSS

Internet Explorer – каждой версии свой набор CSS изображение поста

Итак, Microsoft год от года радует нас все новыми операционными системами. И в довесок к каждой по фирменному Internet обозревателю. Причем: каждой операционной системе – своя версия. Ах, как было бы здорово, если бы Internet Explorer после установки windows обновился бы по-тихому, и не мозолил бы глаза старыми версиями. Но не тут-то было.

И рядовому обывателю продолжают навязывать недоделки 6-7-8 и 9 версии Internet Explorer от Microsoft (ох уж этот дикий средневековый маркетинг). А так как многие из пользователей пользуются тем, что имеют под рукой, и продолжают «исследовать» интернет при помощи IE различных (даже анахроничных и совсем антикварных) версий.

Причем каждая из версий (от 6 и до последней 10-й) имеет собственное представление о поддержке тех или иных стандартов, рекомендованных к употреблению W3C, свой «набор» особенных глюков и т.п. А ведь доля встречаемости Internet Explorer среди посетителей довольно велика — им пользуются миллионы пользователей.

Удобство использования сайтов для данных посетителей все-таки стоит учитывать (если Ваш сайт глючит в обозревателе, то хозяин этого «чуда техники» вряд ли вернется к Вам еще раз, а уйдет к «соседу»). И web-мастеры всего мира рвут волосы на голове, продолжают вместе с дизайнерами «оптимизировать» дизайн своих сайтов под каждую версию IE.

Каждой версии Internet Explorer – свой набор css

Как проще всего это реализовать? Дело в том, что Internet Explorer поддерживает собственные условные комментарии, которые позволяют нам определить версию браузера и задать особые правила для каждой версии IE.

Поддерживает довольно давно, с самых первых версий. При этом другие браузеры видят на месте условных комментариев от IE самые обыкновенные html комментарии. И тут рождается подобная идея: а почему бы не задать, собственно, отдельные классы для каждой версии IE для корневого элемента дерева DOM html при помощи условных комментариев?

  1. Тем самым мы для каждой версии IE сможем не только задать собственный набор правил, но и переопределить любое из правил, уже ранее, или даже в дальнейшем следующее в css с более высоким приоритетом именно для данной версии Internet Explorer.
  2. При таком подходе нам не нужно создавать на каждую версию IE отдельный файл и подключать по условным комментариям отдельный файл с правилами, проверять BROWSER AGENT на стороне сервера и т.п.

Примечание автора: а ведь чем меньше файлов css мы подключаем, тем быстрее грузится сайт (не тратится время на запрос даты изменения файла, наличия файла на сервере, его содержимого, если кэширование не поддерживается или кеширование файлов css в браузере запрещено в его настройках).

Мы просто для определенных правил css, которые будут исполняться только в указанной версии IE, сможем в общем потоке css правил в тех же самых файлах использовать следующие префиксы классов: .ie6,.ie7,.ie8,.ie9. Причем перекрестный поиск по всем css файлам по именам данных классов позволяет быстро отследить все правила для определенной версии Internet Explorer в целом.

Итак, давайте рассмотрим предложенный подход к верстке на примере:

HTML код:

<!doctype   html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6" lang="ru"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7"   lang="ru"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8"   lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js ie9" lang="ru">   <!--<![endif]-->

Зададим следующий набор классов для элемента html (корневого элемента в иерархии DOM страницы) следующие классы:

  • Для IE версии меньше 7 рки: .ie6
  • Для IE 7 версии: .ie7
  • Для IE 8 версии: .ie8
  • Для IE больше 8 рки: .ie9

Кроме того, мы также добавили несколько классов, которые помогут нам задавать общие правила (группировать общие правила) для нескольких групп IE разных версий:

  • .lt-ie7 – версии IE меньше семерки;
  • .lt-ie8 – версии IE меньше восьмерки (IE 6,7);
  • .lt-ie9 – версии IE меньше девятки (IE 7,8,9).

Как же использовать оформление для различных версий IE в общем файле .css правил. Например, нам нужно задать для элемента <div id=»wrapper»></div> отступы для всех не IE обозревателей, равные 10 пикселей, для IE6 – 5 пикселей, для 7,8 по 9 пикселей соответственно.

Просто добавляем следующий набор правил css:

#wrapper{ margin: 10px; }
.ie6 #wrapper{ margin: 5px;}
.ie7 #wrapper,.ie8 #wrapper{ margin: 9px;}

Как видите, задавать отдельные css правила для каждой версии IE становится очень просто, практически элементарно.

Комментарии