Логотип 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, не забывать обнулять или присваивать иные значения явно, помня о том, что в разных веб-обозревателях их значения по умолчанию могут быть различны).

Добавьте свой комментарий, почитайте уже добавленные комментарии или войдите, чтобы подписаться/отписаться.
Имя: OpenId
Результат операции:
Предпросмотр Улыбка Подмигивание Дразнит Оскал Смех Огорчение Сильное огорчение Шок Сумасшествие Равнодушие Молчание Крутизна Злость Бешенство Смущение Сожаление Влюблённость Ангел Вопрос Восклицание Жирный Курсив Подчёркивание Зачёркивание Размер шрифта Гиперссылка Цитата
Загрузка…