На працягу многіх гадоў, CSS паплаўкі былі пераборлівыя, але неабходны кампанент у стварэнні макетаў вэб-сайтаў. Калі ваш праект пад назвай для некалькіх слупкоў, вы звярнуліся да паплаўка . Праблема гэтага метаду складаецца ў тым, што, нягледзячы на неверагодную вынаходлівасць, што вэб-дызайнеры / распрацоўшчыкі паказалі ў стварэнні складаных макетаў сайта, CSS паплаўкі ніколі не былі прызначаныя для выкарыстання такім чынам.
У той час як паплаўкі і пазіцыянаванне CSS абавязкова мець месца ў вэб-дызайне на працягу многіх гадоў, каб прыйсці, новыя метады кампаноўкі, уключаючы CSS табліцы і Flexbox цяпер даюць вэб-дызайнерам новыя шляхі для стварэння сваіх макетаў сайта. Яшчэ адзін новы метад макета, які паказвае шмат патэнцыялу CSS Некалькі слупкоў.
CSS Калоны былі вакол на працягу некалькіх гадоў, але адсутнасць падтрымкі ў старых браўзэрах (у асноўным больш старыя версіі Internet Explorer) захаваў шматлікія вэб-прафесіяналаў ад выкарыстання гэтых стыляў у іх вытворчай дзейнасці.
З мэтай падтрымкі гэтых старых версій IE, некаторыя вэб-дызайнеры зараз эксперыментуюць з новымі варыянтамі кампаноўкі CSS, CSS слупкоў ўключаны, і выявілі, што ў іх ёсць так шмат больш кантролю з гэтымі новымі падыходамі, чым яны зрабілі з паплаўкамі.
Асновы CSS Стоўбцы
Як вынікае з назвы, CSS Некалькі слупкоў (таксама вядомы як CSS3 макет некалькіх слупкоў) дазваляе падзяліць кантэнт у зададзены лік слупкоў. Самыя асноўныя ўласцівасці CSS, якія вы выкарыстоўваеце, з'яўляюцца:
- калонка падліку
- калонка зазор
Для слупка падліку неабходна ўказаць колькасць слупкоў вы хочаце. Разрыў калонкі будзе жолабы або адлегласць паміж гэтымі калонамі. Браўзэр будзе прымаць гэтыя значэння і падзяліць змесціва раўнамерна ў лік слупкоў вы пакажа.
Тыповы прыклад CSS некалькіх слупкоў на практыцы будзе раскалоць блок тэкставага змесціва ў некалькіх слупкоў, падобна таму, што вы ўбачыце ў газетнай артыкуле. Скажам, у вас ёсць наступны HTML-разметка (звярніце ўвагу, што для прыкладу, я толькі пакласці пачатак аднаго пункта, у той час як на практыцы, верагодна, будуць некалькі абзацаў ўтрымання ў гэтай разметцы):
загаловак свайго артыкула
Уявіце сабе мноства абзацаў тэксту тут ...
Калі вы тады пісалі гэтыя стылі CSS:
.content {-moz-калонкі падліку: 3; -webkit-калонкі падліку: 3; калонка падлік: 3; -moz-калонай разрыў: 30px; -webkit-калонай разрыў: 30px; калоннай разрыў: 30px; }Гэтае правіла CSS расколе «змест» дзяленне на 3 роўныя калоны з зазорам 30 кропак паміж імі. Калі вы хочаце, дзве калонак замест 3, вы б проста змяніць гэтае значэнне і браўзэр будзе вылічаць новыя шырыні гэтых слупкоў, каб раўнамерна падзяліць змесціва. Звярніце ўвагу, што мы выкарыстоўваем пастаўшчык прэфікса ўласцівасці першым, за якім варта ані-прыстаўцы дэкларацый.
Як лёгка, як гэта, яго выкарыстанне ў гэтым выпадку сумніўная для выкарыстання вэб-сайта. Так, вы можаце падзяліць кучу кантэнту ў некалькіх слупкоў, але гэта не можа быць лепшым вопытам чытання для Web, асабліва калі вышыня гэтых калонак падае ніжэй «зморшчыны» на экране.
Чытачы тады прыйдзецца пракручваць уверх і ўніз, каб прачытаць поўнае ўтрыманне. Тым не менш, дырэктар CSS слупкоў так жа лёгка, як вы бачыце тут, і ён можа быць выкарыстаны, каб зрабіць нашмат больш, чым проста падзяліць змест некаторых пунктаў - гэта можа, на самай справе, можна выкарыстоўваць для разметкі.
Кампаноўка з CSS Стоўбцы
Скажыце, што ў вас ёсць вэб-старонку з зонай кантэнту, які мае 3 калонкі кантэнту. Гэта вельмі тыповы выгляд вэб-сайта, а таксама для дасягнення гэтых 3 калонкі, вы звычайна усплываюць падраздзялення, якія знаходзяцца ў. З дапамогай CSS множных калонак, гэта нашмат прасцей.
Вось некаторыя прыклады HTML:
Апошнія навіны
Змест будзе тут ...
З нашага блога
Змест будзе тут ...
адбыцца падзеі
Змест будзе тут ...
CSS, каб зрабіць гэтыя некалькі слупкоў пачынаецца з таго, што вы бачылі раней:
.content {-moz-калонкі падліку: 3; -webkit-калонкі падліку: 3; калонка падлік: 3; -moz-калонай разрыў: 30px; -webkit-калонай разрыў: 30px; калоннай разрыў: 30px; }Цяпер праблема ў тым, што, так як браўзэр хоча падзяліць гэта змест раўнамерна, так што калі даўжыня ўтрыманне гэтых раздзелаў адрозніваецца, што браўзэр будзе фактычна падзяліць ўтрыманне асобнага падзелу, дадаўшы пачатак яго ў адну калонку і затым працягваецца ў іншы (вы можаце ўбачыць гэта з дапамогай гэтага кода, каб запусціць эксперымент і дадаць розныя даўжыні змесціва ўнутры кожнага падраздзялення)!
Гэта не тое, што вы хочаце. Вы хочаце, каб кожны з гэтых падраздзяленняў не ствараць асобную калонку і, незалежна ад таго, наколькі вялікі або маленькі ўтрыманне асобнага падраздзялення можа быць, вы ніколі не хочаце яго падзяліць. Вы можаце дасягнуць гэтага шляхам дадання гэтага яшчэ адну лінію CSS:
.content дзіў {дысплей: убудаваны блок; }Гэта прымусіць тыя падраздзяленні, якія знаходзяцца ўнутры «ўтрымання», каб застацца некранутымі нават браўзэр падзяляе гэта ў некалькі калонак. Яшчэ лепш, так як мы не далі тут нічога фіксаваную шырыню, гэтыя слупкі будуць аўтаматычна змяняць памер , як браўзэр змяняе памер, што робіць іх ідэальным прыкладанне для рэагуюць сайтаў . Пры тым, што «ўбудаваным блоку" стыль у месцы, кожны з вашых 3-х дзяленняў будзе выразны слупком кантэнту.
Выкарыстанне слупка шырыні
Існуе яшчэ адна ўласцівасць акрамя «калонкі падліку», якія вы можаце выкарыстоўваць, і ў залежнасці ад вашых патрэбаў макета, яна можа быць лепшым выбарам для вашага сайта. Гэта «калона шырыня». Выкарыстоўваючы тую ж HTML-разметку, як паказана вышэй, мы маглі б замест таго, каб зрабіць гэта з дапамогай нашага CSS:
.content {-moz-калонай шырыня: 500px; -webkit-калонай шырыня: 500px; калоннай шырыня: 500px; -moz-калонай разрыў: 30px; -webkit-калонай разрыў: 30px; калоннай разрыў: 30px; } {.content DIV дысплей: убудаваны блок; }Чынам, што гэта працуе ў тым, што браўзэр выкарыстоўвае гэтую «слупок шырыню» у якасці максімальнага значэння гэтага слупка. Такім чынам, калі акно браўзэра менш 500 пікселяў у шырыню, гэтыя 3 падраздзялення з'явяцца ў адным слупку, адной з вяршыняў іншага. Гэта тыповы макет выкарыстоўваецца для мабільных / невялікіх макетаў экрана.
Паколькі шырыня браўзэра павялічваецца, каб быць дастаткова вялікім, каб адпавядаць 2 калонкі разам з зададзенымі зазорамі слупкоў, браўзэр будзе аўтаматычна пераходзіць з аднаго макета слупка ў дзве калонкі. Працягвайце павялічваць шырыню экрана і ў канчатковым выніку, вы атрымаеце дызайн у 3 калонкі, з кожным з нашых 3-х дывізій, адлюстраваных у іх уласнай Стоўбцах. Зноў жа , гэта выдатны спосаб атрымаць некаторыя спагадныя, мульты-прылады дружалюбных макетаў, і вам нават не трэба выкарыстоўваць запыты сродкаў масавай інфармацыі , каб змяніць стылі макета!
Іншыя ўласцівасці слупкоў
У дадатку да ўласцівасцяў пакрытых тут, ёсць таксама ўласцівасці для «калоннай правілы», у тым ліку значэнняў колеру, стылю і шырыні, якія дазваляюць ствараць правілы паміж слупкамі. Яны будуць выкарыстоўвацца замест межаў, калі вы хочаце мець некаторыя лініі, якія падзяляюць слупкі.
падчас эксперыменту
У цяперашні час, CSS Multiple Размяшчэнне слупкоў вельмі добра падтрымліваецца. З прыстаўкамі, больш за 94% карыстальнікаў інтэрнэту змогуць убачыць гэтыя стылі, і што Непадтрымоўваны група будзе на самой справе проста значна больш старыя версіі Internet Explorer, які не можа быць больш з падтрымкай у любым выпадку.
Пры гэтым узровень падтрымкі ў цяперашні час на месцы, няма ніякіх прычын, каб не пачаць эксперыментаваць з CSS слупкоў і разгортвання гэтых стыляў у вытворчых гатовых сайтаў. Вы можаце пачаць свае эксперыменты з выкарыстаннем HTML і CSS, прадстаўленым у гэтым артыкуле, і гуляць з рознымі значэннямі, каб убачыць, што будзе працаваць лепш для патрэб макета вашага сайта.