Дуги низ година, ЦСС пловци су били фини, али и неопходни, компонента у креирању распореда сајтова. Ако је ваш дизајн позвао на више колона, окренули сте се на плутаче . Проблем са овом методом је да, упркос невероватној изузетности коју су веб дизајнери / програмери показали приликом креирања комплексних постављања сајтова, ЦСС пловци никада нису требали користити на овај начин.
Док пловци и ЦСС позиционирање сигурно имају место у веб дизајну за много година које долазе, нове технике распореда, укључујући ЦСС Грид и Флекбок, сада дају веб дизајнерима нове начине за креирање њихових локација. Још једна нова техника распореда која показује велики потенцијал је ЦСС вишеструка колона.
ЦСС стубови су већ неколико година, али недостатак подршке у старијим прегледачима (углавном старијим верзијама Интернет Екплорер-а) задржао је многе веб професионалце да користе ове стилове у свом производном раду.
С обзиром на подршку старијим верзијама ИЕ-а, неки веб дизајнери експериментишу са новим опцијама ЦСС распореда, укљученим ЦСС колонама и налазом да имају много више контроле над овим новим приступима него што је то учинио са пловцима.
Основе ЦСС колоне
Као што сугерише, ЦСС вишеструке колоне (такође познате као ЦСС3 вишенаменски распоред) омогућавају вам да поделите садржај у одређени број колона. Најосновније ЦСС особине које бисте користили су:
- колона-бројање
- колона-празнина
За бројање колона наведите број колона које желите. Рупа у колони би била олуци или размак између тих колона. Претраживач ће узети ове вриједности и равномјерно дијелити садржај у број ступаца које одредите.
Уобичајени пример ЦСС више колона у пракси би био да се блок текстуалног садржаја подели у више колона, слично ономе што бисте видели у новинском чланку. Реците да имате следећу ознаку ХТМЛ-а (обратите пажњу на то да, на пример, користим само почетак једног параграфа, док у пракси постоји вероватно више ставки садржаја у овом ознаку):
<див цласс = "цонтент"> <х1> Наслов вашег чланка <п> Замислите пуно параграфа текста овде ...Ако сте онда написали ове ЦСС стилове:
.цонтент {-моз-цолумн-цоунт: 3; -вебкит-цолумн-цоунт: 3; колона-број: 3; -моз-цолумн-гап: 30пк; -вебкит-цолумн-гап: 30пк; колона-размак: 30пк; }Ово ЦСС правило поделило би се "садржај" на 3 једнаке колоне са размаком од 30 пиксела између њих. Ако сте хтели две колоне уместо 3, једноставно бисте променили ту вриједност и претраживач ће израчунати нове ширине тих ступаца да бисте дијелили садржај равномерно. Обратите пажњу на то да прво користимо префиксна својства произвођача, након чега следи непрефиксна декларација.
Као што је лако, његова употреба на овај начин је упитна за коришћење веб сајта. Да, можете поделити гомилу садржаја у више колона, али то можда није најбоље искуство читања за Веб, посебно ако висина ових колона пада испод "фолда" екрана.
Читачи би онда морали да се померају горе и доље како би прочитали комплетан садржај. Ипак, принцип ЦСС ступња је једноставан као што видите овде, и може се користити да би учинио толико више него само поделити садржај неких параграфа - то се заиста може користити за изглед.
Распоред са ЦСС колумнама
Реците да имате веб страницу са подручјем садржаја који садржи 3 колоне садржаја. Ово је врло типичан изглед сајта, а за постизање тих 3 колоне, обично бисте плутали поделе које се налазе. Са више колона ЦСС-а, то је много лакше.
Ево неког ХТМЛ примера:
<див цласс = "цонтент"> <див цласс = "невс"> <х2> Најновије вести <п> Садржај би био овде ... <див цласс = "блог"> <х2 <див> <див цласс = "догађаји"> <х2> Долазни догађаји <п> Садржај би био овде ... п> <див>ЦСС да направи ове вишеструке колоне почиње са оним што сте раније видели:
.цонтент {-моз-цолумн-цоунт: 3; -вебкит-цолумн-цоунт: 3; колона-број: 3; -моз-цолумн-гап: 30пк; -вебкит-цолумн-гап: 30пк; колона-размак: 30пк; }Сада је изазов овде, јер претраживач жели равномјерно поделити овај садржај, па ако је дужина садржаја ових подела другачија, тај претраживач ће заправо поделити садржај појединачне подјеле, додајући његов почетак на једну колону и а затим наставља у другу (ово можете видети помоћу овог кода за покретање експеримента и додавање различитих дужина садржаја унутар сваке одјељења)!
То није оно што желиш. Желите да свака од ових подела направи одвојену колону и, без обзира на то колико је велики или мали садржај појединачне дивизије, никада не желите да се подели. То можете постићи додавањем ове додатне линије ЦСС-а:
.цонтент див {дисплаи: инлине-блоцк; }Ово ће приморати оне делове који су унутар "садржаја" да остану нетакнути чак иако се претраживач дели на више колона. Још боље, пошто нисмо ништа дали фиксној ширини, ове колоне ће аутоматски променити величину док се прегледач промени величину, што ће их учинити идеалном апликацијом за одговарајуће веб странице . Са тим "инлине-блоцк" стилом, свака од ваших 3 дивизије ће бити посебна колона садржаја.
Коришћење ширине колоне
Постоји још једна својина поред "колумне-бројање" које можете користити, а зависно од ваших потреба за распоређивањем, то може заправо бити бољи избор за вашу веб локацију. Ово је "колона-ширина". Користећи исту ознаку ХТМЛ-а која је претходно приказана, умјесто тога можемо то урадити помоћу ЦСС-а:
.цонтент {-моз-цолумн-видтх: 500пк; -вебкит-колона-ширина: 500пк; колона-ширина: 500пк; -моз-цолумн-гап: 30пк; -вебкит-цолумн-гап: 30пк; колона-размак: 30пк; } .цонтент див {дисплаи: инлине-блоцк; }Начин на који то функционише је да прегледач користи ову "ширину ступца" као максималну вриједност тог ступца. Дакле, ако је прозор прегледача мањи од 500 пиксела, ове 3 дивизије би се појавиле у једној колони, једној од врхова другог. Ово је типичан изглед који се користи за постављање мобилних / малих екрана.
Пошто се ширина претраживача повећава довољно велика да се уклапа у две колоне заједно са одређеним празнинама у колони, претраживач ће аутоматски прећи из једног колоне у две колоне. Наставите да повећате ширину екрана и на крају ћете добити дизајн 3 колоне, а свака од наших 3 дивизије приказана у њиховој колони. Опет, ово је одличан начин да добијете неке одзивне, вишеструко уређене изгледе и не морате чак користити медијске упите да бисте променили стилове распореда!
Остале особине колоне
Поред карактеристика обухваћених овде, постоје и особине за "правило ступца", укључујући вредности боја, стила и ширине које вам омогућавају креирање правила између ваших ступаца. Они би се користили уместо граница ако желите да имате неке линије које раздвајају своје колоне.
Време за експеримент
Тренутно је ЦСС вишеструка колона Лаиоут веома добро подржана. Префикси би преко 94% веб корисника могле да виде ове стилове, а та неподржана група би заиста била много старија верзија Интернет Екплорер-а, за коју можда више нећете више подржавати.
Са овим нивоом подршке која је сада на снази, нема разлога да не започиње експериментисање са ЦСС ступама и распоређивање ових стилова на веб странице које су спремне за производњу. Можете покренути своје експерименте користећи ХТМЛ и ЦСС представљене у овом чланку и играти са различитим вриједностима како бисте видјели шта ће најбоље радити за потребе вашег сајта.