Кросс-браузерный CSS. Часть IV. Разделение таблиц стилей

Кросс-браузерный CSS. Часть IV. Разделение таблиц стилей

Идея такая. С помощью JavaScript можно определять тип и версию браузера, а затем подключать к документу именно ту таблицу, которая написана специально для данного браузера. Есть много разных скриптов, но один из лучших опубликован на сайте www.richinstyle.com. Я его немного модифицировал, и в конечном виде выглядит он так:

ua=navigator.userAgent;
l='<LINK rel="stylesheet" type="text/css" href="';
c='.css"> ';
if (ua.indexOf('IE 4')!=-1) document.write(l+'ie4'+c);
if (ua.indexOf('IE 5')!=-1) document.write(l+'ie5'+c);
if (ua.indexOf('IE 6')!=-1) document.write(l+'ie5'+c);
if (ua.indexOf('Opera')!=-1) document.write(l+'op'+c);
if (ua.indexOf('Netscape6')!=-1) document.write(l+'moz'+c);
if (ua.indexOf('Gecko')!=-1) document.write(l+'moz'+c);
else if (ua.indexOf("compatible")==-1) {
if (ua.indexOf("/4")!=-1) document.write(l+'nn4'+c)}

В общих чертах скрипт работает следующим образом. Вначале для сокращения кода вводится переменная ua, которая содержит объект navigator.userAgent. Этот объект представляет собой строку, которую отсылает браузер серверу для своей идентификации. В ней содержится имя браузера, его версия и название его движка.
Далее опять же для сокращения кода вводится еще одна переменная l, которая содержит первую часть тега <LINK> для подключения таблицы стилей, а переменная c содержит вторую часть тега <LINK> .
Далее идут сравнения. Функция indexOf позволяет выделить часть символов из строки. Так что код

if (ua.indexOf('IE 4')!=-1) document.write(l+'ie4'+c);

обозначает следующее: в строке navigator.userAgent ищется строка IE 4. Если она есть, то с помощью конструкции document.write к странице подключается файл ie4.css. Если же такая строка отсутствует, то файл не подключается, и проверка продолжается.
Так работает скрипт. А принцип действий при верстке следующий. Вы создаете отдельные таблицы стилей для тех браузеров, которые ведут себя не так, как вы планировали. А для тех браузеров, которые ведут себя одинаково с каким-либо другим, отдельных таблиц стилей создавать не нужно.
В данном скрипте предусмотрено подключение следующих таблиц стилей:
• Для браузера Opera любых версий — файл op.css.
• Для браузера Internet Explorer 4 — файл ie4.css.
• Для браузера Internet Explorer 5 — файл ie5.css.
• Для браузера Internet Explorer 6 — файл ie6.css.
• Для браузеров Netscape 6 и Mozilla — файл moz.css.
• Для браузера Netscape Navigator 4 — файл nn4.css.
Это, пожалуй, максимально возможное число отдельных таблиц стилей, которые вам вообще когда-либо могут понадобиться. Обычно же хватает двух-трех. Если вам не нужна отдельная таблица стилей, скажем, для браузера Internet Explorer 4, то надо просто удалить соответствующую строчку в скрипте, в данном случае такую:

if (ua.indexOf('IE 4')!=-1)document.write(l+'ie4'+c);

Вообще делают так: создают простейшую таблицу стилей, которая будет корректно обрабатываться всеми браузерами, и подключают ее как обычно при помощи элемента <LINK> ; затем (обязательно после элемента <LINK> !) подключают скриптовый файл, который уже в свою очередь подключает нужную таблицу стилей, содержащую CSS-код для данного браузера.
Главное достоинство такого способа — простота. Вы совершенно не задумываетесь над тем, какой метод использовать для сокрытия стилей от того или иного браузера. Вы просто берете и пишете для каждого браузера отдельную таблицу стилей. Для сложной верстки этот способ наилучший. Но у него есть один недостаток. Некоторые пользователи отключают JavaScript в браузере по тем или иным причинам (обычно в целях безопасности), в этом случае такой способ подключения стилей не будет работать.
В настоящее время самым распространенным является дифференциация браузеров Internet Explo-rer 5+, Netscape 6 и Opera 5+. Для них создаются таблицы стилей ie.css, nn.css и op.css, а для всех остальных браузеров all.css. Код для дифференциации будет таким:

<LINK REL="stylesheet" TYPE="text/css" HREF="all.css">
<SCRIPT TYPE="text/javascript">
ua=navigator.userAgent;
l='<LINK rel="stylesheet" type="text/css" href="';
c='.css"> ';
if (ua.indexOf('IE 5')!=-1) document.write(l+'ie'+c);
if (ua.indexOf('IE 6')!=-1) document.write(l+'ie'+c);
if (ua.indexOf('Opera')!=-1) document.write(l+'op'+c);
if (ua.indexOf('Netscape6')!=-1) document.write(l+'nn'+c);
if (ua.indexOf('Gecko')!=-1) document.write(l+'nn'+c);
</SCRIPT>

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

Михаил Дубаков, http://wa.artel.by