Почему я не люблю CSS-вёрстку

: Автор: Станислав Огрызков; Опубликовано: 28.02.2011

Когда-то давно я написал статью «Таблицы против фреймов». Несмотря на то, что статья эта была писана на заказ, она была искренней и актуальной – в те времена веб-разработчики действительно выбирали в HTML-вёрстке преимущественно между таблицами и фреймами. Сейчас же главную конкуренцию составляют всё те же таблицы (так называемая табличная HTML-вёрстка) и CSS-блоки (блочная/Div или CSS-вёрстка). Мне, как специализирующемуся на табличной вёрстке, долгое время было трудно поверить в заявляемое преимущество CSS (Cascaded Style Sheets – каскадные таблицы стилей) и перейти на CSS-вёрстку. Но в очередном freelance-проекте я всё же решил попробовать обойтись без таблиц. Не получилось. Так родилась эта статья.

Прижатие нижнего колонтитула к низу

В табличной вёрстке это делается до безобразия просто:

<table height="100%">
  <tr><td height="100%">Основное содержимое</td></tr>
  <tr><td>Нижний колонтитул</td></tr>
</table>

В CSS-вёрстке это делается, мягко говоря, ой как непросто, есть несколько способов разной степени изощрённости и применимости:

абсолютное позиционирование нижнего колонтитула при растягивании <Body> на высоту всего окна;
относительное позиционирование нижнего колонтитула с отрицательным отступом после фиктивного блока-обёртки (wrapper);
относительное позиционирование нижнего колонтитула с отрицательным отступом фиктивного блока-обёртки (вариант предыдущего способа);
относительное позиционирование нижнего колонтитула с указанием его высоты в процентах.

Наверняка, есть и другие способы (ну или варианты перечисленных выше способов), но как минимум эти четыре хорошо описаны в статье «Как прижать footer к низу окна browser'а». И каждый из этих способов трудно назвать простым, даже если просто сравнить объём (моего) «табличного» кода с их HTML+CSS-кодом. Более того, поверьте, как только вы захотите внести в макет, описанный в статье, какие-либо изменения, необходимые заказчику и отражающие отрисованный графический дизайн, вы сразу же столкнётесь с новыми трудностями. 🙁

Выравнивание содержимого по вертикали

В табличной вёрстке, опять же, это делается очень просто:

<table><tr><td valign="top|middle|bottom">Выравниваемое содержимое</td></tr></table>

В CSS имеется аналогичное свойство Vertical-Align:Top|Middle|Bottom|etc., одно название которого, казалось бы, говорит о том, что в CSS задача решается также легко, как и в HTML. Но не тут-то было – свойство это можно применять только для выравнивания содержимого ячеек таблиц (ага, имитация HTML-таблиц <table><tr><td>…</td></tr></table> посредством CSS-свойства display: table-cell; 😉) или строчных элементов друг относительно друга. И снова есть несколько способов обхода этого ограничения:

применение дополнительного вспомогательного (фиктивного) Div-котнейнера;
использованием JavaScript-выражений expression (IE) для хитрого вычисления высот блоков;
использование CSS-свойства Line-Height для вертикального выравнивания в блоке известной высоты;
использование абсолютного и относительного смещения содержимого в IE.

Возможно, есть и другие способы, но обзор как минимум этих четырёх сделан в статье «Вертикальное выравнивание в Div. Бонус: условные комментарии». Каждый из этих способов также трудно назвать простым, если просто сравнить объём кода. Более того, у двух из них отмечается пагубная «IE-зависимость», то есть ориентация на теряющий свои позиции веб-обозреватель Inernet Explorer.

Мудрое преодоление незрелости CSS

Даже двух перечисленных выше задач и «кривизны» их решения средствами CSS, на мой взгляд, вполне достаточно для того, чтобы вынести суровый вердикт: CSS – технология незрелая (несмотря на версию 3.0), иначе упомянутые выше (простые!) задачи решались бы ею просто, а не всякими некроссплаформенными ухищрениями. (Кто хочет меня опровергнуть – добро пожаловать сделать это в комментариях, предлагайте свои простые и кроссплатфоменные решения описанных задач; а кто хочет проявить солидарность – приводите свои примеры CSS-ухищрений, просто решаемых иными способами, например, таблицами. 😊)

Парадокс, но у CSS не отнимешь и другого «титула»: CSS – технология прогрессивная. 😊 Не буду приводить аргументы в пользу этого утверждения – как раз их в Интернете вы найдёте в избытке, особенно в любом учебнике по CSS (только не обращайте внимания на чушь про то, что CSS по сравнению с HTML без него «экономит трафик», – в наш век оптоволоконных скоростей и безлимитного Интернета это ну совсем уже не имеет никакого значения). Ну а раз это прогрессивно, то надо использовать. 😊 Вопрос лишь в том, где и как делать это правильно.

Во-первых, как и любую другую технологию, CSS нужно использовать… к месту, как бы странно это ни звучало. То есть там, где без использования CSS получается действительно «криво» и неэффективно (например, если прижать нижний колонтитул проще всего, а значит, и красивее, в табличной вёрстке, то именно в ней, а не с помощью CSS, надо решать задачу). Во-вторых, с учётом незрелости, CSS нужно использовать осторожно, особенно в кроссплатформенных веб-решениях (например, выставляя значения набивки padding и/или полей margin, не забывать обнулять или присваивать иные значения явно, помня о том, что в разных веб-обозревателях их значения по умолчанию могут быть различны).