Святой Грааль (веб-дизайн)
| Каскадные таблицы стилей |
|---|
| Концепции |
| Философия |
| Инструменты |
| Сравнения |
Святой Грааль — это макет веб-страницы , который имеет несколько столбцов одинаковой высоты, определенных с помощью таблиц стилей. Это обычно желательно и реализуется, но на протяжении многих лет все способы его реализации с использованием доступных технологий имели недостатки. [1] Из-за этого поиск оптимальной реализации можно было сравнить с поиском неуловимого Святого Грааля .
Ограничения CSS и HTML, желательность семантически значимых страниц, которые хорошо ранжируются в поисковых системах, а также недостатки различных браузеров исторически сложились так, что создали ситуацию, в которой не было возможности создать такой тип макета, который считался бы абсолютно правильным. . Поскольку базовые технологии не обеспечивали правильного решения, веб-дизайнеры нашли различные способы обойти ограничения. Обычные обходные пути включали изменения в структуре страницы, добавление графики, сценариев и творческое использование CSS. Эти методы были несовершенными, неудобными и считались некоторыми злоупотреблением веб-стандартами и их целями.
Более поздние веб-стандарты предоставили гораздо более полные и надежные решения для реализации этого макета. В частности, модули CSS Flexible Box Layout и CSS Grid Layout предоставляют полные решения. [2] [3]
Проблема
[ редактировать ]Многие веб-страницы требуют макета с несколькими (часто тремя) столбцами, при этом основной контент страницы находится в одном столбце (часто в центре), а дополнительный контент, такой как меню и рекламные объявления, — в других столбцах (боковых панелях). Для этих столбцов обычно требуется отдельный фон с границами между ними, и они должны иметь одинаковую высоту независимо от того, какой столбец имеет самое высокое содержимое. Распространенным требованием является то, чтобы боковые панели имели фиксированную ширину, а размер центрального столбца изменялся в соответствии с размером окна (жидкий или гибкий макет). Еще одним распространенным требованием является то, что, когда страница не содержит достаточного количества контента для заполнения экрана, нижний колонтитул должен опускаться до нижней части окна браузера, а не оставлять под ним пустое пространство.
На пути к этому было много препятствий:
- CSS , хотя и был весьма полезен для стилизации, имел ограниченные возможности для макетирования страниц.
- Высота блочных элементов (таких как элементы div) обычно определяется их содержимым. Таким образом, два раздела, расположенные рядом, с разным объемом контента, будут иметь разную высоту, если их высота каким-либо образом не установлена на подходящее значение.
- HTML предназначен для семантического использования ; Следует выбирать элементы HTML, которые точно описывают их содержимое. Внешний вид веб-страницы, отображаемой пользовательским агентом, должен определяться независимо правилами стиля. Многие реализации неправильно используют HTML, используя таблицы для нетабличного содержимого или встраивая несколько элементов div без семантической цели. Несемантическое использование HTML сбивает с толку пользователей или пользовательских агентов, которые пытаются различить структуру содержимого страницы, и является проблемой доступности . [4]
- Поскольку поисковые системы могут считать контент в начале исходного кода веб-страницы более релевантным , а контент читается в порядке исходного кода при просмотре некоторыми пользовательскими агентами, такими как программы чтения с экрана, веб-дизайнерам нужна возможность размещать контент в начале исходного кода веб-страницы. исходник страницы в произвольном порядке, не влияя на внешний вид страницы.
- Из-за некорректного рендеринга контента в разных браузерах метод, работающий в браузере, совместимом со стандартами, может не работать в браузере, который неправильно реализует CSS.
Известные обходные пути
[ редактировать ]Таблицы
[ редактировать ]До широкого внедрения CSS дизайнеры обычно использовали таблицы для компоновки страниц. Иногда желаемого расположения добивались, вложив несколько таблиц друг в друга. Хотя размещение столбцов внутри ячеек таблицы легко обеспечивает желаемый внешний вид, использование таблицы является семантически некорректным, хотя «роль» WAI-ARIA HTML-атрибуту можно установить значение «презентация», чтобы восстановить семантический контекст. Также нет возможности контролировать порядок столбцов в исходном коде страницы.
Подразделения с дисплеем:таблица
[ редактировать ]С помощью CSS можно сделать столбцы одинаковой высоты. display свойство. [5] Для этого требуются вложенные подразделения контейнеров, для которых установлено значение display: table и display: table-rowи столбцы, которым присвоено значение display: table-cell. Это семантически правильно, поскольку затрагивается только отображение. Однако этому методу не хватает возможности контролировать порядок исходного кода. Он также не будет работать с некоторыми старыми неподдерживаемыми браузерами, такими как Internet Explorer 7.
Искусственные колонны
[ редактировать ]Этот метод использует фоновое изображение, которое обеспечивает цвета фона и вертикальные границы всех трех столбцов. [6] Содержимое каждого столбца заключено в разделитель и позиционировано над фоном с использованием таких методов, как плавающие элементы, отрицательные поля и относительное позиционирование. Фон обычно имеет высоту всего несколько пикселей и закрывает страницу с помощью атрибута «repeat-y». Это отлично работает для макетов с фиксированной шириной и может быть адаптировано для страниц с переменной шириной в процентах, но не может использоваться для страниц с плавным центром.
JavaScript
[ редактировать ]В этом методе после загрузки страницы скрипт измеряет высоту каждого столбца и устанавливает для каждого столбца большее значение. Это не будет работать в браузерах, которые не поддерживают JavaScript или у которых отключен JavaScript.
Фиксированное или абсолютное позиционирование
[ редактировать ]В этом методе углы разделения столбцов фиксируются в определенном месте страницы. [7] Это может быть приемлемо или даже желательно, но не решает проблему Святого Грааля, поскольку это существенно другая компоновка. Последствия этого метода могут включать в себя отображение содержимого под столбцами (например, нижний колонтитул), фиксированное в нижней части экрана, пустое пространство под содержимым столбца и требование использования полос прокрутки для каждого столбца для просмотра всего содержимого.
Вложенные подразделения
[ редактировать ]Разделение с фоном будет увеличиваться в высоту, чтобы вместить его содержимое. Такое поведение используется для решения проблемы путем создания трех вложенных друг в друга подразделений, которые обеспечивают три фона. Эти разделы размещаются на своих местах с использованием методов позиционирования, а три раздела контента размещаются внутри самого внутреннего фонового раздела, расположенного поверх соответствующего фона. Затем фоновые разделы становятся такими же высокими, как самый высокий раздел контента. К недостаткам этого метода можно отнести три несемантических деления и сложность позиционирования элементов такого сложного макета. [8]
Цвет границы
[ редактировать ]Более простая версия метода вложенного деления предполагает использование одного контейнерного деления. Свойства фона этого раздела обеспечивают фон центрального столбца, а левая и правая границы, ширина которых равна ширине боковых столбцов, обеспечивают цвета фона боковых панелей. Содержимое каждого столбца располагается над его фоном. Этот метод по-прежнему использует одно несемантическое деление и затрудняет применение фоновых изображений и границ к боковым панелям. [9]
Нижняя прокладка
[ редактировать ]Если разместить большое количество полей внизу контейнера столбца, фон будет простираться намного ниже содержимого столбца. Соответствующее отрицательное поле вернет содержимое под столбцами в правильное положение. В этом методе позиционирование простое, поскольку контейнер содержимого столбца также содержит его фон. Значение заполнения 32767 пикселей — самое большое, которое распознается всеми современными браузерами. Если разница в высоте столбцов больше этого значения, фон более короткого столбца не будет полностью заполнять столбец. [10]
Текущие решения
[ редактировать ]Стандарты CSS3 содержат модули, которые могут правильно размещать элементы страницы. Два из них полностью решают проблему Святого Грааля. [1] [11] Поддержка этих модулей отсутствует или недостаточна в старых браузерах. Многие дизайнеры реализуют эти модули, обеспечивая при этом совместимый стиль для старых браузеров, который в современных браузерах будет переопределен новым синтаксисом. Поддержка старых браузеров стала менее важной в 2020 году, когда закончилась расширенная поддержка Windows 7 и использование Internet Explorer стало менее распространенным.
CSS-макет гибкого блока (Flexbox)
[ редактировать ]Консорциум Всемирной паутины (W3C) подошел к проблеме компоновки с помощью различных предложений. Наиболее зрелым предложением является модуль гибкой компоновки блоков (также известный как Flexbox), который по состоянию на ноябрь 2018 года находится в статусе кандидата на рекомендацию. [12] Установка свойства отображения элемента на display: flex или display: inline-flex приводит к тому, что элемент становится контейнером нового типа (похожим на блок или встроенный блок соответственно) с новыми методами позиционирования дочерних объектов. Предложение W3C содержит пример, который обеспечивает макет столбца Святого Грааля с использованием четырех простых правил CSS и делает макет отзывчивым с помощью простого правила медиа-запроса. Модуль также можно использовать для решения многих других проблем с макетом.
Модуль Flexible Box Layout поддерживается во всех современных браузерах, хотя реализация Internet Explorer имеет проблемы. [13]
CSS-сетка
[ редактировать ]Модуль Grid Layout аналогичным образом позволяет дизайнеру создать контейнер для макета, который содержит строки и столбцы фиксированного или переменного размера, в которые можно помещать элементы. По состоянию на декабрь 2020 года он находится в статусе кандидата на рекомендацию. [14] Он поддерживается во всех современных браузерах, однако реализация Internet Explorer имеет проблемы. [15] Этот модуль является продолжением предыдущей работы, проделанной под названием «Модуль позиционирования в сетке», «Модуль макета шаблона» и «Расширенный модуль макета». [16]
Одним из аспектов этого модуля является возможность создавать ячейки сетки в контейнере полуграфическим способом, который был описан как « искусство ASCII », как в замененном модуле «Макет шаблона».
Хотя модуль Flexible Box способен выполнять двухмерный макет страницы, его предназначение — позиционировать элементы преимущественно вдоль одной оси. Макет сетки предпочтителен для компоновки сложных страниц и страниц, макет которых сильно различается в адаптивном дизайне. [17]
История
[ редактировать ]![[икона]](http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Wiki_letter_w_cropped.svg/20px-Wiki_letter_w_cropped.svg.png){kind=small} | Этот раздел нуждается в расширении . Вы можете помочь, добавив к нему . ( сентябрь 2015 г. ) |
Первый фланкирующий дизайн с тремя колонками, в котором использовался чистый CSS, был разработан Робом Чанданаисом из BlueRobot. [18] для сайта errorwaygoback.com в 2001 году. В тот момент Нил Тэлбот использовал JavaScript для определения положения правого столбца. Шанданаис придумал элегантное решение для позиционирования, используя вместо этого чистый CSS, и вскоре после этого назвал его «Святым Граалем» . Эрик Костелло из Glish.com [19]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Перейти обратно: а б .appendTo: Решение макета Святого Грааля
- ^ «Макет Святого Грааля — решено Flexbox — более чистый CSS без взлома» . philipwalton.github.io . Проверено 26 марта 2019 г.
- ^ «Макет Святого Грааля с 5 строками CSS» . CSS-трюки . Проверено 26 марта 2019 г.
- ^ «Стандарт HTML» . html.spec.whatwg.org .
- ^ Постройте Интернет: четыре метода создания столбцов одинаковой высоты
- ^ Седерхольм, Дэн (9 января 2004 г.). «Фальшивые колонны» . Список врозь .
- ^ «HOWTO по бестабличной компоновке» . www.w3.org .
- ^ «Столбцы одинаковой высоты (методы CSS Grid, Flexbox и Table)» . Мэтью Джеймс Тейлор .
- ^ Пирс, Алан (6 августа 2008 г.). «Многоколоночные макеты выходят из коробки» . Список врозь .
- ^ «Столбцы одинаковой высоты в CSS: практическое руководство с примерами кода» . www.positioniseeverything.net . 15 декабря 2021 г.
- ^ «Макет Святого Грааля — решено Flexbox — более чистый CSS без взлома» . philipwalton.github.io .
- ^ «Модуль гибкого макета CSS, уровень 1» . www.w3.org .
- ^ «Могу ли я использовать... Таблицы поддержки HTML5, CSS3 и т. д.» . CanIUse.com . Проверено 27 февраля 2016 г.
- ^ «Модуль макета сетки CSS, уровень 1» . www.w3.org .
- ^ «Макет CSS Grid (уровень 1) | Могу ли я использовать... Таблицы поддержки HTML5, CSS3 и т. д.» . caniuse.com .
- ^ Бос, Берт; Асебаль, Сезар (26 марта 2015 г.). «Модуль макета шаблона CSS» . www.w3.org .
- ^ «Почему флексбоксы не подходят для макета страницы — завершение табуляции» . www.xanthir.com .
- ^ «Синий робот | Обмен сообщениями, чат-боты и социальный опыт» . www.bluerobot.com . Архивировано из оригинала 25 апреля 2013 года.
- ^ «Техника верстки Glish.com – 3 колонки, Святой Грааль» . Архивировано из оригинала 1 декабря 2008 г. Проверено 15 мая 2013 г.