www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Каждому браузеру свой стиль

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

контентовая версия  

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

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

Применение JavaScript

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

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

где style.CSS (ЦСС) представляет собой файл для конкретного браузера.

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

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

Валидный HTML
<!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>
<script type="text/javascript">


DOM = document.getElementById;
Нетscape4 = document.layer;
Нетscape6 = Mozilla = (navigator.appName == "Нетscape") && DOM;
Нетscape7 = navigator.userAgent.indexOf("Нетscape/7") >= 0;
Опера5 = window.Опера && DOM;
Опера6 = Опера5 && window.print;
Опера7 = Опера5 && navigator.userAgent.indexOf("Опера 7") >= 0;
Опера8 = navigator.userAgent.indexOf("Опера/8") >= 0;
Опера9 = navigator.userAgent.indexOf("Опера/9") >= 0;
IE = document.all && !Опера5;
Файер фох = navigator.userAgent.indexOf("Файер фох") >= 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>

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

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

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

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

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

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

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

Валидный HTML
<!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 Эксплорер (IE) не понимает дочерние селекторы, но зато корректно работает с конконтентными. Создавая код CSS (ЦСС), который одновременно содержит и те и другие селекторы, тем самым делаем разграничение стиля для браузера IE и всех остальных. Хотя конконтентные селекторы понимаются всеми браузерами, последующая строка переназначает текущие установки стиля (пример 3).

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

Валидный HTML
<!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 Эксплорер */
}
DIV > P {
 color: red; /* Для остальных браузеров */
}
</style>
</head>
<body>

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

</body>
</html>

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

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

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

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

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

Валидный HTML
<!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: olive; /* Для браузера Internet Эксплорер */
}
DIV P {
 color: red; /* Для остальных браузеров */
}
</style>
</head>
<body>

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

</body>
</html>

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

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

Любой контент в коде ШТМЛ можно закомментировать и при этом он никак не будет отображаться на web-странице. Для этого его следует поместить между элементами <!-- и -->. Браузер Internet Эксплорер кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Эксплорер. Остальные браузеры при этом видят обычный комментарий и не отображают его.

<!--[if IE]>
Код для браузера Internet Эксплорер
<![endif]-->

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

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

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

Валидный HTML
<!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>
<!--[if gt IE 5.5]>
<style type="text/CSS (ЦСС)">
DIV {
color: red; /* Для браузера Internet Эксплорер версии 5.5 и старше */
}
</style>
<![endif]--><div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

</body>
</html>

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

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

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

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

Невалидный HTML
<!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 Эксплорер покажет белые буквы на зеленом фоне, а остальные браузеры — зеленые символы на сером фоне.

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

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

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

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

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

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

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

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

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/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>

<!--[if IE 6]>

<style type="text/CSS (ЦСС)">
OL LI {
 list-style-position: outside; /* Маркеры расположены за пределами контентового блока */
 margin-left: 22px; /* Отступ слева */
}
</style>
<![endif]-->

<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 Эксплорер 6 с помощью условных комментариев.

Статья опубликована: 04.10.2009 Последнее обновление: 17.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

display
Многоцелевой атрибут, который определяет, как элемент должен быть показан в файле.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект