В продължение на много години, CSS плувки са фини, но необходими, компонент в създаването на уеб сайтове. Ако вашият дизайн призова за няколко колони, вие сте се превърнали в плувки. Проблемът с този метод е, че въпреки невероятната изобретателност, която уеб дизайнерите / разработчиците са показали при създаването на сложни оформления на сайта, CSS плувките никога не са били предназначени да бъдат използвани по този начин.
Докато поплавъците и позиционирането на CSS са сигурни, че имат място в уеб дизайна за много години напред, по-новите техники за оформление, включително CSS Grid и Flexbox, сега дават на уеб дизайнерите нови начини да създадат своите оформления на сайта. Друга нова техника за оформление, която показва много потенциал, е CSS Multiple Columns.
Графиките на CSS са в продължение на няколко години, но липсата на поддръжка в по-старите браузъри (главно по-стари версии на Internet Explorer) е попречила на много уеб специалисти да използват тези стилове в производствената си работа.
С края на поддръжката на тези по-стари версии на IE някои уеб дизайнери експериментират с нови опции за CSS оформление, включени в CSS Columns и откриват, че имат много по-голям контрол с тези нови подходи, отколкото с плаващите.
Основите на CSS колоните
Както подсказва името й, CSS Multiple Columns (известен също като CSS3 мулти-колона оформление) ви позволява да разделите съдържанието на определен брой колони. Най-основните CSS свойства, които бихте използвали, са:
- колона броене
- колона междина
За броя колони, посочете броя на колоните, които искате. Разстоянието между колоните ще бъде улуците или разстоянието между тези колони. Браузърът ще вземе тези стойности и ще разпредели равномерно съдържанието в броя колони, които посочите.
Често използван пример за CSS няколко колони на практика би бил разделянето на блок от текстово съдържание на няколко колони, подобно на това, което ще видите в статия в списанието. Кажете, че имате следния HTML маркер (забележете например, че поставям само началото на един абзац, докато на практика ще има няколко абзаца на съдържанието в този маркер):
Ако след това сте написали тези CSS стилове:
.content {-moz-колона-брой: 3; -webkit-брой колони: 3; колона: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-празнина: 30px; }
Това правило за CSS би разделило разделението "съдържание" на 3 равни колони с пропуск от 30 пиксела между тях. Ако искате две колони вместо 3, просто ще промените тази стойност и браузърът ще изчисли новите ширини на тези колони, за да разделите съдържанието равномерно. Забележете, че първо използваме предимствата на производителя, последвани от декларациите, които не са предварително.
Колкото и лесно да е това, използването му по този начин е под въпрос за използването на уебсайта. Да, можете да разделите куп съдържание на няколко колони, но това може да не е най-добрият опит за четене в мрежата, особено ако височината на тези колони падне под "фолд" на екрана.
След това читателите трябва да превъртат нагоре и надолу, за да прочетат цялото съдържание. И все пак, принципът на CSS Columns е толкова лесен, колкото виждате тук и може да се използва много повече, отколкото просто да се раздели съдържанието на някои параграфи - може наистина да се използва за оформление.
Оформление с колони за CSS
Кажете, че имате уеб страница със съдържание, съдържащо 3 колони със съдържание. Това е много типично оформление на уебсайта и за да постигнете тези 3 колони, обикновено бихте плавали разделенията, които се намират. С CSS няколко колони е много по-лесно.
Ето пример HTML:
