Каждому браузеру свой стиль

Влад Мержевич

Несмотря на то, что современные браузеры постепенно приближаются друг к другу по своим возможностям и поддержке спецификации CSS, между ними все еще имеются различия в подходах. Каждый браузер интерпретирует по своему усмотрению код HTML и стилей в особенности. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался. Большинство пользователей просто равнодушно относятся ко всяким стандартам и спецификациям, хотя бы потому, что и не подозревают об их существовании. Многие даже не знают, что такое HTML и пользуются браузером, который установлен в системе по умолчанию. Люди приходят на сайты за информацией и заинтересованы в том, чтобы получить ее быстро и без проблем. Если любимый браузер «криво» отображает сайт, то проще не разбираться в чем дело, а закрыть сайт и перейти на другой, благо их теперь много по любой теме.

Таким образом, мы приходим к выводу, что код надо делать универсальным, «заточенным» под разные браузеры, а это значит, что требуется изучать их особенности и много тестировать документы. И здесь мы сталкиваемся порой с противоречиями в работе браузеров, обойти которые можно только написанием кода CSS под каждый браузер. Ниже рассматриваются методы, которые учитывают специфику браузеров и позволяют сократить затраты времени и сил при создании сайтов.

Применение JavaScript

Проще всего определить нужный браузер с помощью JavaScript, после чего загрузить для него требуемый файл со стилями. Этот способ хорош еще тем, что позволяет узнать версию браузера, а не просто его название. Сам стилевой файл подключается через метод document.write, который в данном случае будет использоваться так:

document.write("<link rel='stylesheet' href='style.css' type='text/css'>")

где style.css представляет собой файл для конкретного браузера.

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

Пример 1. Добавление стиля через JavaScript

DOM = document.getElementById;
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") && DOM;
Netscape7 = navigator.userAgent.indexOf("Netscape/7") >= 0;
Opera5 = window.opera && DOM;
Opera6 = Opera5 && window.print;
Opera7 = Opera5 && navigator.userAgent.indexOf("Opera 7") >= 0;
Opera8 = navigator.userAgent.indexOf("Opera/8") >= 0;
Opera9 = navigator.userAgent.indexOf("Opera/9") >= 0;
IE = document.all && !Opera5;
Firefox = navigator.userAgent.indexOf("Firefox") >= 0;
if(IE) document.write("<link rel='stylesheet' href='/ie.css' type='text/css'>");
else document.write("<link rel='stylesheet' href='/style.css' type='text/css'>");
</script>
</head>
<body>
<p>...</p>
</body>
</html>

Не стоит считать, что придется писать отдельные стили для всех браузеров. Например, Netscape (версии 6 и старше), Mozilla и Firefox основаны на одном ядре под названием Gecko, поэтому работают c сайтами примерно одинаково. В какой-то мере по своему подходу близки браузеры Internet Explorer 6 и Opera 7, и в большинстве случаев они отображают результат в равной мере правильно. Получается, что обычно требуется создать всего два разных стиля, предназначенных для браузеров, принадлежавших к разным «лагерям».

Дочерние селекторы

Спецификация CSS говорит, что для управления стилем дочерних элементов используется символ > (знак «больше»). Запись H1 > I { color: green } сообщает браузеру установить зеленый цвет для содержимого тега <I> только в том случае, если заголовок <H1> является для него прямым родителем.

Существуют и контекстные селекторы, которые по своему предназначению весьма похожи на селекторы дочерние. При этом два селектора пишутся подряд через пробел.

DIV > I { ... } /* Дочерний селектор */
DIV I { ... } /* Контекстный селектор */

Разница между этими видами селекторов следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 2).

