Святой Грааль (веб-дизайн)

Макет Святого Грааля с опускающимся нижним колонтитулом

Святой Грааль является страница веб - макет , который имеет несколько, равные колонки по высоте, которые определены с таблицами стилей. Это обычно желательно и реализуется, но в течение многих лет различные способы его реализации с помощью доступных технологий имели недостатки. ^[1] Из-за этого поиск оптимальной реализации был подобен поиску неуловимого Святого Грааля .

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

Более поздние веб-стандарты предоставили гораздо более полные и надежные решения для реализации этого макета. В частности, модули CSS Flexible Box Layout и CSS Grid Layout предоставили полные решения. ^{[2] [3]}

Проблема [ править ]

Многие веб-страницы требуют макета с несколькими (часто тремя) столбцами, с содержанием главной страницы в одном столбце (часто в центре) и дополнительным содержимым, таким как меню и рекламные объявления, в других столбцах (боковые панели). Для этих столбцов обычно требуется отдельный фон с границами между ними, и они должны иметь одинаковую высоту независимо от того, какой столбец имеет самое высокое содержимое. Распространенным требованием является то, что боковые панели имеют фиксированную ширину, а размер центрального столбца регулируется для заполнения окна (жидкий или жидкий макет). Другое распространенное требование заключается в том, что, когда страница не содержит достаточно контента для заполнения экрана, нижний колонтитул должен опускаться до нижней части окна браузера, а не оставлять пустое пространство под ним.

Макет CSS с плавающими столбцами и очищенным нижним колонтитулом, без функций Святого Грааля

На пути к этому было много препятствий:

• CSS , хотя и весьма полезен для стилизации, имел ограниченные возможности для макета страницы.
• Высота элементов блока (например, элементов div) обычно определяется их содержимым. Таким образом, два раздела, расположенные рядом, с разным объемом контента, будут иметь разную высоту, если их высота каким-либо образом не установлена ​​на соответствующее значение.
• HTML предназначен для семантического использования ; Следует выбирать элементы HTML, которые точно описывают их содержание. Внешний вид веб-страницы, отображаемой пользовательским агентом, должен определяться независимо правилами стиля. Многие реализации неправильно используют HTML, используя таблицы для нетабличных данных или встраивая несколько элементов div без семантической цели. Несемантическое использование HTML сбивает с толку пользователей или пользовательских агентов, которые пытаются различить структуру содержимого страницы, и является проблемой доступности . ^[4]
• Поскольку поисковые системы могут рассматривать контент в начале исходного кода веб-страницы как более релевантный , а контент читается в порядке исходного кода при просмотре некоторыми пользовательскими агентами, такими как программы чтения с экрана, веб-дизайнеры хотят иметь возможность размещать контент в исходный код страницы в произвольном порядке, не влияя на внешний вид страницы.
• Из-за неправильного отображения содержимого в разных браузерах метод, который работает в браузере, соответствующем стандартам, может не работать в браузере, который неправильно реализует CSS.

Известные обходные пути [ править ]

Таблицы [ править ]

До повсеместного внедрения CSS дизайнеры обычно использовали таблицы для размещения страниц. Иногда они добивались желаемого макета, вкладывая несколько таблиц друг в друга. Хотя размещение столбцов внутри ячеек таблицы легко обеспечивает желаемый внешний вид, использование таблицы семантически некорректно, хотя атрибут HTML WAI-ARIA «роль» может быть установлен на «представление» для восстановления семантического контекста. Также нет возможности контролировать порядок столбцов в исходном коде страницы.

Разделы с дисплеем: таблица [ править ]

Можно сделать столбцы одинаковой высоты с помощью displayсвойства CSS . ^{[5] Для} этого требуются вложенные разделы контейнера, для которых задано значение display: tableи display: table-row, и столбцы, для которых задано значение display: table-cell. Это семантически правильно, поскольку влияет только на отображение. Однако в этом методе отсутствует возможность управления порядком исходного кода. Он также не будет работать с некоторыми устаревшими, неподдерживаемыми браузерами, такими как Internet Explorer 7.

Поддельные столбцы [ править ]

В этом методе используется фоновое изображение, которое обеспечивает цвета фона и вертикальные границы всех трех столбцов. ^[6] Содержимое каждого столбца заключено в раздел и позиционируется над его фоном с использованием таких методов, как плавающие, отрицательные поля и относительное позиционирование. Фон обычно имеет высоту всего несколько пикселей и делается для покрытия страницы с помощью атрибута «repeat-y». Это отлично работает для макетов с фиксированной шириной и может быть адаптировано для страниц с переменной шириной на основе процентов, но не может использоваться для страниц с плавным центром.

JavaScript [ править ]

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

Фиксированное или абсолютное позиционирование [ править ]

В этом методе углы разделов столбцов фиксируются в определенном месте на странице. ^[7] Это может быть приемлемо или даже желательно, но не решает проблему святого Грааля, поскольку это существенно другой макет. Последствия этого метода могут включать в себя отображение содержимого под столбцами (например, нижнего колонтитула), фиксированное в нижней части экрана, пустое пространство под содержимым столбца и требование полос прокрутки для каждого столбца для просмотра всего содержимого.

Вложенные подразделения [ править ]

Раздел с фоном будет увеличиваться в высоту, чтобы вместить его содержимое. Такое поведение используется для решения проблемы путем создания трех вложенных друг в друга подразделений, которые обеспечивают три фона. Эти разделы размещаются в надлежащих местах с использованием методов позиционирования, а три раздела контента размещаются внутри самого внутреннего фонового раздела, расположенного над их соответствующим фоном. Фоновые разделы становятся такими же высокими, как самый высокий раздел контента. К недостаткам этого метода можно отнести три несемантических деления и сложность позиционирования элементов этого сложного макета. ^[8]

Цвет границы [ править ]

Более простая версия метода вложенного деления предполагает использование единого контейнерного деления. Свойства фона этого раздела обеспечивают фон центрального столбца, а левая и правая границы, ширина которых равна ширине бокового столбца, обеспечивают цвета фона боковых панелей. Содержимое каждого столбца располагается поверх его фона. Этот метод по-прежнему использует одно несемантическое разделение и затрудняет применение фоновых изображений и границ к боковым панелям. ^[9]

Нижний отступ [ править ]

При размещении большого количества отступов в нижней части контейнера столбца фон будет простираться намного ниже содержимого столбца. Соответствующее отрицательное поле вернет содержимое под столбцами в правильное положение. Позиционирование в этом методе простое, поскольку контейнер содержимого столбца также содержит его фон. Значение заполнения 32767 пикселей - это наибольшее значение, которое распознается всеми современными браузерами. Если разница в высоте столбца больше, чем это, фон более короткого столбца не будет полностью заполнять столбец. ^[10]

Текущие решения [ править ]

Стандарты CSS3 содержат модули, предназначенные для размещения элементов страницы. Два из них полностью решают проблему Святого Грааля. ^{[11] [12]} Поддержка этих модулей отсутствует или отсутствует в старых браузерах. Многие дизайнеры будут реализовывать эти модули, обеспечивая при этом совместимый стиль для старых браузеров, который в современных браузерах будет заменен новым синтаксисом. Поддержка старых браузеров стала менее важной в 2020 году, когда закончилась расширенная поддержка Windows 7 и использование Internet Explorer стало менее распространенным.

CSS Flexible Box Layout (Flexbox) [ править ]

World Wide Web Consortium (W3C) подошел к вопросу компоновки с помощью различных предложений. Наиболее продуманным предложением является модуль гибкого макета блока (AKA Flexbox), который находится в статусе кандидата в рекомендации по состоянию на ноябрь 2018 г. ^[13] Установка для свойства отображения элемента значения display: flexилиdisplay: inline-flexзаставляет элемент стать контейнером нового типа (подобным блоку или встроенному блоку, соответственно) с новыми методами позиционирования дочерних объектов. Контент может течь в любом направлении и отображаться в любом порядке. Предложение W3C содержит пример, который обеспечивает макет столбца Святого Грааля с помощью четырех простых правил CSS и делает макет адаптивным с помощью простого правила медиа-запроса. Модуль также можно использовать для решения многих других проблем с компоновкой.

Модуль Flexible Box Layout поддерживается всеми современными браузерами, хотя в реализации Internet Explorer есть проблемы. ^[14]

Макет сетки CSS [ править ]

Модуль Grid Layout Аналогичным образом позволяет дизайнеру создавать контейнер для макета, который содержит строки и столбцы фиксированного или переменного размера, в которые можно помещать элементы. По состоянию на декабрь 2020 года он находится в статусе кандидата в рекомендации ^[15]. Он поддерживается всеми современными браузерами, однако в реализации Internet Explorer есть проблемы. ^[16] Этот модуль является продолжением предыдущей работы, выполненной как модуль позиционирования сетки, модуль макета шаблона и модуль расширенного макета. ^[17]

Одним из аспектов этого модуля является возможность создания слотов сетки в контейнере в полиграфическом виде, как это было описано как « искусство ASCII », как в замененном модуле макета шаблона.

Хотя модуль Flexible Box может выполнять двухмерную разметку страницы, его предполагаемое назначение - позиционировать элементы в основном вдоль одной оси. Макет в виде сетки предпочтителен для компоновки сложных страниц и страниц, макет которых сильно различается в адаптивном дизайне. ^[18]

История [ править ]

Первый трехколоночный дизайн по бокам, в котором использовался чистый CSS, был разработан Робом Чанданаисом из BlueRobot ^[19] для сайта неправильноwaygoback.com в 2001 году. В тот момент Нил Талбот использовал JavaScript для определения положения правой колонки. Чанданаис придумал элегантное решение для позиционирования, используя вместо этого чистый CSS, и вскоре после этого Эрик Костелло из Glish.com назвал его «Святым Граалем ». ^[20]

См. Также [ править ]

• Веб-дизайн без таблиц
• Адаптивный веб-дизайн

Ссылки [ править ]