“Компот” и “мухи” веб-разработки

Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Руководствуются, как часто бывает, тем, что это модно. А многие, в общем-то, и не спешат уходить от таблиц, не считая, что в них есть что-то плохое. Я собираюсь написать длинный цикл статей о веб-разработке новыми методами. Главная моя цель - структурировать на русском языке те знания, которых полно в разрозненном виде по всей сети.

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

Для начала я хочу определиться с понятием “табличная верстка”. Если вы начинали заниматься веб-разработкой в 90-е годы, то знаете, что верстать страницу можно было двумя способами: потоком или таблицами. Первый способ - это попросту отсутствие всякой верстки, когда один за другим сверху вниз идут заголовки и абзацы. А таблицы - это когда вся страница представляется в виде сетки, в которую в нужные места уже вставляются текст, картинки и другие таблицы. Причем, сама по себе структура этих

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

Негибкий дизайн в разработке

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

Индексация поисковиками

Если содержимое страницы представляет собой кашу из содержательной части и оформления, то разобраться, что есть что, автоматически очень сложно (читай: невозможно). Поэтому такие сайты хуже индексируются поисковыми роботами.

Совместимость с устройствами

Любой сайт, сверстанный таблицами, предназначен для просмотра на большом графическом экране с помощью распространенных браузеров. Как насчет всего остального?

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

Многие мне возражают, что, мол, кому вообще нужны эти 0,000…% пользователей, пользующиеся этой экзотикой? Я думаю, это во многом путание причины и следствия: потому и 0,000…%, что нет сайтов, которыми можно нормально пользоваться ненастольными средствами. Думаю, если эта ситуация будет меняться так, как сейчас меняется, мы уже скоро застанем время, когда веб на PDA будет казаться обычным делом.

Ну вот. Кажется, достаточно :-).

Что взамен

Взамен W3C - организация, занимающаяся стандартами для веба - предлагает нам две спецификации: HTML 4 и CSS 2. Я ни в коем случае не предлагаю вам их читать сейчас. Не вздумайте. Это точные детализированные справочники, и чтение их в качестве художественного произведения ничего, кроме головной боли и разочарования в жизненных идеалах, не принесет. Тем более, самой сути, зачем они обе существуют, там, в общем-то, и не объяснено.

Я и ссылки-то поставил всего-навсего потому, что должны же быть ссылки на спецификации в статье про HTML и CSS!

А суть состоит в том, что нам предлагается разделить “компот” и “мух” - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки.

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

HTML 4 не является языком оформления веб-страниц.

Он является языком логической разметки страниц. Раньше, создавая HTML-документ, вы думали о том, что этот заголовок будет сделан жирной верданой золотистого цвета и отцентрован посредине большой темно-зеленой ячейки. Теперь все это предлагается выкинуть, и написать просто:

Заголовок страницы

. Выкидывается все, связанное с форматированием: шрифты, бордюры таблиц, цвет ссылок, отступы у , фоны ячеек таблиц, центрирование…

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

<br />
<div id=header>
<h1>Компания</h1>
<p><small>Кульный девиз</small>
</div>
<p>

<br />
<div id=main>
<p>Компания была основана...
</p>
</div>
<p>

<br />
<div id=sidebar>
<ul>
<li><a href="">Продукты</a></li>
<li><a href="">Клиенты</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>
<p>

Фактически, то, что вы делаете теперь в HTML - это некая карта страницы, не более того. Структура. Даже вот тот в заголовке означает не ““, а “второстепенная по значению фраза внутри шапки, подзаголовок”.

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

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

Что в этом хорошего

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

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

Общий стиль для всего сайта

CSS спроектирован так, чтобы дизайн и стиль всего сайта хранился в одном месте (можно даже буквально в одном файле, хотя для больших проектов это не очень удобно). А это означает, что во время разработки этого самого сайта, и во время различных “редизайнов” и “рестайлингов” вам вообще не нужно, как раньше, менять все HTML’ные файлы или шаблоны, достаточно сделать изменения только в CSS.

Маленький размер страниц

Несмотря на то, что все равно в файлах суммарно остается и содержимое, и оформление, сам синтаксис CSS ведет к меньшему размеру файлов. Например, если вы (или ваш Dreamweaver) для каждой ссылки в коде раньше писали:

<font face="Verdana, Arial, Sans-Serif" color="#880000" size="2"><br />
         <b><a href=""></a></b></font>

то теперь вы напишите в HTML:

<a href=""></a>

и в CSS:

a {Font:Bold 10pt Verdana, Arial; Color:#880000;}

и будете экономить байты на каждой ссылке. Потому что правило в CSS достаточно написать только один раз.

Даг Бауман как-то провел эксперимент, перевел заглавную страницу сайта Microsoft на CSS, получил уменьшение объема с 40КБ до 15КБ.

Кеширование оформления

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

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

Свободное расположение содержимого в файле

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

Удобное структурирование дизайна

Оформительскую информацию в CSS-файлах можно группировать и структурировать, как душе угодно. Например, можно из всего оформления выдрать только цвета и вынести их в отдельный файл, сделать таких файлов несколько вариантов и легко менять цветовую гамму в зависимости, скажем, от текущей погоды. Опять таки, независимо от остальной верстки, шрифтов и размеров…

Легче скриптовать

HTML c чистыми данными гораздо проще скриптовать: не надо вычленять данные из оформительского мусора и менять скрипт каждый раз, когда вам захочется поменять жирность шрифта у какой-то ключевой ячейки с данными.

Легче думать

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

Разные представления

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

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

Добро пожаловать в реальность

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

Первое, что сильно портит малину - это реализация всех этих стандартов в выпускающихся браузерах. Подумайте, спецификация CSS 2 была написана в 1998 году, а реальные крупные сайты, построенные с его использованием, стали появлятся что-то где-то в 2002-2003 годах. Это от того, что примерно только в это время браузеры с новыми движками, вокруг которых крутились прогрессивно мыслящие разработчики, начали переходить из стадии “оно компилируется!” в стадию “можно показывать людям”. Однако и сейчас, что в Gecko-браузерах (Firefox и другие), что в Opera, что в Safari и Konqueror, полно ошибок в реализации CSS. Не говоря уж об IE, ошибки которого никто не правил уже 4 года. А это значит, что вам, как веб-разработчику, который желает всем этим заниматься, придется привыкать не только к новой парадигме (!), что само по себе трудно, но и учить новые отвратительные хаки, как заставить тот или иной (точнее, по большей части - только тот) браузер работать вменяемо.

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

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

<br />
<table width="100%" background="/i/bg_top.jpg" style="background-repeat: no-repeat;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75%" valign="bottom">
<img src="/i/_.gif" width="1" height="40" border="0" alt=""/></p>
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="/i/_.gif" width="25" height="1" border="0" alt=""/>
</td>
<td><a href="/"><img src="/i/logo.gif" width="213" height="90" border="0" alt=""/></a>
</td>
<td><img src="/i/slogan.gif" width="124" height="90" border="0" alt=""/>
</td>
</tr>
</table>
</td>
<td bgcolor="#ffffff" background=" "><img src="/i/_.gif" width="1" height="1" border="0" alt=""/>
</td>
<td width="25%" bgcolor="#0C2E82" background=" ">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr valign="top">
<td align="center">
<table width="90%" cellpadding="0" cellspacing="1" border="0">
<tr valign="top">
<td colspan="3"><span class="white small"><b>Персональный кабинет</b></span></td>
</tr>
<tr valign="top">
<td><span class="white small">логин</span></td>
<td><span class="white small">пароль</span></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>

Web Css Дизайнер (designer)