У веб дизајну, свети грал је распоред веб странице који има више колона једнаке висине које су дефинисане стилским листовима. Уобичајено је пожељан и имплементиран, али дуги низ година, различити начини на које се могао имплементирати са доступним технологијама имали су недостатке. Због тога је проналажење оптималне имплементације упоређивано са тражењем неухватљивог Светог грала.

Ограничења CSS-а и HTML-а, пожељност семантички значајних страница које се добро рангирају у претраживачима и недостаци различитих прегледача комбиновали су се историјски како би створили ситуацију у којој није било начина да се креира ова врста распореда који би се сматрао потпуно исправним. Пошто основне технологије нису пружале одговарајуће решење, веб дизајнери су пронашли разне начине да заобиђу ограничења. Уобичајена решења укључивала су промене у структури странице, додавање графике, скриптовање и креативну употребу CSS-а. Ове методе су биле несавршене, незгодне и неки су их сматрали злоупотребом веб стандарда и њихове намере.

Новији веб стандарди су пружили много комплетнија и робуснија решења за имплементацију овог распореда. Конкретно, модули CSS Flexible Box Layout и CSS Grid Layout су пружили комплетна решења.

Проблем Многе веб странице захтевају распоред са више (често три) колона, са главним садржајем странице у једној колони (често у средини), и додатним садржајем као што су менији и огласи у осталим колонама (бочне траке). Ове колоне обично захтевају одвојене позадине, са оквирима између њих, и требало би да буду исте висине без обзира која колона има највиши садржај. Уобичајени захтев је да бочне траке имају фиксну ширину, при чему се величина средње колоне прилагођава како би попунила прозор (флуидни или течни распоред). Још један уобичајени захтев је да, када страница не садржи довољно садржаја да попуни екран, подножје треба да падне на дно прозора прегледача уместо да остави празан простор испод. Било је много препрека за постизање овога:

1. CSS, иако прилично користан за стилизовање, имао је ограничене могућности за распоред странице.

2. Висина блок елемената (као што су div елементи) обично је одређена њиховим садржајем. Дакле, два одељења, један поред другог, са различитим количинама садржаја, имаће различите висине, осим ако њихова висина није некако подешена на одговарајућу вредност.

3. HTML је намењен семантичкој употреби; HTML елементи треба да буду изабрани тако да тачно описују њихов садржај. Изглед веб странице како је приказује кориснички агент треба независно да се одреди правилима стила. Многе имплементације злоупотребљавају HTML коришћењем табела за садржај који није табеларан или угњеживањем више div елемената без семантичке сврхе. Несемантичка употреба HTML-а збуњује кориснике или корисничке агенте који покушавају да разазнају структуру садржаја странице и представља проблем приступачности.

4. Пошто претраживачи могу сматрати садржај на почетку изворног кода веб странице релевантнијим, а садржај се чита редоследом изворног кода када га прегледају неки кориснички агенти као што су читачи екрана, веб дизајнери желе могућност да поставе садржај у изворном коду странице произвољним редоследом, без утицаја на изглед странице.

5. Због неправилног приказивања садржаја од стране различитих прегледача, метода која функционише у прегледачу који је у складу са стандардима можда неће радити у оном који не имплементира CSS исправно.

Позната решења

Табеле Пре широко распрострањене примене CSS-а, дизајнери су обично користили табеле за распоред страница. Понекад су постизали жељени распоред угњеживањем неколико табела једну у другу. Иако постављање колона унутар ћелија табеле лако постиже жељени визуелни изглед, коришћење табеле је семантички нетачно, иако се атрибут „role“ WAI-ARIA HTML може подесити на „presentation“ да би се повратио семантички контекст. Такође, не постоји начин да се контролише редослед колона у изворном коду странице.

Дељења са приказом:табела Могуће је направити колоне једнаке висине помоћу CSS својства display.

Ово захтева угњеждене поделе контејнера које су подешене на display: table и display: table-row, и колоне које су подешене на display: table-cell. Ово је семантички исправно, јер је погођен само приказ. Међутим, овој методи недостаје могућност контроле редоследа изворног кода. Такође неће радити са неким старијим, неподржаним прегледачима, као што је Internet Explorer 7 .

Фаукс колоне Ова метода користи позадинску слику која пружа боје позадине и вертикалне ивице све три колоне. Садржај сваке колоне је затворен у одељак и позициониран преко позадине коришћењем техника као што су плутајући знаци, негативне маргине и релативно позиционирање. Позадина је обично висока само неколико пиксела и направљена је да прекрије страницу помоћу атрибута „repeat-y“. Ово добро функционише за распореде фиксне ширине и може се прилагодити за странице променљиве ширине засноване на процентима, али се не може користити за странице са флуидним центром.

ЈаваСкрипт Код ове методе, након што се страница учита, скрипта мери висину сваке колоне и поставља висину сваке колоне на већу вредност. Ово неће функционисати у прегледачима који не подржавају JavaScript или имају онемогућен JavaScript.