Пример 2. Неправильное использование дочернего селектора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Дочерние селекторы</title>
<style type="text/css">
DIV > I {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>

<div>
<p><i>Lorem ipsum dolor sit amet...</i></p>
</div>

</body>
</html>

В примере показано добавление тега <DIV>, внутри которого размещается параграф <P>, а у него в свою очередь, тег <I>. В стиле прописано изменить цвет текста на красный у селектора <I>, но только в том случае, если он непосредственно находится внутри <DIV>. А в нашем случае тег <I> располагается внутри <P>, поэтому стиль применяться не будет. Чтобы он заработал, надо использовать один из следующих вариантов.

P > I
DIV > P
DIV > P > I

Контекстные селекторы не учитывают порядок вложенности элементов, поэтому запись DIV I в примере 2 будет действовать правильно, т.е. цвет текста станет красным.

Вернемся теперь к браузерам. Internet Explorer (IE) не понимает дочерние селекторы, но зато корректно работает с контекстными. Создавая код CSS, который одновременно содержит и те и другие селекторы, тем самым делаем разграничение стиля для браузера IE и всех остальных. Хотя контекстные селекторы понимаются всеми браузерами, последующая строка переназначает текущие установки стиля (пример 3).

Пример 3. Селекторы для разных браузеров

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы</title>
<style type="text/css">
DIV P {
color: green; /* Для браузера Internet Explorer */
}
DIV > P {
color: red; /* Для остальных браузеров */
}
</style>
</head>
<body>

<div>
<p><i>Lorem ipsum dolor sit amet...</i></p>
</div>

</body>
</html>

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

В браузере Internet Explorer 5 замечена интересная особенность — он понимает конструкцию HTML > селектор, которую другие браузеры, в том числе его же старшие версии, игнорируют. Добавив в код стиля текст HTML > DIV { color: red } получим текст, который находится внутри тега <DIV>, красного цвета. Но только в IE 5.

Универсальный селектор

Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer. Таким образом, изменение стиля для разных браузеров показано в примере 4.

Пример 4. Использование универсального селектора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы</title>
<style type="text/css">
* HTML DIV P {
color: olive; /* Для браузера Internet Explorer */
}
DIV P {
color: red; /* Для остальных браузеров */
}
</style>
</head>
<body>

<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

</body>
</html>

В данном примере показано создание стиля для IE и всех других браузеров.

Условные комментарии

Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами . Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.

Внутри квадратных скобок допустимо использовать следующие ключевые слова:
IE — любая версия браузера Internet Explorer;
IE 5 — Internet Explorer 5;
IE 5.5 — Internet Explorer 5.5;
IE 6 — Internet Explorer 6;
IE 7 — Internet Explorer 7;
lt — номер версии браузера меньше указанной;
gt — номер версии больше указанной;
lte — номер версии меньше или равен указанной;
gte — номер версии браузера больше или равен указанной.

Поскольку указанные элементы можно писать только внутри контейнера <BODY>, то следует добавить тег <STYLE>, как показано в примере 5.

Пример 5. Добавление условных комментариев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Комментарии</title>
<style type="text/css">
DIV {
color: silver; /* Для всех браузеров, кроме IE */
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

</body>
</html>

В данном примере вначале создается стиль для всех браузеров, а затем, с помощью условных комментарием он переназначается только для браузера IE. Заканчиваются такие комментарии одинаково, путем добавления конструкции <![endif]-->.

Использование тега <COMMENT>

Следует отметить, что для других браузеров тоже существует вариант, когда им «подкладывают» стиль, отличный от стиля IE. С этой целью применяется тег <COMMENT>, который добавляет комментарий. Хитрость в том, что этот тег понимается только браузером IE, соответственно, все, что находится внутри этого контейнера, в этом браузере не отображается. Остальные браузеры этот тег не понимают, поэтому просто его игнорируют, но при этом содержимое этого тега нормально обрабатывается. Получается, что вначале указываем стиль для браузера IE, а затем внутри тега <COMMENT> повторяем стиль уже для остальных браузеров (пример 6). Когда идет несколько одинаковых описаний стиля для одного и того же селектора, то применяется тот стиль, который располагается в коде ниже других.

Пример 6. Применение тега <COMMENT>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Комментарии</title>
<style type="text/css">
DIV {
background: green; /* Зеленый цвет фона */
color: white; /* Белые буквы */
padding: 4px; /* Поля вокруг текста */
}
</style>
<comment>
<style type="text/css">
DIV {
background: silver; /* Серый цвет фона */
color: green; /* Зеленые буквы */
}
</style>
</comment>
<div>Lorem ipsum dolor sit amet...</div>

</body>
</html>

Internet Explorer покажет белые буквы на зеленом фоне, а остальные браузеры — зеленые символы на сером фоне.

Примеры использования стиля для разных браузеров

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

В браузере Internet Explorer 6 существует следующая ошибка. При использовании нумерованного списка <OL> и значения inside параметра list-style-position, числа идущие с 10, начинают накладываться на текст списка (рис. 1).

Рис. 1. Ошибка в браузере Internet Explorer при использовании списков

Поскольку речь идет только о шестой версии, то наилучшим вариантом будет применить условные комментарии, которые точно устанавливают обстоятельства их использования.

Чтобы решить указанную проблему, недостаточно использовать отступы и увеличить расстояние от чисел до текста, любые отступы в этом случае браузером полностью игнорируются. Следует указать list-style-position: outside и сместить текст вправо. Вид списка в таком случае будет несколько различаться в разных браузерах, но, тем не менее, отображаться корректно (пример 7).

Пример 7. Исправление ошибок браузера Internet Explorer 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>IE</title>
<style type="text/css">
OL {
list-style-position: inside; /* Маркеры обтекаются текстом */
}
</style>
</head>
<body>



<ol start="20">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ol>

</body>
</html>

В данном примере показана установка стиля для тега <OL>, а затем он переназначается для браузера Internet Explorer 6 с помощью условных комментариев.

Статья опубликована: 04.10.2005

Последнее обновление: 17.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Katya

13.09.2006

Много полезной информации... Может поможете по теме: почему когда <li> указать блочным элементом - маркеры списка отображаются только у ИЕ , а опера и мозила их не отображают?

Skulker

03.11.2006

Спасибо за <comment>, такого не знал
Можно еще добавить в хаки css условное цитирование для осла 5 Маков

table{
.../*some code for all browsers*/
}
/*
Код в данном учаастке будет не виден для всех броузеров
*/
Код будет выполнен в маке и 5-м осле
table{
.../*some special code*/
}
*/

Night_Pilgrim

29.11.2006

У меня проблема с полосой прокрутки, что прописать в CSS чтобы она у меня правильно отображалась на сайте, в котором к тому же используются фрэймы?!

Николай

21.12.2006

Как же хорошо что существует htmlbook.ru! Вечная хвала его автору

Статья очень помогла!!!

Sergey-maker

05.01.2007

Эй Night_Pilgrim, вот тебе ответ

ЦВЕТА СКРОЛЛА:

SCROLLBAR-FACE-COLOR - основной цвет скролл-бара, закрашивается блок прокрутки прокрутки и две завершающие кнопоки-стрелки.

SCROLLBAR-TRACK-COLOR - цвет задней части скролла

SCROLLBAR-HIGHLIGHT-COLOR - устанавливает цвет подсветки.

SCROLLBAR-SHADOW-COLOR - цвет тени.

SCROLLBAR-ARROW-COLOR - устанавливает цвет стрелок.

SCROLLBAR-TRACK-COLOR - определяет цвет дорожки прокрутки.

Выбираешь, что нужно и впихиваешь в body. Как-то раз делал:

<style type="text/css">
body {
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #eeeeee;
scrollbar-darkshadow-color: #eeeeee;
}
</style>

Для Internet Explorer 5.5 и выше (ну и Opera тоже)

Ouch

01.03.2007

Выше преведенная конструкция

DIV P {
color: green /* Для браузера Internet Explorer */
}

DIV > P {
color: red /* Для остальных браузеров */
}

не работает в IE 7.0
Он теперь не игнорирует > .

CoH

17.04.2007

Статья уже устарела и потеряла смысл

Wechsel

17.06.2007

Пора, пожалуй, обновить статью. В противном случае ресурс как-то, уж простите, стареет и становится не актуальным!

Михаил

16.07.2007

Влад, почему если в примере 7 я перемещу параметр width: 100%
из контекстного селектора * HTML #menu A
в контекстный селектор #menu A, то IE 6 все равно не отображает линк на всю ширину меню?

Влад Мержевич

24.07.2007

Любая ссылка по определению есть встроенный элемент, а для них ширина не задается. Надо добавить display: block и превратить ссылку в блочный элемент, тогда и ширину можно указывать.

Mediator_XP

30.08.2007

а можно ли как-дь это вписать в .css-файл (просто скопировать не помогает)

Влад Мержевич

31.08.2007

Именно этот код в CSS записать нельзя.

SaBoNim

09.10.2007

Очень срочно!!! Очень надо!!! Нигде не могу найти, весь русский инет облазила. Скажите пожалуйста, как изменить этот скрипт, чтобы он выбирал из браузеров Opera 8, Opera 9, IE6, IE7, FF, и для каждого конкретного выводил отдельный .css?
<script type="text/javascript">

DOM = document.getElementById;
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") && DOM;
Netscape7 = navigator.userAgent.indexOf("Netscape/7") >= 0;
Opera5 = window.opera && DOM;
Opera6 = Opera5 && window.print;
Opera7 = Opera5 && navigator.userAgent.indexOf("Opera 7") >= 0;
IE = document.all && !Opera5;
Firefox = navigator.userAgent.indexOf("Firefox") >= 0;

if(IE) document.write("<link rel='stylesheet' href='/ie.css' type='text/css'>");
else document.write("<link rel='stylesheet' href='/style.css' type='text/css'>");

</script>

Влад Мержевич

15.10.2007

Opera9 = navigator.userAgent.indexOf("Opera/9") >= 0;
Firefox = navigator.userAgent.indexOf("Firefox") >= 0;

Павел

12.01.2008

Нашел вот такую ссылку, js, позволяющий использовать разные стили для разных браузеров и ОС

http://rafael.adm.br/css_browser_selector/

Валера

06.02.2008

Привет,
что вы думаете на счет использования "_" или "*" перед css свойством, все браузеры кроме IE игнорируют это выражение, IE обрабатывает его как соответственное свойство.
Пример:
div{color: red; _color: green;}
В IE цвет шрифта будет зеленым тогда как в остальных браузерах красным.

undkit

08.02.2008

Хочу поделить свой сегодняшней находкой:

Стили для оперы можно указывать так:
1.
<style type="opera/css">
</style>

<link rel="stylesheet" type="opera/css" href="?" />

2.

А у Firefox есть свои свойства css, правда они часть XUL http://xulplanet.com/references/elemref/ref_StyleProperties.html

Особенно полезно свойство -moz-box-sizing, отвечающее за то, как высчитывается ширина/высота: неправильно (как у IE), или правильно:
* content-box: The width and height properties specify the size of the element including the padding.
* border-box: The width and height properties specify the size of the element including the padding and border.
* padding-box: The width and height properties specify the size of the element. The padding, border and margin are added outside of this size.

moorush

19.03.2008

советую еще вот такой вариант определения браузера:
http://rafael.adm.br/css_browser_selector

Каждому браузеру свой стиль

Применение JavaScript

Дочерние селекторы

Универсальный селектор

Условные комментарии

Использование тега <COMMENT>

Примеры использования стиля для разных браузеров

Комментарии к статье

Добавить комментарий