Отправляет email-рассылки с помощью сервиса Sendsay

Web - полезные советы по веб-строительству

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "От Винта - Раскрутка сайта. Способы. Сравнительный анализ." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Владимирис

Статистика

8.145 подписчиков
-7 за неделю
←   Все выпуски   →

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


Уважаемые читатели!
Свежие выпуски других наших рассылок размещаются на нашем новом сервисе "wYw.RU Мир Друзей" в разделе "Статьи" (http://wyw.ru/articles.php).

Зарегистрируйтесь и Вы сможете:
- Обсуждать рассылки с другими читателями;
- Задавать вопросы авторам рассылок;
- Создавать свои опросы, чтобы узнать мнение других читателей
- ...и многое другое.

Регистрация займет у Вас 1 минуту. Ждем Вас на wYw.RU!

С уважением,
Екатерина
ведущая рассылок
"ИнфоСтарз"


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

Одной из составляющих профессионализма любого 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, в противном случае никакие действия не выполняются.

По материалам сайта http://www.vektorzone.narod.ru



Вам понравилась рассылка?
(голосование возможно только из письма рассылки)
  • понравилась
    		•
  • не понравилась
    		•
  • средне
    		•


    В избранное