Каждому браузеру свой стиль - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Рецепты CSS » Каждому браузеру свой стиль
Каждому браузеру свой стиль
EvgenyДата: Четверг, 25.02.2010, 13:38 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Несмотря на то, что современные браузеры постепенно приближаются друг к другу по своим возможностям и поддержке спецификации CSS, между ними все еще имеются различия в подходах. Каждый браузер интерпретирует по своему усмотрению код HTML и стилей в особенности. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался. Большинство пользователей просто равнодушно относятся ко всяким стандартам и спецификациям, хотя бы потому, что и не подозревают об их существовании. Многие даже не знают, что такое HTML и пользуются браузером, который установлен в системе по умолчанию. Люди приходят на сайты за информацией и заинтересованы в том, чтобы получить ее быстро и без проблем. Если любимый браузер «криво» отображает сайт, то проще не разбираться в чем дело, а закрыть сайт и перейти на другой, благо их теперь много по любой теме.

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

Применение JavaScript

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

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

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

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

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

Code
<!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;
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> является для него прямым родителем.

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

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

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

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

Code
<!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>, поэтому стиль применяться не будет. Чтобы он заработал, надо использовать один из следующих вариантов.
Code
P > I
DIV > P
DIV > P > I

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

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

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

Code
<!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.

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

Code
<!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. Остальные браузеры при этом видят обычный комментарий и не отображают его.

Code
<!--[if IE]>
Код для браузера Internet Explorer
<![endif]-->

Внутри квадратных скобок допустимо использовать следующие ключевые слова:

    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.

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

Code
<!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 Explorer версии 5.5 и старше */
}
</style>
<![endif]--><div>
< p>Lorem ipsum dolor sit amet...</p>
</div>

</body>
</html>

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

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

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

[small]Пример 6. Применение тега < COMMENT>[/small]

Code
<!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).


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

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

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

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

Code
<!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>  

<!--[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 Explorer 6 с помощью условных комментариев.
 
Форум » Статьи о CSS » Рецепты CSS » Каждому браузеру свой стиль
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]