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