Оглавление

Указание базовой таблицы стилей для самых старых браузеров

В настоящее время технология CSS получила настолько широкое распространение в веб-среде, что пользователям очень старых броузеров, таких как Netscape 4, доступны лишь крайне ограниченные возможности современных сайтов. Однако с ними также следует считаться, по крайней мере обеспечивая возможность нормального восприятия контента и отсутствие сбоев, вызванных использованием современных достижений CSS. Для таких устаревших броузеров нужно создать специальную простую таблицу стилей, а основную таблицу стилей привязать не распознаваемыми ими средствами.

 

Решение
Netscape 4, Internet Explorer 4 и другие старые броузеры не поддерживают возможность ссылки на таблицу стилей с помощью метода @import, а благодаря особенностям CSS эта непонятная команда будет ими проигнорирована. Мы можем воспользоваться этим для выполнения нашей задачи: более старые броузеры прочтут специально созданный для них набор стилей, а более новые броузеры, понимающие команду @import, смогут увидеть полную таблицу стилей.


Внутри элемента head вашего документа необходимо указать ссылку на базовую таблицу стилей с помощью элемента link - она будет прочтена всеми броузерами, поддерживающими CSS. Затем привяжите полную таблицу стилей (или таблицы стилей) с помощью метода @import, который будет пропущен без внимания старыми броузерами:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Serving a basic stylesheet</title>
    <link rel="stylesheet" href="basic_basic.css" type="text/css" media="screen"  />
    <style type="text/css" media="screen">
      @import "basic_default.css";
    </style>
  </head>

  <body>
    <div class="content">
      <h1>Указание базовой таблицы стилей для самых старых броузеров</h1>
      <p>В настоящее время технология CSS получила настолько широкое распространение 
	  в веб-среде, что пользователям очень старых броузеров, таких как Netscape 4, 
	  доступны лишь крайне ограниченные возможности современных сайтов.</p>
    </div>
  </body>
</html>

 

Представленная ниже таблица стилей basic_basic.css содержит несколько простых правил стилей, обеспечивающих читаемость страницы. Если у вас есть возможность тестирования в броузере Netscape 4(1), таблицу можно немного усложнить, не рискуя возникновением сбоев. В настоящее время такими старыми броузерами пользуются единицы. Отображение для них документа в базовом стиле – хороший результат, поскольку он по крайней мере обеспечивает им возможность прочитать содержимое сайта, чего, конечно, недостаточно для остальных пользователей.

 

basic_basic.css

body {
background-color: #fff;
color: #000;
margin: 0;
padding: 5%;
}
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p {
font-family: verdana, arial, helvetica, sans-serif;
color: #000;
}

 

Помните, что современные броузеры прочтут обе таблицы стилей, поэтому в основной из них помимо добавления дополнительных свойств необходимо переопределить те свойства базовой таблицы стилей, которые вы хотели бы отображать по-другому в более новых броузерах.

 

Чтобы продемонстрировать данный подход на практике, я добавила несколько правил в следующий код;

 

basic_default.css

h1 {
color: #cc0022;
margin: 0;
}
.content {
background-color: #ececec;
padding: 0.6em;
}

 

результат его обработки показан на рис. 7.2 и 7.3:

 

Вид документа в Netscape 4.8

Рис. 7.2. Вид документа в Netscape 4.8

 

Вид того же документа в Firefox

Рис. 7.3. Вид того же документа в Firefox

 

Обсуждение
Броузеры с минимальной поддержкой CSS доставляют больше всего хлопот, поскольку они понимают достаточно, чтобы предпринять попытку интерпретации кода, но недостаточно для того, чтобы сделать это
правильно! Расширенные возможности CSS, применяемые при разработке среднего современного сайта, скорее всего будут отображены старым броузером искаженно или вообще не позволят открыть страницу.
Скрытие стилей с помощью метода @import позволит избежать таких сбоев. На самом деле даже не обязательно добавлять базовую таблицу стилей – если вы присоединяете свою таблицу стилей с помощью @import, то в старых броузерах документ будет отображен в соответствии с их внутренней таблицей стилей.

 

Однако использование базовой таблицы стилей, связанной с документом при помощи ссылки, обладает дополнительным преимуществом: это позволит избежать «мелькания неотформатированного контента». Этот досадный сбой состоит в том, что пользователи Internet Explorer на долю секунды видят неотформатированный документ (оформленный в соответствии с используемой по умолчанию таблицей стилей), пока ваша таблица стилей находится в процессе загрузки. Добавление ссылки перед выражением импорта – как в данном примере – позволяет решить описанную проблему. Таким образом, мы можем выразить свое лояльное отношение к оставшимся пользователям неуклюжих броузеров с помощью всего лишь одной уловки!

Примечания:
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити