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