Holy Grail WEB'a

Не одно поколение web-верстальщиков искало и продолжает искать "Святую Чашу Грааля" - наиболее оптимальную структуру разметки web-страницы. В первую очередь это касается центральной части макета, представляющего собой классический трех колоночный каркас типа - Left-Content-Right.

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

В общем случае речь идет о:

<table>
  <tr>
    <td id="left">...</td>
    <td id="content">...</td>
    <td id="right">...</td>
  </tr>
</table>

Как видно из приведенного фрагмента html-кода, все достаточно просто, если бы...

В те не столь отдаленные времена этого было вполне достаточно, и не смотря на недостатки браузеров тогдашнего поколения, позволяло получать практически не имеющую изъянов разметку web-страницы.

Но все течет и меняется...

Появление мощного инструмента - "Каскадных таблиц стилей" (CSS), позволило вынести оформление в файл стилей и полностью отделить содержание от представления, выявило и многие минусы верстки скелета web-страницы на таблицах.

Недостатки табличной верстки:

1. Используя табличную верстку невозможно сверстать более или менее серьезный макет, который бы не содержал синтаксических ошибок в коде.
2. Таблицы были введены в HTML исключительно для облегчения представления табличной информации (прайс лист и т. д.), в спецификации HTML 3.2 не было каких-либо других способов позиционирования элементов на странице.
3. Читабельность кода и редизайн.
4. Размер кода. В подавляющем большинстве случаев верстка таблицами значительно увеличивает код страницы по сравнению с блочной версткой.
5. SEO. Предпочтение отдается ресурсам, у которых контент по html-коду максимально приближен к началу web-страницы.

На скриншоте, цифрами указан порядок вывода колонок в html-коде.

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

Скриншот в полной мере отражает идеальную разметку центральной части web-страницы под условным названием - Holy Grail.

Сформулирем минимальный список, на взгляд автора, необходимых требований:

1. Полная имитация табличной верстки:
   • Колонки равной высоты.
   • Все колонки с индивидуальой фоновой заливкой.
   • Все колонки имеют border индивидуального цвета.
2. Область контента по html-коду выводится раньше колонок навигации.
3. Плавающая ширина область контента с ограничением по min/max-width.
4. Возможность сто процентной высоты с включениме header и footer.
5. Максимальное соответствие стандартам.
6. Предсказуемое поведение разметки в популярных браузерах.

Достоинства и недостатки блочной верстки с использованием:

       margin-bottom:-32767px;padding-bottom:32766px;

где практически все выше перечисленные условия выполняются, подробно рассмотрены в разделе - Layout CSS.

В тоже время, есть смысл остановиться на других приемах и методах.

Этому и посвящена секция меню Holy Grail WEB'a в правой колонке навигации.