Логотип StingRay

Поделиться
FacebookFacebookRSSTwitterYouTubeВ контактеОдноклассники
FacebookFacebookRSSTwitterYouTubeВ контактеОдноклассники
Силуэт человека

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

Когда-то давно я написал статью «Таблицы против фреймов». Несмотря на то, что статья эта была писана на заказ, она была искренней и актуальной – в те времена веб-разработчики действительно выбирали в 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, не забывать обнулять или присваивать иные значения явно, помня о том, что в разных веб-обозревателях их значения по умолчанию могут быть различны).

28.02.2011 11:49:34 Beatrix (IP) Цитата #1
Насчет значений по умолчанию – обычно используют технологию CSS Reset, избавляющую от первичных проблем кроссбраузерности. Простейший пример:
*
{
margin: 0;
padding: 0;
}
28.02.2011 13:05:02 asivan (IP) Цитата #2
Зря ты так про незрелось CSS. Я бы скорее говорил о моральном устарении одного конкретного браузера (IE). Все время, когда я делал бестабличную верстку, приходилось делать всего два варианта – для IE и для нормальных браузеров, причем с нормальными браузерами решения чаще всего были простыми и очевидными.

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

Выравнивание по вертикали чаще всего нужно как раз при отображении табличного содержимого – и тут с точки зрения семантической верстки нужно использовать именно таблицы.
13.09.2011 12:41:37 SPQR (IP) Цитата #3
Вот тут выше уже сказали про семантическую вёрстку. То есть таблицы – это не средство украшения страницы, а содержание материала. Применять их для каких-то спецэффектов – всё равно, что средствами CSS вырисовывать буквы. Сейчас вообще как-то несмотря на все HTML5 наблюдается перекос от содержимого к оформлению и поведению (в чём-то аналогично графическим интерфейсам ОС), что привлекает на первый взгляд случайного пользователя, но усложняет интенсивное использование.
13.09.2011 13:44:24 Станислав (IP) Цитата #4
Не спорю. Но когда основной инструмент, предназначенный для вёрстки (CSS) не может решать элементарные и часто встречающиеся задачи (я затронул 2 из них, близкие мне), приходится решать эти задачи инструментом неосновным (HTML). :-(
30.10.2011 19:14:09 Станислав (IP) Цитата #5
Понравилась подпись в сообщении на одном из тематических форумов:
В Вилларибо и Виллабаджо опять dedline. Пока ребята из Вилларибо верстают сайт div'ами, ребята из Виллабаджо уже всё сверстали на таблицах и х…т друг друга в Quake.
Именно это я прочувствовал на себе, именно поэтому написал эту статью. :-)
31.10.2011 18:07:18 SPQR (IP) Цитата #6
Это означает, что заказчик непривиредлив, а обе деревни разработчиков разгильдяи.
Добавьте свой комментарий или войдите, чтобы подписаться/отписаться.
Имя: OpenId
Результат операции:
Предпросмотр
Загрузка…