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