Ущербность имитации таблиц CSS'ом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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