Садржај

Основе ЦСС колона
Изглед са ЦСС колонама
Latest News
Са нашег блога
Upcoming Events
Коришћење ширине колоне
Остала својства колоне
Време је за експеримент

Дуги низ година, ЦСС плутаји били су добра, али неопходна компонента у креирању изгледа веб страница. Ако је ваш дизајн захтевао више ступаца, окренули сте се лебдјелицама. Проблем ове методе је што, упркос невероватној домишљатости коју су веб дизајнери / програмери показали у креирању сложених распореда страница, ЦСС плугови никада нису били намењени да се користе на овај начин.

Иако су флоатс и ЦСС позиционирање сигурно мјесто у веб дизајну већ годинама које долазе, новије технике обликовања, укључујући ЦСС Грид и Флекбок, сада пружају веб дизајнерима нове начине за креирање изгледа њихових страница. Још једна нова техника распореда која показује пуно потенцијала су ЦСС Више ступаца.

ЦСС колумне постоје већ неколико година, али недостатак подршке у старијим прегледачима (углавном старије верзије Интернет Екплорера) спречио је многе веб професионалце да користе ове стилове у свом производном раду.

Са завршетком подршке за оне старије верзије ИЕ-а, неки веб дизајнери сада експериментишу са новим опцијама изгледа ЦСС-а, укључујући ЦСС Ступце и откривају да имају толико већу контролу над овим новим приступима него што су то чинили с флоатима.

Основе ЦСС колона

Као што му име каже, ЦСС више ступаца (познат и као ЦСС3 изглед више ступаца) омогућава вам да поделите садржај на задати број ступаца. Најосновније ЦСС особине које бисте користили су:

броја колона
јаз између ступаца

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

Уобичајени пример ЦСС више ступаца у пракси био би поделити блок текстуалног садржаја у више ступаца, слично ономе што бисте видели у новинском чланку. Реците да имате следећу ХТМЛ ознаку (имајте на уму да смо, на пример, поставили само један одломак, док би у пракси вероватно било више одломака садржаја на овом означавању):

Наслов вашег чланка

Замислите пуно одломака текста овде ...

Ако сте онда написали ове ЦСС стилове:

.цонтент {
-моз-броја колона: 3;
-број-колона-колона: 3;
број колона: 3;
-моз-колона-јаз: 30пк;
-вебкит-цолумн-гап: 30пк;
јаз између колона: 30пк;
}

Ово ЦСС правило поделило би поделу „садржаја“ у 3 једнака колона са размаком од 30 пиксела између њих. Ако бисте желели два колона уместо 3, једноставно бисте променили ту вредност и прегледач би израчунао нове ширине тих колона да би садржај равномерно поделио. Примјетите да најприје користимо својства која су префиксирана од стране добављача, након чега слиједе нефиксиране декларације.

Колико је ово једноставно, његова употреба на овај начин је упитна за употребу веб страница. Да, гомилу садржаја можете поделити у више ступаца, али ово можда није најбоље искуство за читање на вебу, посебно ако висина ових колона падне испод „преклопа“ екрана.

Читаоци ће тада морати да се крећу горе-доле да би читали цео садржај. Ипак, принцип ЦСС Цолумн-а је једноставан као што видите овде, и може се користити за постизање много више од само подељења садржаја неких одломака - он се заиста може користити за изглед.

Изглед са ЦСС колонама

Реците да имате веб страницу са садржајем који садржи 3 колоне садржаја. Ово је врло уобичајен изглед веб локације, а да бисте постигли та 3 колона, обично бисте лебдели подељењима која постоје. ЦСС са више ступаца је много лакше.

Ево неколико примера ХТМЛ-а:

Са нашег блога

Садржај би ишао овде…

То није оно што желите. Желите да свака од ових подела створи посебан ступац и, без обзира колико велики или мали био садржај поједине поделе, никада не желите да се подели. То можете да постигнете додавањем ове додатне линије ЦСС-а:

.цонтент див {
дисплеј: линијски блок;
}

То ће приморати оне поделе који су унутар „садржаја“ да остану нетакнути чак и док прегледач то подели у више ступаца. Што је још боље, будући да овде нисмо дали ништа фиксне ширине, ове ће се колоне аутоматски промијенити као што ће прегледач промијенити величину, што их чини идеалном апликацијом за респонзивне веб странице. Са тим „инлине-блоцк“ стилом, свака ваша 3 подела биће посебан ступац садржаја.

Коришћење ширине колоне

Постоји још једно својство поред „броја колона“ које можете користити, а у зависности од потреба вашег изгледа, заправо може бити бољи избор за вашу веб локацију. Ово је „ширина ступца“. Користећи исту ХТМЛ ознаку као што је претходно приказано, уместо тога бисмо могли да урадимо то са нашим ЦСС-ом:

.цонтент {
-моз-ширина колоне: 500пк;
-вебкит-колона-ширина: 500пк;
ширина колоне: 500пк;
-моз-колона-јаз: 30пк;
-вебкит-цолумн-гап: 30пк;
јаз између колона: 30пк;
}
.цонтент див {
дисплеј: линијски блок;
}

Начин на који ово ради је у томе што прегледач користи ову „ширину ступца“ као максималну вредност те колоне. Дакле, ако је прозор прегледача шири од 500 пиксела, ове три поделе појавит ће се у једној колони, једна на врху друге. Ово је типичан распоред који се користи за изглед мобилних / малих екрана.

Како се ширина прегледача повећава довољно да стане 2 колоне заједно са одређеним празнинама колона, прегледач ће аутоматски прећи из једног распореда у два ступца. Наставите да повећавате ширину екрана и на крају ћете добити дизајн са 3 ступаца, при чему ће свака од три поделе бити приказана у својој колони. Опет, ово је сјајан начин да добијете одговарајуће изгледима који су прилагођени на више уређаја, а чак ни не морате да користите медијске упите да бисте променили стилове изгледа!

Остала својства колоне

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

Време је за експеримент

Тренутно је ЦСС распоред са више колона веома добро подржан. Са префиксима, преко 94% веб корисника би могло да види ове стилове, а та група која није подржана заиста би била много старије верзије Интернет Екплорера ионако више нису подржане.

Уз овакав ниво подршке, нема разлога да не почнете експериментирати са ЦСС колумнама и распоредити ове стилове на веб локацијама спремним за производњу. Можете покренути експерименте помоћу ХТМЛ и ЦСС-а представљених у овом чланку и играти се са различитим вредностима да бисте видели шта би најбоље функционисало за потребе изгледа вашег веб локације.