CSS-практикум, часть 1: назначение и возможности CSS

Любую веб-страницу можно разложить на три составляющие. Это ее непосредственное содержание, структура и представление.

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

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

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

Представление — это, главным образом, внешний вид тех или иных структурных единиц документа. Например, когда речь заходит о том, что шрифт заголовков должен быть более крупным, чем у основного текста страницы, да еще вдобавок и полужирным, мы говорим именно об особенностях представления документа. Один и тот же документ может иметь множество представлений: например, его внешний вид может различаться в зависимости от того, где документ отображается: на экране настольного компьютера или ноутбука, на экране карманного компьютера или же на листе бумаги при печати. Помимо визуальных представлений, определяющих внешний вид, у документа могут быть и другие виды представлений, например, аудиальные, то есть звуковые. (Все большее распространение получают речевые браузеры и программы синтеза речи, которые способны в буквальном смысле читать текст веб-страниц вслух. Такие средства созданы прежде всего для незрячих и слабовидящих людей, но нередко применяют их и вполне здоровые пользователи, устающие от длительного чтения с экрана.)

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

Мы уже говорили о том, что спецификации HTML 4.01 Strict и XHTML 1.0 Strict, а тем более XHTML 1.1, объявляют «вне закона» (не рекомендованными к использованию, deprecated) многие теги и атрибуты визуального форматирования, унаследованные от более ранних версий языка HTML. Примерами могут служить теги, аналогичные <font> и <center>, а также атрибуты вроде align, valign, color, bgcolor, size, width, height, border, cellspacing, cellpadding и т. д.

Актуальная на сегодняшний день версия CSS, CSS level 2 (или, сокращенно, CSS2), позволяет полностью отказаться от нежелательных тегов и атрибутов HTML, отвечающих за визуальное представление данных.

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

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

Скептики могут возразить, что, мол, все это не так уж и важно. Ибо принцип разделения содержания и представления на любом сколько-нибудь серьезном сайте в любом случае реализуется на уровне «движка» сайта (CMS, Content Management System): как правило, типовые шаблоны страниц хранятся в базе данных в единственном экземпляре, а тексты страниц хранятся там же без какого бы то ни было форматирования и отдельно от шаблонов. Так что шаблон можно в любой момент модифицировать, что приведет к изменению внешнего облика страниц сайта, использующих данный конкретный шаблон, но никак не скажется на их содержании.
Тем не менее, отказываясь от визуальных средств HTML в пользу CSS, мы не меняем «шило на мыло», а приобретаем массу дополнительных преимуществ.

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

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

В-третьих, CSS2 позволяет управлять представлением данных, учитывая специфику среды или устройства вывода информации, включая, например, программы синтеза речи, дисплеи Брайля и т. д. Если принимать во внимание только визуальные устройства и среды, то они тоже бывают разными. И CSS умеет работать с ними в режиме, совершенно прозрачном для пользователя. При условии, например, что разработчиком предусмотрены индивидуальные листы стилей (или правила в общем листе стилей) для представления содержимого страниц сайта не только на экране настольного компьютера или ноутбука, но и на экране карманного компьютера, а также на листе бумаги при печати, пользователю нет никакой нужды искать на странице кнопки или ссылки а-ля «Версия для КПК» или «Версия для печати». Ни о чем не задумываясь, пользователь может смело зайти на страницу с тем же самым URL с «наладонника», увидев ее в специально адаптированном оформлении. Точно так же пользователь может стандартными средствами браузера отправить необходимую страницу на печать и получить ее «твердую копию» без лишнего оформления, к примеру, без неактуальных в данном контексте навигационной панели и формы подписки на новости.

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

