Логотип 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
Результат операции:
Предпросмотр Улыбка Подмигивание Дразнит Оскал Смех Огорчение Сильное огорчение Шок Сумасшествие Равнодушие Молчание Крутизна Злость Бешенство Смущение Сожаление Влюблённость Ангел Вопрос Восклицание Жирный Курсив Подчёркивание Зачёркивание Размер шрифта Гиперссылка Цитата
Загрузка…