Каждому браузеру свой стиль
Несмотря на то, что современные браузеры постепенно приближаются друг к другу по своим возможностям и поддержке спецификации 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 Эксплорер при использовании списков
Поскольку речь идет только о шестой версии, то наилучшим вариантом будет применить условные комментарии, которые точно устанавливают обстоятельства их использования.
Чтобы решить указанную проблему, недастаткова использовать отступы и увеличить расстояние от чисел до контента, любые отступы в этом случае браузером полностью игнорируются. Следует указать list-style-position: outside и сместить контент вправо. Вид списка в таком случае будет несколько различаться в разных браузерах, но, тем не менее, отображаться корректно (пример 7).
Пример 7. Исправление Errors браузера Internet Эксплорер 6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 |