Вікіпедія

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

трюк із CSS для поділу вебсторінки на три колонки

Святий Ґрааль — це макет веб-сторінки, який має кілька стовпців однакової висоти, визначених за допомогою таблиць стилів. Це зазвичай бажано та реалізується, але протягом багатьох років різні способи, якими його можна було реалізувати за допомогою доступних технологій, мали недоліки.[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 атрибут «role» можна встановити на «presentation», щоб відновити семантичний контекст. Також немає можливості контролювати порядок стовпців у джерелі сторінки.

Розділи з display:table ред.

Можна зробити стовпці однакової висоти за допомогою властивості CSS display.[5] Для цього потрібні вкладені контейнери з властивостями display: table і display: table-row, і стовпці з властивістю display: table-cell . Це семантично правильно, оскільки це впливає лише на дисплей. Однак цей метод не має можливості контролювати порядок вихідного коду. Він також не працюватиме з деякими старішими, непідтримуваними браузерами, такими як Internet Explorer 7.

Штучні колони ред.

Цей метод використовує фонове зображення, яке забезпечує кольори фону та вертикальні межі всіх трьох стовпців.[6] Вміст кожного стовпця укладено в поділ і розташовується на його фоні за допомогою таких методів, як floats, негативні поля margins та відносне позиціонування. Фон зазвичай має лише кілька пікселів у висоту, і він покриває сторінку за допомогою атрибута "repeat-y". Це добре працює для макетів із фіксованою шириною та може бути адаптовано для сторінок зі змінною шириною на основі відсотка, але не може використовуватися для плавних центральних сторінок.

JavaScript ред.

У цьому методі після завантаження сторінки сценарій вимірює висоту кожного зі стовпців і встановлює висоту кожного стовпця на найбільше значення. Це не працюватиме у браузерах, які не підтримують JavaScript або у яких вимкнено JavaScript.

Фіксоване або абсолютне позиціонування ред.

У цьому методі кути стовпців фіксуються в певному місці на сторінці.[7] Це може бути прийнятним або навіть бажаним, але не вирішує проблему Святого Ґрааля, оскільки це інший макет. Наслідки цього методу можуть включати наявність вмісту під стовпцями (наприклад, нижнього колонтитула), фіксованого внизу екрана, порожнього місця під вмістом стовпця та потреби смуг прокрутки для кожного стовпця для перегляду всього вмісту.

Вкладені розділи ред.

Розділ із власним фоном буде зростати у висоту, щоб вмістити весь контент. Ця поведінка використовується для вирішення проблеми шляхом створення трьох підрозділів, вкладених один в одного, які забезпечують три фони. Ці розділи розміщуються в належному місці за допомогою методів позиціонування, а три розділи вмісту розміщуються всередині внутрішнього розділу фону, розташованого над відповідним фоном. Фонові відділи потім стають такими ж високими, як і найвищий розділ вмісту. Недоліки цього методу включають три несемантичних поділи та складність позиціонування елементів цього складного макета.[8]

Колір кордону ред.

Простіша версія методу вкладеного поділу передбачає використання одного контейнера. Властивості фону цього розділу забезпечують фон центрального стовпця, а ліва та права межі, які мають ширину, рівну ширині бічних стовпців, забезпечують кольори фону бічних панелей. Вміст кожного стовпця розміщується на його фоні. Цей метод все ще використовує один несемантичний розділ і ускладнює застосування фонових зображень і меж до бокових панелей.[9]

Нижня підкладка ред.

Якщо розмістити велику кількість відступів у нижній частині контейнера стовпців, фон буде розширюватися набагато нижче за вміст стовпця. Відповідне від’ємне поле margin поверне вміст під стовпцями на належне положення. Позиціонування в цьому методі просте, оскільки контейнер вмісту стовпця також містить його фон. Значення заповнення padding в 32767 пікселів є найбільшим, яке буде розпізнано всіма сучасними браузерами. Якщо різниця у висоті стовпців перевищує це значення, фон коротшого стовпця не заповнить стовпець повністю.[10]

Актуальні рішення ред.

Стандарти CSS3 містять модулі, які призначені для компонування елементів сторінки. Два з них повністю вирішують проблему Святого Ґрааля.[1][11] У старіших браузерах підтримка цих модулів відсутня або недостатня. Багато дизайнерів реалізують ці модулі, забезпечивши сумісний стиль для старих браузерів, який буде замінено в сучасних браузерах новим синтаксисом. Підтримка старих браузерів стала менш важливою в 2020 році, коли розширена підтримка Windows 7 припинилася, а використання Internet Explorer стало менш поширеним.

Гнучкий макет CSS (Flexbox) ред.

World Wide Web Consortium (W3C) підійшов до питання макета через різні пропозиції. Найзрілішою пропозицією є модуль гнучкого макета flexbox (AKA Flexbox), яка станом на листопад 2018 року перебуває в статусі кандидатської рекомендації[12]. Встановлення властивости елемента display на display: flex або display: inline-flex призводить до того, що елемент стає контейнером нового типу (подібним до блоку або вбудованого (інлайн) блоку відповідно), з новими методами позиціонування дочірніх об’єктів. Вміст може розташуватися в будь-якому напрямку і відображатися в будь-якому порядку. Пропозиція W3C містить приклад, який досягає макета стовпця Святого Ґрааля за допомогою чотирьох правил CSS і робить макет адаптивним за допомогою правила медіа-запиту. Модуль також можна використовувати для вирішення багатьох інших проблем з макетом.

Гнучкий модуль макета flexbox підтримується в усіх сучасних браузерах, хоча реалізація Internet Explorer має проблеми.[13]

Макет сітки CSS (Grid) ред.

Модуль сітки так само дозволяє дизайнеру створити контейнер для макета, який містить рядки і стовпці фіксованого або змінного розміру, в яких можна розмістити елементи. Станом на грудень 2020 року він має статус кандидата на рекомендацію.[14] Він підтримується в усіх сучасних браузерах, однак у реалізації Internet Explorer є проблеми.[15] Цей модуль є продовженням попередньої роботи, виконаної як модуль позиціонування сітки, модуль розмітки шаблонів і модуль розширеного макета.[16]

Одним із аспектів цього модуля є можливість створювати слоти сітки в контейнері напівграфічно, таким чином, що було описано, як «ASCII-графіка», як у заміненому модулі «Макет шаблону».

Незважаючи на те, що модуль Flexible Box може виконувати двовимірне макетування сторінки, його цільове призначення полягає в тому, щоб розташувати елементи переважно вздовж однієї осі. Макет сітки є кращим для компонування складних сторінок і сторінок, макет яких сильно відрізняється в адаптивному дизайні.[17]

Історія ред.

Перший фланговий дизайн із трьох стовпців, який використовував чистий CSS, був розроблений Робом Чандане з BlueRobot для сайту wrongwaygoback.com у 2001 році. У той момент Ніл Талбот використовував JavaScript для визначення розташування правого стовпця. Chandanais придумав елегантне рішення для позиціонування, використовуючи чистий CSS, і незабаром після цього Ерік Костелло з Glish.com назвав його Святим Ґраалем.

Дивіться також ред.

Посилання ред.

  1. ↑ а б .appendTo: Solving the Holy Grail Layout. Архів оригіналу за 1 липня 2014. Процитовано 19 червня 2022.
  2. ↑ Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS. philipwalton.github.io. Процитовано 26 березня 2019.
  3. ↑ The Holy Grail Layout with 5 Lines of CSS. CSS-Tricks (англ.). Процитовано 26 березня 2019.
  4. ↑ W3C: HTML5/Elements/Semantics
  5. ↑ Build Internet: Four Methods to Create Equal Height Columns. Архів оригіналу за 6 квітня 2012. Процитовано 19 червня 2022.
  6. ↑ A List Apart: Faux Columns
  7. ↑ W3C: Tableless Layout HOWTO
  8. ↑ Matthew James Taylor: Equal Height Columns with Cross-Browser CSS
  9. ↑ A List Apart: Articles: Multi-Column Layouts Climb Out of the Box
  10. ↑ Position is Everything: Equal Height Columns - revisited - In search of the One True Layout
  11. ↑ Holy Grail Layout — Solved By Flexbox — Cleaner, hack-free CSS
  12. ↑ W3C: CSS Flexible Box Layout Module
  13. ↑ Can I use... Support tables for HTML5, CSS3, etc. CanIUse.com. Процитовано 27 лютого 2016.
  14. ↑ W3C: CSS Grid Layout
  15. ↑ Can I use: CSS Grid Layout
  16. ↑ W3C: CSS Template Layout Module
  17. ↑ Why Flexboxes Aren't Good for Page Layout
Отримано з https://uk.wikipedia.org/w/index.php?title=Святий_Ґрааль_(вебдизайн)&oldid=38240223