VektorZone Теория и практика CSS. Профессиональная CSS-верстка страниц. Секреты профессионального web-дизайна. Хитрости HTML и CSS. JavaScript и CSS: особенности использования в различных броузерах

JavaScript и CSS: особенности использования в различных броузерах

Антипенко Д.

Опубликовано: 05.01.2003

Последнее изменение:

Одной из составляющих профессионализма любого web-мастера является его способность создавать код, который одинаково корректно воспринимается всеми броузерами (если быть точнее, то не всеми, а наиболее популярными). Причем это относится не только к HTML, но и к CSS. В первом случае довольно просто найти необходимые решения, т.к. существует достаточно большое количество публикаций и советов о том как надо делать, что не стоит использовать и т.д. для того, чтобы добиться одинакового отображения html-кода в разных броузерах. Во втором случае дело обстоит сложнее. Ну что же, давайте разбираться.

Итак, основным методом сокрытия css-кода для определенных броузеров является использование их ошибок в интерпретации тех или иных команд. Однако ошибки есть ошибки и ни кто не застрахован, что в следующей версии программы они будут устранены. Как после этого будет выглядеть Ваша страница предугадать сложно. Поэтому давайте рассмотрим другой, достаточно эффективный способ - это JavaScript.

Если Вы посмотрите код странички поисковой системы Яndex, то обнаружите что определение стилей имеет примерно такой вид:

 <style>
	.list {text-indent:-15px; margin-left:10px}
	.sublist {text-indent:-10px; margin-left:20px}
	.subsublist {text-indent:-10px; margin-left:30px}
	...
	.l {margin-bottom:2px}
	.bln {color:black;}
	.page {background-color:#BAC9E6}
 </style>
 <script>
 document.all ? document.styleSheets[0].addRule
 (".sel","font-size:11px") : 0 ;
 </script>

Обратите внимание на конструкцию, определенную в тегах <script> </script>. Очевидно, там устанавливается правило для класса sel. Вопрос почему оно определено именно таким образом и для какого броузера предназначается мы и рассмотрим далее в этой статье.

Откройте любую книгу по JavaScript и Вы обнаружите, что Netcsape Navigator поддерживает таблицы стилей, которые подключаются с помощью синтаксиса JavaScript. NN содержит три типа объектов: tags, содержащий дескрипторы HTML, classes, содержащий определенные классы, и ids, содержащий идентификаторы отдельных элементов. Рассмотрим простой пример:

 <html>
 <head>
 <style type="text/css">
 h1 {font-size:14pt; font-style:Arial; 
text-align: center}
 p {color:red; font-size:12pt}	
 </style>
 </head>
 <body>
 <h1>Это заголовок h1</h1>
 <p> А это абзац</body>
 </html>

На JavaScript это будет выглядеть следующим образом:

 <html>
 <head>
 <style type="text/javascript">	
	tags.h1.fontSize="14pt";
	tags.h1.fontStyle="Arial";
	tags.h1.textAlign-"center";
	tags.p.color="red";
	tags.p.fontSize="12pt";
 </style>
 </head>
 <body>
	<h1>Это заголовок h1</h1>
	<p> А это абзац</body>
 </body>
 </html>

Первый вариант буде выглядеть одинаково во всех броузерах. А второй вариант - только в броузере NN.

Теперь давайте разберемся с MSIE. Как было сказано выше, свойства tags, classes и ids объекта document используются только в NN. В MSIE значения этих свойств сохраняются в массиве document.all.

В MSIE для сохранения определенных таблиц стилей используется объект document.styleSheets. Приведенный выше пример для MSIE будет выглядеть следующим образом:

 <html>
 <head>
 <style id="ie" type="text/css">	
 </style>
 </head>
 <body>
 <script>
	document.styleSheets["ie"].addRule("h1",
	"font-size:14pt; font-style:Arial; 
text-align: center");
	document.styleSheets["ie"].addRule("p",
	"color:red; font-size:12pt");
 </script>
	 <h1>Это заголовок h1</h1>
	 <p> А это абзац</body>
 </body>
 </html>

Этот вариант корректно отобразит и MSIE, а вот NN его не увидит.

Что касается Opera, то обращение к элементам осуществляется через семейство getElementById объекта document:

 <html>
 <head>
 <style id="ie" type="text/css">	
 </style>
 </head>
 <body>
	 <h1 id="hh">Это заголовок h1</h1>
	 <p id="pp"> А это абзац</body>

 <script>
	document.getElementById("hh").style.fontSize="14pt";
	document.getElementById("hh").style.fontStyle="Arial";
	document.getElementById("hh").style.textAlign-"center";
	document.getElementById("pp").style.fontSize="12pt";
	document.getElementById("pp").style.color="red";

 </script>
 </body>
 </html>

Вот пример для Opera .

Один из методов определения броузера заключается в наличии объекта document.layers, присутствующего в NN, объекта document.all, присутствующего в MSIE или объекта getElementById в Opera. Однако объект document.getElementById присутствует как в Opera, так и в IE, поэтому проверку на Opera и IE лучше делать таким образом:

<script language="JavaScript">
ns 	= (document.layers)? true:false;
ie 	= (document.styleSheets)? true:false;
opera=(ie)?false:true;
</script>

Вот, коротенько и все. Теперь Вы видите, что в нашем первом примере с Яndex отдельно был указан класс для MSIE. Использовался он следующим образом:

	...
 <td nowrap>
 <font size=-1>Цена от</font>
 </td>
 <td nowrap><font size=-1>
   <input type=text name=pricefrom
   value="" size=4 class=sel>
   до<input type=text name=priceto
   value="" size=4 class=sel>
   <select name="curr" class=sel>
   <option value="usd">USD
   <option value="rbl" selected>руб.
   </select>
 </td>
	...

Кстати, это правило вводится с помощью сокращенной формы условия. Сначала определяется существует ли объект document.all и если это так, то добавляется класс sel, в противном случае никакие действия не выполняются.