В продължение на много години, 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:
Последни новини
Съдържанието ще отиде тук ...
Съдържанието ще отиде тук ...
Предстоящи събития p> CSS, за да направите тези няколко колони, започва с това, което сте виждали преди:
.content {-moz-колона-брой: 3; -webkit-брой колони: 3; колона: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-празнина: 30px; } Предизвикателството тук е, че тъй като браузърът иска да разделя равномерно това съдържание, така че ако продължителността на съдържанието на тези отделения е различна, този браузър всъщност ще раздели съдържанието на отделен участък, добавяйки началото му в една колона и след това продължавате в друга (можете да видите това, като използвате този код, за да изпълните експеримент и да добавите различни дължини на съдържание във всяко отделение)!
Това не е това, което искате. Искате всеки от тези отдели да създаде отделна колона и независимо колко голям или малък е съдържанието на отделен отдел, никога няма да искате да го разделите. Можете да постигнете това, като добавите този допълнителен ред от CSS:
.content div {дисплей: inline-block; } Това ще принуди тези разделяния, които са вътре в "съдържанието", да останат непокътнати, дори когато браузърът го разделя на няколко колони. Още по-добре, тъй като не давахме тук нищо с фиксирана ширина, тези колони ще се променят автоматично при преоразмеряване на браузъра, което ги прави идеално приложение за отзивчиви сайтове . С този "inline-block" стил на място, всяка от трите ви дивизии ще бъде отделна колона със съдържание.
Използване на ширината на колоните
Има и друга собственост освен "колона", която можете да използвате и в зависимост от нуждите ви за оформление може да е по-добър избор за вашия сайт. Това е "ширина на колоната". Използвайки един и същ HTML маркер, както е показано по-горе, можем да направим това с нашите CSS:
.content {-moz-column-width: 500px; -webkit-ширина на колоната: 500px; ширина на колоните: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-празнина: 30px; } .content div {дисплей: inline-block; } Начинът, по който това работи, е, че браузърът използва тази "ширина на колоната" като максимална стойност на тази графа. Така че ако прозореца на браузъра е по-малък от 500 пиксела, тези три раздела ще се появят в една колона, една от върховете на друга. Това е типично оформление, използвано за оформления за мобилни устройства / малки екрани.
Тъй като ширината на браузъра се увеличава, за да бъде достатъчно голяма, за да се поберат 2 колони заедно с посочените пропуски в колоните, браузърът автоматично ще премине от едно оформление на колона в две колони. Продължете да увеличавате ширината на екрана и в крайна сметка ще получите дизайн на 3 колони, като всяка от нашите 3 раздела ще бъде показана в собствената колона. Отново, това е чудесен начин да получите някои отзивчиви, многопотребителски оформления и дори нямате нужда да използвате мултимедийни заявки, за да промените стиловете на оформлението!
Други свойства на колоните
В допълнение към имотите, които се покриват тук, има и свойства за "правило за колони", включително цветови, стил и ширини, които ви позволяват да създавате правила между колоните си. Те биха били използвани вместо граници, ако искате да имате няколко реда, разделящи колоните ви.
Време е да експериментираме
Понастоящем CSS Multiple Column Layout е много добре поддържана. С префикси над 94% от потребителите на уеб сайтове биха могли да видят тези стилове и тази неподдържана група наистина ще е много по-стара версия на Internet Explorer, която може и да не поддържате.
С това ниво на поддръжка сега няма причина да не започвате да експериментирате с CSS Columns и да разпространявате тези стилове в уеб сайтове, готови за производство. Можете да започнете експериментите си, като използвате HTML и CSS, представени в тази статия, и да играете наоколо с различни стойности, за да видите какво ще работи най-добре за нуждите на оформлението на сайта ви.
CSS, за да направите тези няколко колони, започва с това, което сте виждали преди:
.content {-moz-колона-брой: 3; -webkit-брой колони: 3; колона: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-празнина: 30px; }Предизвикателството тук е, че тъй като браузърът иска да разделя равномерно това съдържание, така че ако продължителността на съдържанието на тези отделения е различна, този браузър всъщност ще раздели съдържанието на отделен участък, добавяйки началото му в една колона и след това продължавате в друга (можете да видите това, като използвате този код, за да изпълните експеримент и да добавите различни дължини на съдържание във всяко отделение)!
Това не е това, което искате. Искате всеки от тези отдели да създаде отделна колона и независимо колко голям или малък е съдържанието на отделен отдел, никога няма да искате да го разделите. Можете да постигнете това, като добавите този допълнителен ред от CSS:
.content div {дисплей: inline-block; }Това ще принуди тези разделяния, които са вътре в "съдържанието", да останат непокътнати, дори когато браузърът го разделя на няколко колони. Още по-добре, тъй като не давахме тук нищо с фиксирана ширина, тези колони ще се променят автоматично при преоразмеряване на браузъра, което ги прави идеално приложение за отзивчиви сайтове . С този "inline-block" стил на място, всяка от трите ви дивизии ще бъде отделна колона със съдържание.
Използване на ширината на колоните
Има и друга собственост освен "колона", която можете да използвате и в зависимост от нуждите ви за оформление може да е по-добър избор за вашия сайт. Това е "ширина на колоната". Използвайки един и същ HTML маркер, както е показано по-горе, можем да направим това с нашите CSS:
.content {-moz-column-width: 500px; -webkit-ширина на колоната: 500px; ширина на колоните: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-празнина: 30px; } .content div {дисплей: inline-block; }Начинът, по който това работи, е, че браузърът използва тази "ширина на колоната" като максимална стойност на тази графа. Така че ако прозореца на браузъра е по-малък от 500 пиксела, тези три раздела ще се появят в една колона, една от върховете на друга. Това е типично оформление, използвано за оформления за мобилни устройства / малки екрани.
Тъй като ширината на браузъра се увеличава, за да бъде достатъчно голяма, за да се поберат 2 колони заедно с посочените пропуски в колоните, браузърът автоматично ще премине от едно оформление на колона в две колони. Продължете да увеличавате ширината на екрана и в крайна сметка ще получите дизайн на 3 колони, като всяка от нашите 3 раздела ще бъде показана в собствената колона. Отново, това е чудесен начин да получите някои отзивчиви, многопотребителски оформления и дори нямате нужда да използвате мултимедийни заявки, за да промените стиловете на оформлението!
Други свойства на колоните
В допълнение към имотите, които се покриват тук, има и свойства за "правило за колони", включително цветови, стил и ширини, които ви позволяват да създавате правила между колоните си. Те биха били използвани вместо граници, ако искате да имате няколко реда, разделящи колоните ви.
Време е да експериментираме
Понастоящем CSS Multiple Column Layout е много добре поддържана. С префикси над 94% от потребителите на уеб сайтове биха могли да видят тези стилове и тази неподдържана група наистина ще е много по-стара версия на Internet Explorer, която може и да не поддържате.
С това ниво на поддръжка сега няма причина да не започвате да експериментирате с CSS Columns и да разпространявате тези стилове в уеб сайтове, готови за производство. Можете да започнете експериментите си, като използвате HTML и CSS, представени в тази статия, и да играете наоколо с различни стойности, за да видите какво ще работи най-добре за нуждите на оформлението на сайта ви.