... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Подключение таблиц стилей при помощи JavaScript

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы


Этот способ универсальный, и с его помощью можно устранить любые несоответствия в работе различных браузеров. Единственный случай, когда он не может помочь, - отключение поддержки JavaScript в браузере. Иногда так поступают в целях безопасности. Но чаще всего JavaScript поддерживается, и тогда вы можете воспользоваться любым ранее написанным сценарием, которых существует уже великое множество. Или, если вы знакомы с языком JavaScript, можете написать его самостоятельно.

Я вас познакомлю с простым сценарием, который описан в книге Михаила Дубакова. Он довольно прост и после некоторых пояснений будет понятен даже тем, кто вовсе не знаком с программированием на языке JavaScript.

Итак, как вы помните, согласно принципам каскадирования, правила, записанные в таблице ранее других, могут переопределяться последующими правилами. Например, если сначала мы установили для некоторого объекта красный цвет, а впоследствии написали для этого объекта аналогичное свойство, но определяющее уже синий цвет, то в итоге цвет объекта будет синим, т.е. реально применяется последнее правило в таблице стилей. Соответственно, когда к HTML-документу при помощи элемента LINK подключается несколько таблиц стилей, преимущество имеют правила из последней подключенной таблицы. Это нужно всегда помнить при написании документа и оформлении разных таблиц стилей для различных браузеров.

В большинстве случаев браузеры ведут себя одинаково, поэтому можно написать общую для всех таблицу стилей common.css и подключить ее к документу в первую очередь. Затем, в зависимости от того, каким браузером пользуется ваш посетитель, можно будет подключить дополнительную таблицу, написанную специально для этого браузера и предназначенную для устранения его недостатков и несоответствия стандартам.

Как мы уже говорили ранее, в общем виде можно выделить три типа распространенных в настоящее время браузеров, у каждого из которых имеются свои особенности. Во-первых, это браузеры фирмы Microsoft — Internet Explorer 5.x и 6. Во-вторых, это браузер Mozilla (Netscape Navigator работает аналогично, так как построены они на одном движке). В-третьих, это браузер Opera 5+.

Таким образом, всего потребуется написать четыре таблицы стилей.

  1. common.css - общая для всех браузеров; будет подключаться к документу в первую очередь.
  2. ie.css - для Internet Explorer.
  3. mz.css — для браузера Mozilla.
  4. op.css — для браузера Opera.
В этом случае в секции head документа должна присутствовать следующая конструкция:
<LINK REL="stylesheet" TYPE="text/ess" HREF="common.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(1+'ie5'+c);
if (ua.indexOf('IE 6')!=-1) document.write(1+'ie'+c) ;
if (ua.indexOf('Opera')!=-1) document.write(1+'op'+c);
if (ua.indexOf('Netscape6')!=-1) document.write(l+'mz'+c) ;
if (ua.indexOf('Gecko')!=-1) document.write(1+'mz'+c);
</SCRIPT>

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

Далее идет просто сценарий, написанный на языке JavaScript, о чем свидетельствует атрибут type="text/javascript" элемента SCRIPT. Пронумеруем строки этого сценария, чтобы было проще в них ориентироваться.

  1. ua=navigator.userAgent
  2. l='<LINK REL="stylesheet" TYPE="text/ess" HREF="'
  3. c= ' . css"> '
  4. if (ua.indexOf('IE 5')!=-1) document.write(1+'ie5'+c)
  5. if (ua.indexOf('IE 6')!=-1) document.write(1+'ie'+c)
  6. if (ua.indexOf('Opera1)!=-1) document.write(1+'op1+c)
  7. if (ua.indexOf('NetscapeG') !=-1) document.write(1+ 'mz'+c)
  8. if (ua.indexOf('Gecko')!=-1) document.write(1+'mz'+c)

Первая строка записывает в переменную на объект, представляющий собой строку, которую браузер пользователя отсылает Web-серверу для своей идентификации. Строка содержит имя браузера, его версию и название движка, на основе которого сделан браузер. Вот несколько примеров таких строк из разных браузеров.

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.51 [en]
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040616

Во второй строке вводится переменная l, она представляет собой первую часть строки элемента link, предназначенного для подключения корректирующей таблицы стилей.

В третьей строке идет окончание строки записи элемента LINK, которое записывается во вторую вспомогательную переменную с.

В строках 4-8 выполняется определение модели браузера пользователя и в зависимости от этого в документ записывается соответствующий элемент LINK с нужным названием внешней таблицы стилей. Разберем эту процедуру подробнее на примере четвертой строки. if (ua.indexOf('IE 5')!=-l) document.write(l+'ie5'+c);

К переменной ua применяется метод indexOf, который определяет позицию вхождения в переданную браузером пользователя строку идентификации подстроки ('IE 5'), указанной в качестве его аргумента. Грубо говоря, он берет строку, записанную в переменную ua, и анализирует ее с целью отыскания заданного названия браузера. В том случае если оно будет обнаружено, метод ua.indexOf возвращает значение, равное номеру позиции в строке, где это название начинается. Если метод indexOf возвращает значение -1, то заданная подстрока в исходной строке не была найдена.

Конструкция IF в сценарии реализует ветвление в алгоритме. В первой его части ставится условие, и если оно выполняется, то работа продолжается, в противном случае сценарий переходит к следующей строке. В нашем случае конструкция IF проверяет, было ли найдено название нужного браузера в строке ua. И если это нужный нам браузер, в документ записывается название соответствующей таблицы стилей. Если название не найдено, проверяются другие браузеры.

Запись "!=" обозначает "не равно". Таким образом, запись "if (ua. indexOf ('IE 5')!=-1)" означает следующее: проверить, не получаем ли в качестве значения метода indexOf значение -1, т.е. если полученное значение отлично от -1, то подстрока 'IE 5' в переменной ua найдена и модель браузера определена. Если подстрока найдена, то в документ записывается элемент LINK с нужным именем таблицы стилей - строка document .write (l+'ie5'+с). При этом запись формируется из трех частей: первая сохранена в переменной l, вторая и есть название таблицы стилей, а третья - окончание записи, сохраненное во второй вспомогательной переменной с. В результате работы этого сценария к документу подключится нужная таблица стилей.

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены