Web-Anatomy.Ru

Десятилетию Рунета посвящается

К выпуску № 42 («Каждому по потребностям»)

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

Вниманию читателей предлагается описание шаблона страницы, использующей XHTML 1.0 Strict для разметки содержимого и внутренний лист стилей — для управления представлением данных.

Лист стилей определяет три обособленных набора правил представления контента, должных применяться браузером автоматически и прозрачно для пользователя. Речь идет о версиях представления содержимого веб-страницы 1) для экрана настольного компьютера или ноутбука, 2) для экрана карманного компьютера и 3) для вывода на печать.

<!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" lang="ru" xml:lang="ru">

<head>
<title>Каждому по потребностям</title>
<style type="text/css">
<!--
/* Правила для всех типов устройств */
#main a {text-decoration: none}
#main a:link {color: #06c}
#main a:visited {color: #999}
#main a:active {color: #f00}
#main a:hover {text-decoration: underline}

/* Версия представления контента для экранов настольных компьютеров и ноутбуков */
@media screen
{
html, body {margin: 0px; padding: 0px; border: 0px; width: 100%; height: 100%}
body {font: 80% Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #000; background: #666}
div {position: relative}
#carrier {background: #fff}
#header {font-size: 250%; color: #fff; background: #69c; margin: 0px; padding: 20px}
.navigation {width: 100%; clear: both}
.navigation p {margin: 0px; padding: 5px 20px 5px; text-align: center; background: #fff0cc; border: solid #c00; border-width: 2px 0px; font-size: 130%}
#left-sidebar-carrier, #right-sidebar-carrier {width: 200px; margin: 0px 0px 20px 0px; background: #f0f0f0}
#left-sidebar-carrier {float: left}
#right-sidebar-carrier {float: right}
#left-sidebar, #right-sidebar {border: dotted #ccc; padding: 20px}
#left-sidebar {font-size: 130%; text-align: center; border-width: 0px 2px 2px 0px}
#right-sidebar {border-width: 0px 0px 2px 2px}
#main {margin: 0px 200px 0px; padding: 20px}
#main h2 {font-size: 180%; color: #369}
#footer {margin: 0px; padding: 20px; background: #fc0}
}

/* Правила представления информации для экранов карманных компьютеров */
@media handheld
{
html, body {margin: 0px; padding: 0px; border: 0px; width: 100%; height: 100%}
body {font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff}
#header {font-size: 16px; margin: 0px; padding: 0px 5px; color: #fff; background: #69c}
.navigation p {margin: 0px; padding: 0px 5px; text-align: center; background: #fff0cc; border: solid #c00; border-width: 1px 0px}
#left-sidebar-carrier {background: #f0f0f0; border-bottom: solid 1px #ccc}
#left-sidebar p {margin: 0px; padding: 0px 5px}
#right-sidebar-carrier {display: none}
#main h2 {font-size: 14px; color: #369; margin: 5px; padding: 0px}
#main p {margin: 5px; padding: 0px}
#footer {margin: 0px; padding: 0px 5px; background: #fc0}
}

/* Правила, определяющие внешний вид документа на листе бумаги */
@media print
{
body {font: 12pt "Times New Roman", Times, serif; color: #000}
#header, .navigation, #left-sidebar-carrier, #right-sidebar-carrier, #footer {display: none}
#main h2 {font: 16pt Arial, Helvetica, sans-serif}
#main a:link, #main a:visited {color: #000; text-decoration: underline}
}
-->
</style>
</head>

<body>
<div id="carrier">
<h1 id="header">Каждому по потребностям</h1>
<div class="navigation"><p>Здесь &bull; Будет &bull; Горизонтальное &bull; Меню &bull; Навигации</p></div>
<div id="left-sidebar-carrier">
<div id="left-sidebar"><!-- Сюда помещаются ссылки вертикально ориентированного меню навигации --></div>
</div>
<div id="right-sidebar-carrier">
<div id="right-sidebar"><!-- Этот блок отведен для рекламы и прочей сопутствующей информации --></div>
</div>
<div id="main"><!-- Здесь располагается основной текст страницы --></div>
<div class="navigation"><p>Здесь &bull; Будет &bull; Горизонтальное &bull; Меню &bull; Навигации</p></div>
<p id="footer">Это финал.</p>
</div>
</body>

</html>

HTML-разметка соответствует наиболее сложным правилам, определенным для «широкоэкранной» версии.

Страница, отображающаяся на экране настольного компьютера или ноутбука, имеет в достаточной мере сложную структуру: она включает в себя «шапку» (блок с идентификатором header), две горизонтально ориентированные навигационные панели сверху и снизу (класс navigation), два вертикально ориентированных боковых блока фиксированной ширины (идентификаторы left-sidebar-carrier и right-sidebar-carrier и все вложенные блоки), «резиновую» область основного содержания, «зажатую» между двумя sidebar’ами (идентификатор main) и, наконец, «подвал» (идентификатор footer).

Боковые области различны по высоте — всем, кто полагает, что должно быть иначе, я рекомендую вначале прочесть вот эту колонку.

Код фрагмента листа стилей, определяющий «широкоэкранную» (@media screen) версию представления данных, и, как следствие, HTML-разметка, слегка избыточны, но это объясняется стремлением обеспечить одинаковое отображение страницы во всех распространенных на текущий момент графических браузерах. Речь идет об IE5, IE6, Firefox 1, Opera 5—7. (IE5 заменяет точечные рамки вокруг sidebar’ов на сплошные, но это, полагаю, не самая страшная беда. Сам факт наличия рамок и ненулевых padding’ов благодаря применению блоков-«подложек» никак не страдает под влиянием особенностей мироощущения пятого «Эксплорера».)

Правила для других версий представления формируются, в основном, по принципу исключения ряда функциональных областей из вывода — так, например, правый sidebar, выделенный под рекламу, «отметается» в «карманном» варианте оформления содержимого (при помощи свойства display со значением none); в версии для печати мы жертвуем вообще всеми функциональными областями за исключением основного текста — и вправду, какой смысл выводить на печать, скажем, навигационные панели?..

Размер шрифта для «широкоэкранной» версии задается в процентах, чтобы текст можно было легко масштабировать даже средствами столь нелепого браузера, как IE. Для «карманной» версии кегль шрифта определяется в пикселях, а для печатной — как и положено, в пунктах. Кроме того, экранные версии используют рубленые шрифты, более удобочитаемые по сравнению с антиквой при низких разрешениях, зато печатный вариант представления контента предписывает использовать для основного текста шрифт с засечками.

Вероятно, лист стилей можно было бы слегка оптимизировать, объединив в общем для всех версий представления фрагменте одинаковые правила, наличествующие в обособленных фрагментах (как это уже сделано, например, для правил, определяющих оформление гиперссылок в блоке основного текста). Я, однако, не стал торговаться из-за сотни байт, ибо не хочу, чтобы лист стилей потерял свою наглядность.

«Широкоэкранную» версию представления контента все пользователи настольных систем или ноутбуков смогут увидеть, щелкнув по вышеприведенной ссылке; на печатный же вариант можно взглянуть, воспользовавшись диалогом предварительного просмотра в любом браузере (этой опции нет разве что в IE5).

Что касается внешнего вида «карманной» версии, то я привожу его на нижеследующей картинке (ширина коей составляет 200 пикселей).

Илл. 42.1. Такую страницу увидят на своих экранах пользователи мобильных устройств. Резерв для сужения еще весьма солиден.

Илл. 42.1

[Перейти к оглавлению]

© Артемий Ломов, 2004, 2005.