Святий Ґрааль — це макет веб-сторінки, який має кілька стовпців однакової висоти, визначених за допомогою таблиць стилів. Це зазвичай бажано та реалізується, але протягом багатьох років різні способи, якими його можна було реалізувати за допомогою доступних технологій, мали недоліки. Через це пошук оптимальної реалізації порівнювався з пошуком невловимого Святого Ґрааля .
Обмеження CSS і HTML, бажаність семантично значущих сторінок, які добре ранжуються в пошукових системах, і недоліки різних браузерів історично поєднувалися, і створили ситуацію, в якій не було можливості створити тип макета, який вважався би повністю правильним. Оскільки основні технології не надали належного рішення, веб-дизайнери знайшли різні способи обійти обмеження. Загальні обхідні шляхи включали зміни в структурі сторінки, додавання графіки, сценаріїв і творче використання CSS. Ці методи були недосконалими, незручними і дехто вважав їх зловживанням вебстандартами.
Останні вебстандарти надали набагато більш повні та надійні рішення для реалізації цього макета. Зокрема, модулі CSS Flexible Box Layout і CSS Grid Layout надали рішення.
Проблема
Багато вебсторінок вимагають макет з кількома (часто трьома) стовпцями, з вмістом головної сторінки в одному стовпці (часто в центрі) і додатковим вмістом, таким як меню та реклама, в інших стовпцях (бокові панелі). Ці стовпці зазвичай вимагають окремого фону з межами між ними і однакової висоти, незалежно від того, який стовпець має найвищий вміст. Загальна вимога полягає в тому, щоб бокові панелі мали фіксовану ширину, а центральна колона була змінена за розміром, щоб заповнити вікно. Ще одна поширена вимога полягає в тому, що, коли сторінка містить недостатньо вмісту, щоб заповнити екран, нижній колонтитул має опуститися вниз вікна браузера, і не залишати під ним порожнє місце.
Для цього було багато перешкод:
- CSS, хоча і досить корисний для стилізації, мав обмежені можливості для макета сторінки.
- Висота блочних елементів (наприклад, елементів div) зазвичай визначається їхнім вмістом. Таким чином, два розділи, розташовані пліч-о-пліч, з різною кількістю вмісту, матимуть різну висоту, якщо для їхньої висоти не встановлено відповідне значення.
- HTML призначений для семантичного використання; Необхідно вибирати елементи HTML, які точно описують їх зміст. Зовнішній вигляд веб-сторінки у вигляді користувальницького агента має визначатися незалежно від правил стилю. Багато реалізацій неправильно використовують HTML: таблиці для нетабличних даних, або вкладання декількох елементів div без семантичної мети. Несемантичне використання HTML заплутує користувачів або агентів користувачів, які намагаються розпізнати структуру вмісту сторінки, і є проблемою доступності.
- Оскільки пошукові системи можуть вважати вміст на початку вихідного коду веб-сторінки більш релевантним, а вміст читається в порядку вихідного коду під час перегляду деякими агентами користувача, такими як програми зчитування з екрана; веб-дизайнери хочуть мати можливість розміщувати вміст у джерело сторінки в довільному порядку, без впливу на зовнішній вигляд сторінки.
- Через неправильне відтворення вмісту різними браузерами метод, який працює у браузері, що відповідає стандартам, може не працювати в тому, який не реалізує CSS належним чином.
Відомі обхідні шляхи
Таблиці
До широкого впровадження CSS дизайнери зазвичай використовували таблиці для компонування сторінок. Іноді вони досягали бажаного розташування вкладенням таблиць одна в одну. Хоча розміщення стовпців у клітинках таблиці легко досягає бажаного візуального вигляду, використання таблиці є семантично неправильним, хоча WAI-ARIA HTML атрибут «role» можна встановити на «presentation», щоб відновити семантичний контекст. Також немає можливості контролювати порядок стовпців у джерелі сторінки.
Розділи з display:table
Можна зробити стовпці однакової висоти за допомогою властивості CSS display. Для цього потрібні вкладені контейнери з властивостями display: table і display: table-row, і стовпці з властивістю display: table-cell . Це семантично правильно, оскільки це впливає лише на дисплей. Однак цей метод не має можливості контролювати порядок вихідного коду. Він також не працюватиме з деякими старішими, непідтримуваними браузерами, такими як Internet Explorer 7.
Штучні колони
Цей метод використовує фонове зображення, яке забезпечує кольори фону та вертикальні межі всіх трьох стовпців. Вміст кожного стовпця укладено в поділ і розташовується на його фоні за допомогою таких методів, як floats, негативні поля margins та відносне позиціонування. Фон зазвичай має лише кілька пікселів у висоту, і він покриває сторінку за допомогою атрибута "repeat-y". Це добре працює для макетів із фіксованою шириною та може бути адаптовано для сторінок зі змінною шириною на основі відсотка, але не може використовуватися для плавних центральних сторінок.
JavaScript
У цьому методі після завантаження сторінки сценарій вимірює висоту кожного зі стовпців і встановлює висоту кожного стовпця на найбільше значення. Це не працюватиме у браузерах, які не підтримують JavaScript або у яких вимкнено JavaScript.
Фіксоване або абсолютне позиціонування
У цьому методі кути стовпців фіксуються в певному місці на сторінці. Це може бути прийнятним або навіть бажаним, але не вирішує проблему Святого Ґрааля, оскільки це інший макет. Наслідки цього методу можуть включати наявність вмісту під стовпцями (наприклад, нижнього колонтитула), фіксованого внизу екрана, порожнього місця під вмістом стовпця та потреби смуг прокрутки для кожного стовпця для перегляду всього вмісту.
Вкладені розділи
Розділ із власним фоном буде зростати у висоту, щоб вмістити весь контент. Ця поведінка використовується для вирішення проблеми шляхом створення трьох підрозділів, вкладених один в одного, які забезпечують три фони. Ці розділи розміщуються в належному місці за допомогою методів позиціонування, а три розділи вмісту розміщуються всередині внутрішнього розділу фону, розташованого над відповідним фоном. Фонові відділи потім стають такими ж високими, як і найвищий розділ вмісту. Недоліки цього методу включають три несемантичних поділи та складність позиціонування елементів цього складного макета.
Колір кордону
Простіша версія методу вкладеного поділу передбачає використання одного контейнера. Властивості фону цього розділу забезпечують фон центрального стовпця, а ліва та права межі, які мають ширину, рівну ширині бічних стовпців, забезпечують кольори фону бічних панелей. Вміст кожного стовпця розміщується на його фоні. Цей метод все ще використовує один несемантичний розділ і ускладнює застосування фонових зображень і меж до бокових панелей.
Нижня підкладка
Якщо розмістити велику кількість відступів у нижній частині контейнера стовпців, фон буде розширюватися набагато нижче за вміст стовпця. Відповідне від’ємне поле margin поверне вміст під стовпцями на належне положення. Позиціонування в цьому методі просте, оскільки контейнер вмісту стовпця також містить його фон. Значення заповнення padding в 32767 пікселів є найбільшим, яке буде розпізнано всіма сучасними браузерами. Якщо різниця у висоті стовпців перевищує це значення, фон коротшого стовпця не заповнить стовпець повністю.
Актуальні рішення
Стандарти CSS3 містять модулі, які призначені для компонування елементів сторінки. Два з них повністю вирішують проблему Святого Ґрааля. У старіших браузерах підтримка цих модулів відсутня або недостатня. Багато дизайнерів реалізують ці модулі, забезпечивши сумісний стиль для старих браузерів, який буде замінено в сучасних браузерах новим синтаксисом. Підтримка старих браузерів стала менш важливою в 2020 році, коли розширена підтримка Windows 7 припинилася, а використання Internet Explorer стало менш поширеним.
Гнучкий макет CSS (Flexbox)
World Wide Web Consortium (W3C) підійшов до питання макета через різні пропозиції. Найзрілішою пропозицією є модуль гнучкого макета flexbox (AKA Flexbox), яка станом на листопад 2018 року перебуває в статусі кандидатської рекомендації. Встановлення властивости елемента display на display: flex або display: inline-flex призводить до того, що елемент стає контейнером нового типу (подібним до блоку або вбудованого (інлайн) блоку відповідно), з новими методами позиціонування дочірніх об’єктів. Вміст може розташуватися в будь-якому напрямку і відображатися в будь-якому порядку. Пропозиція W3C містить приклад, який досягає макета стовпця Святого Ґрааля за допомогою чотирьох правил CSS і робить макет адаптивним за допомогою правила медіа-запиту. Модуль також можна використовувати для вирішення багатьох інших проблем з макетом.
Гнучкий модуль макета flexbox підтримується в усіх сучасних браузерах, хоча реалізація Internet Explorer має проблеми.
Макет сітки CSS (Grid)
Модуль сітки так само дозволяє дизайнеру створити контейнер для макета, який містить рядки і стовпці фіксованого або змінного розміру, в яких можна розмістити елементи. Станом на грудень 2020 року він має статус кандидата на рекомендацію. Він підтримується в усіх сучасних браузерах, однак у реалізації Internet Explorer є проблеми. Цей модуль є продовженням попередньої роботи, виконаної як модуль позиціонування сітки, модуль розмітки шаблонів і модуль розширеного макета.
Одним із аспектів цього модуля є можливість створювати слоти сітки в контейнері напівграфічно, таким чином, що було описано, як «ASCII-графіка», як у заміненому модулі «Макет шаблону».
Незважаючи на те, що модуль Flexible Box може виконувати двовимірне макетування сторінки, його цільове призначення полягає в тому, щоб розташувати елементи переважно вздовж однієї осі. Макет сітки є кращим для компонування складних сторінок і сторінок, макет яких сильно відрізняється в адаптивному дизайні.
Історія
Перший фланговий дизайн із трьох стовпців, який використовував чистий CSS, був розроблений Робом Чандане з BlueRobot для сайту wrongwaygoback.com у 2001 році. У той момент Ніл Талбот використовував JavaScript для визначення розташування правого стовпця. Chandanais придумав елегантне рішення для позиціонування, використовуючи чистий CSS, і незабаром після цього Ерік Костелло з Glish.com назвав його Святим Ґраалем.