В-пятых, как это ни парадоксально, прогрессивные технологии предпочтительнее для устаревших браузеров. Ибо принцип разделения содержания и представления гарантирует текстуальную доступность контента везде и всюду. Судите сами — если вдруг агент пользователя по каким-то причинам не поддерживает CSS (или посетитель сайта самостоятельно запретил CSS в своем браузере), невелика беда. HTML-код страницы будет в любом случае обработан, а он, напомню, содержит только структурированную полезную информацию. Графический браузер отобразит такую страницу с оформлением, принятым по умолчанию. То есть так, как в эпоху HTML 2.0. При этом пользователь, разумеется, без труда сможет ознакомиться со всем содержанием сайта. Отдохнув попутно в атмосфере благородного минимализма. Что касается страниц, «напичканных» визуальными тегами и атрибутами HTML, зачастую не представленными ни в одном официальном DTD, то относительно доступности содержания таких документов где бы то ни было помимо браузеров, в которых отображение сайта явно проверялось, невозможно дать никаких гарантий.

Следует понимать, что призыв использовать CSS по максимуму вовсе не тождественен призыву отказаться от табличной верстки шаблонов страниц — на данном этапе развития технологий последнее возможно далеко не во всех случаях. Нет, однако, никаких сомнений в том, что управление визуальным представлением таблиц можно и нужно полностью возложить на CSS.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Крупнейшие города России</title>
</head>

<body text="#000000" bgcolor="#ffffff">
<table width="600" bgcolor="#cc0000" cellspacing="0" cellpadding="0"
border="0">
<tr>
<td><table width="100%" cellspacing="1" cellpadding="3" border="0">
<tr bgcolor="#ffcc00">
<th>Город</th>
<th>Население, тыс. чел.</th>
</tr>
<tr bgcolor="#fff0cc">
<td>Москва</td>
<td>10 383</td>
</tr>
<tr bgcolor="#fff0cc">
<td>Санкт-Петербург</td>
<td>4 661</td>
</tr>
<tr bgcolor="#fff0cc">
<td>Новосибирск</td>
<td>1 426</td>
</tr>
</table></td>
</tr>
</table>
</body>

</html>

Как видите, здесь в изобилии используются визуальные атрибуты HTML и нет ни одной строчки CSS-кода. А вот другая страница.

Код HTML-разметки:

<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<table>
<tr>
<th>Город</th>
<th>Население, тыс. чел.</th>
</tr>
<tr>
<td>Москва</td>
<td>10 383</td>
</tr>
<tr>
<td>Санкт-Петербург</td>
<td>4 661</td>
</tr>
<tr>
<td>Новосибирск</td>
<td>1 426</td>
</tr>
</table>
</body>

</html>

Код внешнего листа стилей для этой страницы:

body {
color: #000;
background: #fff;
}
table {
width: 600px;
border-collapse: collapse;
}
th, td {
border: solid 1px #c00;
padding: 3px;
}
th {
background: #fc0;
}
td {
background: #fff0cc;
}

Код первого документа занимает 899 байт.

Код второго документа вместе с внешним листом стилей — 895 байт. Если не учитывать лист стилей (который, как я уже объяснял, кэшируется и не требует загрузки при каждом следующем обращении к связанным с ним документам), то HTML-разметка второго примера занимает всего 670 байт. Обратите внимание, что в состав этих 670 байт входит элемент <link> и атрибуты xmlns, lang и xml:lang, которых нет в коде первого примера. Если бы мы использовали тип документа HTML 4.01 Strict вместо XHTML 1.0 Strict, объем кода разметки второго примера удалось бы сократить еще на несколько десятков байт.

Но уменьшившийся объем кода — не единственное преимущество. В первом примере для того, чтобы сымитировать плоскую рамку толщиной в один пиксель, мы вынуждены были использовать вложенные таблицы. Рамка формируется благодаря «подложке» — таблице, состоящей ровно из одной ячейки, залитой нужным цветом, в которую вложена таблица с данными. «Подложка» просвечивает через щели между ячейками вложенной таблицы, «прорезанные» при помощи атрибута cellspacing со значением 1 (единица измерения — пиксель). Таким образом, при использовании похожей рамки ячейки таблицы никоим образом нельзя сделать прозрачными.

Еще один момент — для того, чтобы изменить фон таблицы в первом примере, разработчику нужно будет модифицировать значения атрибутов bgcolor у каждого тега <tr>. О том, чтобы «одним махом» изменить оформление одинаковых таблиц на нескольких страницах, в данном случае не может идти и речи. В примере же, использующем CSS, эта операция реализуется моментально.

Артемий Ломов