Фиксирано или апсолутно позиционирање Код ове методе, углови подељених колона су закључани на одређеном месту на страници. Ово може бити прихватљиво или чак пожељно, али не решава проблем светог грала јер је у питању значајно другачији распоред. Последице ове методе могу укључивати садржај који се појављује испод колона (као што је подножје) фиксиран на дну екрана, празан простор испод садржаја колоне и потребу за тракама за скроловање за сваку колону да би се видео сав садржај.

Угњеждене поделе Одељак са позадином ће расти у висину како би обухватио свој садржај. Ово понашање се користи за решавање проблема креирањем три одељка угњеждена један у други, који обезбеђују три позадине. Ови одељци се постављају на своје одговарајуће место коришћењем техника позиционирања, а три одељка садржаја се постављају унутар најдубљег одељка позадине, позиционирајући се преко својих одговарајућих позадина. Одељци позадине тада постају високи као и највиши одељак садржаја. Недостаци ове методе укључују три несемантичке поделе и тешкоћу позиционирања елемената овог сложеног распореда.

Боја ивице Једноставнија верзија методе угњеждене поделе подразумева коришћење једног контејнерског одељења. Својства позадине овог одељења обезбеђују позадину централне колоне, а лева и десна ивица, којима је дата ширина једнака ширини бочних колона, обезбеђују боје позадине бочних трака. Садржај сваке колоне је позициониран преко њене позадине. Овај метод и даље користи једну несемантичку поделу и отежава примену позадинских слика и ивица на бочне траке.

Доњи унутрашњи размак Постављањем велике количине пасажа на дно контејнера колоне, позадина ће се протезати далеко испод садржаја колоне. Одговарајућа негативна маргина ће вратити садржај испод колона у његов правилан положај. Позиционирање је једноставно код ове методе, јер контејнер садржаја колоне такође садржи њену позадину. Вредност пасажа од 32767 пиксела је највећа коју ће препознати сви модерни прегледачи. Ако је разлика у висинама колона већа од овога, позадина краће колоне неће у потпуности попунити колону.

Тренутна решења CSS3 стандарди садрже модуле који могу правилно да распореде елементе странице. Два од њих у потпуности решавају проблем светог грала. Подршка за ове модуле недостаје или је на други начин мањкава у старијим прегледачима. Многи дизајнери ће имплементирати ове модуле док пружају компатибилно стилизовање за старије прегледаче, што ће у модерним прегледачима бити поништено новом синтаксом. Подршка за старије прегледаче постала је мање важна 2020. године, када је проширена подршка за Windows 7 завршена, а коришћење Internet Explorer-а постало је ређе.

CSS флексибилни распоред оквира (Flexbox) Конзорцијум World Wide Web (W3C) је приступио питању распореда кроз различите предлоге. Најзрелији предлог је Модул за флексибилни распоред оквира (познат и као Flexbox), који је у статусу кандидата за препоруку од новембра 2018. године. Модул за флексибилни распоред оквира је подржан у свим модерним прегледачима.

Постављање својства приказа елемента на display: flex или display: inline-flex доводи до тога да елемент постане нови тип контејнера (слично блоку или инлине блоку, респективно), са новим методама позиционирања подређених објеката. Предлог W3C садржи пример који постиже распоред колоне „свети грал“ користећи четири једноставна CSS правила и чини распоред прилагодљивим помоћу једноставног правила за медијске упите. Модул се такође може користити за решавање многих других проблема са распоредом.

Изглед ЦСС мреже Модул распореда мреже слично омогућава дизајнеру да креира контејнер за распоред, који садржи редове и колоне фиксне или променљиве величине у које се елементи могу поставити. Налази се у статусу препоруке кандидата, са новим нацртом од марта 2025. године. Подржан је у свим модерним прегледачима осим Opera Mini. Овај модул је наставак претходног рада урађеног као Модул за позиционирање мреже, Модул за распоред шаблона и Модул за напредни распоред.

Једна од карактеристика овог модула је могућност креирања слотова мреже у контејнеру полуграфички, на начин који је описан као „ASCII арт“, као у замењеном модулу распореда шаблона. На пример, следеће дефинише мрежу распореда странице са заглављем пуне ширине, три колоне и подножјем пуне ширине (потребна су додатна css правила за величину елемената мреже). Иако је модул Flexible box способан да изводи дводимензионални распоред странице, његова намена је да позиционира елементе првенствено дуж једне осе. Распоред мреже је пожељнији за распоред сложених страница и страница чији се распоред значајно разликује у респонзивном дизајну.

Историја Године 2001, Роб Чанданаи из компаније BlueRobot био је пионир у првом дизајну са три бочне колоне користећи чисти CSS за веб страницу wrongwaygoback.com. Пре ове иновације, Нил Талбот се ослањао на JavaScript за позиционирање десне колоне. Чанданаисов пробој је пружио елегантније решење које је елиминисало потребу за скриптовањем, поједностављујући креирање распореда.

Овај дизајнерски приступ је касније добио надимак „Свети грал“ од стране Ерика Костела из Glish.com, истичући његов значај у веб развоју. Ова прекретница је не само показала моћ CSS-а за сложене распореде, већ је и инспирисала безброј дизајнера да истраже пуни потенцијал каскадних стилских листова у својим пројектима, означавајући значајну промену у пракси веб дизајна.

Референце

Категорија:Веб-дизајн Категорија:Респонзивни веб дизајн