IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

 IZONE 


Правильные таблицы стилей

"Тяжела и неказиста..." Вобщем, трудно быть разработчиком html, когда основные игроки на рынке браузеров интерпретируют рекомендации W3C так, как им заблагорассудится. Я уверен, что вы уже сотню раз встречались с тем, что правильно показываемый в Internet Explorer код, выглядит абсолютно "криво" в Netscape Navigator. Простой пример. Если вы напишете следующее на своей странице:

...
<STYLE TYPE="text/css">
BODY {
  font-family: helvetica;
}

...
<TABLE BORDER=1>
<TR><TD>Текст в таблице</TD></TR>
</TABLE>

То результаты в Netscape Navigator и Internet Explorer будут несколько непохожи друг на друга:

Internet Explorer

Netscape Navigator

Internet Explorer Netscape Navigator

В первую очередь, в глаза бросается то, что гарнитуры разные! Попробуем это исправить, добавив в стили следующее правило:

TD {
  font-family: helvetica;
}

Теперь вроде стало по-лучше.

Netscape Navigator после изменений

Netscape Navigator после изменений

В данном случае не составляет труда внести изменения в таблицу стилей. Но при создании большого, серьезного сайта, таких изменений может быть сотни. Причем, значение, правильное для Netscape Navigator может полностью исказить картинку в Internet Explorer. Что же делать? Я не советую вам применять метод насильственного насаждения своего любимого браузера посетителям вашего сайта, так как вы им, гораздо менее дороги, чем любимая бродилка. Жестко? Что делать, зато правда.

Есть гораздо более красивое решение этой проблемы. Из скрипта мы можем достоверно определить каким браузером просматривается страница. Сделать это можно так:

<SCRIPT TYPE="text/javascript">
   if (navigator.appName.indexOf("Explorer") >= 0) {
      document.write('<LINK REL=stylesheet HREF="explorer.css"' + 
                 'TYPE="text/css">');
  }
   else {
      document.write('<LINK REL=stylesheet HREF="navigator.css"' + 
                 'TYPE="text/css">');
      }
</SCRIPT>

Таблицы стилей будут выглядеть следующим образом:

; navigator.css
BODY {
  font-family: helvetica;
}
TD {
  font-family: helvetica;
}

; explorer.css
BODY {
  font-family: helvetica;
}

Таким образом мы раздали каждому браузеру, причитающуюся ему таблицу стилей. Казалось бы, можно вздохнуть с облегчением, но есть и другие браузеры. Из самых распространенных - Opera (кстати, очень хороший браузер, влезающий на дискету. И, по последним данным, поддерживающий рекомендации W3C на 78%, что в несколько раз превышает такие значения для IE и NN). 

Источник: http://exper.ural.ru/

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.