Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 154 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • CSS

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

  • 28.10.2001

Автор статьи: Головин Андрей

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

<STYLE TYPE=»text/css»>
BODY {
font-family: helvetica;
}
</STYLE>
…
<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). Этот подлый враг веб-мастера (версия 3.6b3) скрывается под личиной Netscape Navigator версии 3.0. Как определить, что это именно Опера и подсунуть ему нужную таблицу стилей я не знаю 🙁 Если кто-то знает — напишите.

alexvolkov

Предыдущий материал
  • CSS

Указатели

  • 27.10.2001
  • alexvolkov
Read More
Следующий материал
  • PHP

Серверные скрипты. Введение

  • 28.10.2001
  • alexvolkov
Read More
Вас также может заинтересовать
Read More
  • CSS

Формализация CSS

  • Алексей Волков
  • 23.05.2012
Read More
  • CSS

Ножницы для CSS

  • Алексей Волков
  • 25.01.2005
Read More
  • CSS

CSS: фон и цвет

  • Алексей Волков
  • 27.05.2004
Read More
  • CSS

CSS: позиционирование блоков

  • Алексей Волков
  • 08.04.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 02.02.2004
Read More
  • CSS

Что такое каскадные таблицы стилей (CSS)

  • Алексей Волков
  • 27.11.2003
Read More
  • CSS

Создание «буквиц»

  • alexvolkov
  • 30.11.2001
Read More
  • CSS

Описание стилей элемента<A>

  • alexvolkov
  • 05.11.2001

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter