Нашел сегодня комментарий в ЖЖ hunter_handmade по поводу своей статьи о трехколоночной верстке. Опуская манеру изложения, надо сказать, что сама тема довольно интересная.

Кстати, я хотел сначала там в самом журнале ответ оставить, но авторизация по OpenID не сработала.

Имитация табличной раскладки средствами CSS действительно ущербна, фактически это один сплошной хак, начиная с самих float'ов, которые не предназначены для раскладки вообще. Но это, тем не менее, все равно делается, и тому есть причины.

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

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

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

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

Верстка должна легко допускать рендеринг по мере загрузки страницы без перераскладок.

Известная особенность многих страниц, сверстаных таблицами: пока все не загрузится, она не показывается. Или, как вариант, начинает показываться, но все прыгает из стороны в сторону по мере подгрузки новых частей. Это происходит потому, что в общем случае браузер не может посчитать позицию следующих ячеек, не зная размеры предыдущих, а то и вообще всех. А если размеры у них не заданы жестко, то приходится ждать целиком контент, чтобы их определить.

Разработчики CSS решили это устранить ценой потери определенной гибкости.

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

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

Эти два примера хорошо показывают, почему именно переучиться с таблиц на CSS так сложно: он просто сделан по другому. Представьте себе, что вы умеете ездить на танке, и вас пересадили на "Smart". Возникшая необходимость объезжать кусты может действительно казаться теперь странной, но ведь все мы согласны, что по городу лучше ездить не на танке?

В следующей статье Учебнике я планирую переверстать трехколоночную раскладку в стиле, на который CSS как раз был ориентирован. Там должно быть уже существенно меньше неочевидностей.

P.S. Да... Отдельно хочу сказать, что я не берусь утверждать "лучше" этот подход или "хуже", я просто описываю положение дел. А то будет так же, когда многие написали, что я считаю HTML "лучше" XHTML, хотя я такого и не говорил :-). Однако надо сказать, что в этом случае мне таки больше нравится, как отображаются CSS'ные сайты, а не табличные :-).

Комментарии: 25 (особо ценных: 1)

  1. Snaky

    По-поводу несработавшей авторизации по OpenID, дело в том, что нужно, чтобы в коде страницы между тегами < head > и < /head > была следующая строчка:
    < link rel="openid.server" href="http://softwaremaniacs.org/wordpress/wp-content/plugins/openid/server.php/"/ >. По каким то причинам у вас нет закрывающего тега < /head >. Скорее всего, причина в этом.

  2. Иван Сагалаев

    О! Спасибо. Не ожидал, что по такому скудному "описанию" можно так быстро баг локализовать :-)

    Тега нет из чисто эстетических соображений (а HTML допускает). Добавил, погляжу в следующий раз...

  3. Sigura

    Перечитал ещё раз статью, и подумалось вот что, может, конечно, и не в тему. Но попробую...

    У тебя замечательные статьи, которые описывают творческую работу с html+css и это здорово! Твои стать помогают изменить подход к технологии и к технике. Твоё мнение помогло избавиться от навязанной IE технологией вёрстки.

    Но твои статьи не охватывают другой стороны медали – работы.

    Поясню на конкретном примере. Сейчас я работаю в достаточно большой компании, в которой когда-то давно был сделан корпоративный сайт, за годы работы в него было напихано огромное количество статей, доблестным отделом кадров. Должность, которую я занимаю, далека от сайто строения, но как "знающему человеку" мне поручили «присматривать». Из-за любви к творчеству и людям, я решил облегчить работу несчастных работников отдела кадров. Которые должны были добавляя каждую статью заполнять ужасные таблицы с кучей параметров, для того чтоб сделать просто список с фотографиями (может кто имел дело с geeklog-1.3.4, здесь я описывал очень хитрое создание таблички с фотографиями, где параметры это colspan и rowspan, к слову сказать, глючило это всё безбожно + нет возможности изменить добавленную статью).
    Да и работники отдела кадров это какие-то особые люди, которые далеки от компьютеров чисел и математики, а так же логики, я не стану здесь размещать не малый список их перлов... (безусловно, среди них встречаются и очень талантливые и одаренные люди, на моём опыте, к сожалению очень редко). Извините, отвлёкся, ну так вот им было просто не возможно справиться с простым созданием статьи, пользуясь существовавшим интерфейсом, да впрочем и мне не просто.
    Я решил внедрить WYSIWYG на этот сайт, чтоб спасти себя от докучающего отдела кадров и освободить больше времени для творчества. После поисков, остановился на http://www.fckeditor.net/, установил, часть переписал (в версии 2.2 были сложности при создании каталогов, в названии которых были русские буквы, то же самое с картинками и прочими медиа файлами), дополнил шаблоны, убрал часть глюков. Сделал инструкцию по вводу статей (с картинками). И казалось вот оно счастье, да не тут-то было.

    Начали копировать статьи прямо из MS Word, с форматированием пробелами и прочей гадостью… которую переварить ни fckeditor ни что другое не может. Хотя, может и есть средство? Может, кто подскажет?

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

    Спасибо за внимание!

    PS: Сори, что на ты, я по старой памяти ;о)

  4. Никита

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

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

    CSS не имитирует таблицы, он придает стиль элементам (x)HTML-страниц, при этом разделяя структуру (HTML) от презентации (CSS). Таблицы же, изначально предназначены для табличных данных.

    Однопиксельные картинки в табличной вёрстке – тоже хак…

  5. Иван Сагалаев

    Тут какое-то недопонимание. Разумеется речь не идет об имитации CSS'ом табличных данных, никакого спора тут нет и в помине. Когда я писал "имитация таблиц CSS'ом", я имел в виду, что CSS позволяет сымитировать верстку, которую традиционно делали таблицами. Просто писать такого крокодила в заголовке слегка коряво :-). Но из самой статьи, вроде, все очевидно...

  6. aabp

    Начали копировать статьи прямо из MS Word, с форматированием пробелами и прочей гадостью… которую переварить ни fckeditor ни что другое не может. Хотя, может и есть средство? Может, кто подскажет?

    административные меры? =) так или иначе правила верстки в ворде надо соблюдать, имхо, так же как, наример, правила пользования туалетом. тем более, что там, вроде как, было какое-то средство по устраненю ошибочного форматирования.

  7. Sigura

    2 аabp

    В точку! Отличное сравнение с туалетом, т.к. чувствуешь себя именно уборщиком!
    То есть отследить кто нагадил легко, а говорить об этом как-то не прилично, а убирать всё равно тебе :о)

    Про административные меры... хорошая мысль (неужели ещё и доку по пользованию MS Word делать... вах)

  8. Michael de`OZ

    Известная особенность многих страниц, сверстаных таблицами: пока все не загрузится, она не показывается.
    - это бага IE - в Firefox страница отображается по мере загрузки.

    А вообще вопрос уже давно изучен, как заметил Никита. CSS и таблицы это разные сущности и использовать их нужно для разных задач.

  9. Иван Сагалаев

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

    И я все же хочу узнать у вас или у Никиты, причем тут табличные данные в статье про постепенный рендеринг? :-). Если смущает слово "таблиц" в заголовке, замените его на "колонок", суть та же.

  10. DenD

    2 Sigura & aabp
    По поводу FCKEditor и Word чуть слезу не пустил. Очень близкая мне проблема. Прям не знаю как бороться.
    Как ты пытался ограничить такого горе-редактора регуляркой. С некоторой периодичностью приходится ее дополнять. Видели бы вы ее...
    А какие интересные теги каждый раз вставляются, просто диву даюсь...

  11. Александр Вольф

    Особо ценный комментарий

    Блин, далась вам эта "табличная верстка"... Этот манер верстки пришел в веб из мира полиграфии, когда полиграфисты побыстрому переквалифицировались в вебмастера :) Ну не умеет человек, много лет проработавший в полиграфии быстро сменить свой стиль мышления и отказаться от наработанных и проверенных годами способов верстки. И понеслось... сплошные поделки газетного вида. Журнального в крайнем случае. И эта ситуация продолжалась достаточно долго для того, чтобы поменять весь вид веба и сделать такую верстку "классической с вариациями". Да и пользователи привыкли к такой подачи информации, так что... стереотипы как всегда довлеют. И у меня тоже, кстати говоря.

    CSS-верстка, это CSS-верстка, а не верстка на DIV'ах.

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

  12. Иван Сагалаев

    Александр, вот ради таких комментариев я давно уже хочу приделать какой-нибудь плагин, который будет показывать рядом с ними и на главной странице большую надпись "ВСЕМ ЧИТАТЬ" :-)

    Абсолютно согласен.

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

  13. Александр Вольф

    :) Самое печальное заключается в том, что для понимания того, что я только что сказал, мне потребовалось почти 8 лет :( Надо было меньше слушать "маститых вебмастеров", а больше времени уделять рекомендациям от W3C.

  14. Александр Вольф

    Пожалуй уточню. Фразу "что для понимания того, что я только что сказал," следует понимать как "для осознания сказанного" :) - так более правильно будет.

  15. Евгений

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

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

  16. Александр Вольф

    Насчет всех блоггеров я сомневаюсь :)

  17. Сергей Адаменко

    Конечно же хорошо, что контент отделяется от оформления, что семантически важные блоки можно поднять выше по тексту. Плюс прочие прелести дивно-стилевой вёрстки.
    Но вот с урезанным вертикальным позиционированием никак не соглашусь. Пусть уж лучше страница прыгает и перерисовывается, чем в случае чего городить таблицу как минимум из трех ячеек. Вот Опера всю свою оперную жизнь так таблицы рисует, а я только ей и пользуюсь (все остальные только для отладки кода).
    К тому же, если кто-то скрывает от старых браузеров стили правилом @import (особенно если делает это неправильно :) ) на медленных каналах сначала подгружается неформатированный хтмл и только потом прыжком перерисовывается. А это уже сторонников w3c почему-то не смущает :)
    Также неочевидно преимущество новой блочной модели css над старой квирковой. В большинстве случаев как раз удобнее отсчитывать паддинги внутрь, а проценты - от доступной ширины/высоты, к примеру - сделать поле ввода на всю доступную ширину ячейки (или ячейки в процентах с бордерами в пикселах) возможно только через "оберточный" див. И таких "мелких" неудобств теоретики от w3c наложили в спецификации дофига и более.
    В этом плане уж лучше майкрософт. Те всегда идут навстречу веб-разработчикам.
    - Хотите бегущую строку без скрипта? Пожалуйста, вот вам тег marquee.
    - Хотите, чтобы верхний margin этого дива равнялся правому margin родителя? На здоровье! Вот вам expression.
    Ближе к людям надо быть, а не к парсерам :)
    З.Ы. А тут еще дизайнер под руку: "Ну отцентруй эту надпись по горизонтали, ты же умеешь!" Как объяснить, что уже не умею? :)

  18. [...] Ущербность имитации таблиц CSS’ом [...]

  19. Kir_pich

    Кое-как всё прочёл, и заметил, что практически никто и з вас не задумался ПОЧЕМУ. Почему они перешли на такой тип вёрстки?!
    Вы думаете из за WD3, вот тут то вы сразу ошибаетесь, потомучто при програмном создание сайта удобнее использовать дивы с классами и их легче подцепить к тому или иному php(cgi и тд.) коду!!!

  20. Gromov Oleg

    А тут еще дизайнер под руку: «Ну отцентруй эту надпись по горизонтали, ты же умеешь!» Как объяснить, что уже не умею? :)

    Можно поинтересоваться, почему? %)

    Автору: большое спасибо и признание :) Всегда хотел, чтобы меня читали, но для этого нужно сначала науиться писать не хуже Вас ;) Классные статьи.

  21. Alex

    Имитация табличной раскладки средствами CSS
    действительно ущербна

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

    Мораль: не надо ругать CSS, его надо любить, холить и лелеять :)

  22. Alex

    Да и вообще, ни о какой "имитации" не может идти речи: это стандартная хтмл-ная табличная разметка - имитация, поскольку никакого реального табличного контента нет в помине! Вот где действительно-то имитация :)

    Ну а дальше - см. выше...

  23. hunter_handmade

    Идеальный язык разметки:
    - кроссплатформенный (везде выглядит ПРАВИЛЬНО)
    - код одинаково просто создается и парсится АВТОМАТИЧЕСКИ на основе дизайна, логики и структуры содержания
    - этот язык один

    ни один из существующих стандартов не удовлетворяет этим требованиям, поэтому делаем в том, в чем проще.
    на мой взгляд проблема в том, что веб - адская смесь графического дизайна и текста и мы так до сих пор и не поняли что делать: или обрабатывать дизайн как текст (языки разметки) или текст как дизайн (FLASH, SVG) или все вместе в кучу слить.
    Вот такой винигрет. Welcome to real web.

  24. Богдан Олександрук

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

    Пока использование IE 6 не дает возможность делать безглючные резиновые сайты без таблиц :-(
    По крайней мере, я не знаю, как это сделать и не встречал тех, кто знает.

  25. Qui-Gon

    Э да, ИЕ6 в данный момент моя главная преграда на пути к абсолютно дивовой верстке.
    Мы уже глумимся порой и ставим скрипты, блокирующие вход с ИЕ6 на сайт :))

Добавить комментарий