Бредовые идеи, которые обычно быстро забываются, общества играючи превращают в жизненно важную задачу.
В. Швебель

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-коде.

the best

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

Скриншот в полной мере отражает идеальную разметку центральной части 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 в правой колонке навигации.


Оставьте комментарий к этому документу:
Правила комментирования:



cod


Все поля обязательны для заполнения!
  1. Все поля формы обязательны для заполнения.
  2. При этом Ваш e-mail не публикуется.
  3. Содержание комментариев, оставленных на опубликованные материалы, является мнением лиц, их написавших, и не обязано совпадать с мнением Администратора, никоим образом не ответственного за выводы и умозаключения, могущие возникнуть при прочтении комментариев, а также любые версии их истолкования.
  4. Не будут опубликованы комментарии:
    1. нарушающие положения законодательства РФ.
    2. содержащие оскорбления любого вида
      (личного, религиозного, национального...);
    3. включающие неуместные теме поста ссылки, в том числе спамовые;
    4. содержащие рекламу любых товаров и услуг, иных ресурсов, СМИ или событий, не относящихся к контексту обсуждения статьи.
    5. не относящиеся к теме статьи или к контексту обсуждения.
  5. Факт оформления Вами комментария является безоговорочным принятием этих условий.
Вернуться к документу.