Fir vill Joren, CSS schwätzt ee gewëssenen, awer noutwänneg, Komponent an der Websäit Layout. Wann Äre Design fir verschidde Säulen genannt gouf, hunn Dir u Flëss gedréckt . De Problem mat dëser Methode ass datt trotz der onheemlech Entrüstung, déi Webdesigner / Entwéckler hunn beim komplexe Site Layout weisen, hunn CSS Fléien net ni richteg gemeet fir dës Manéier ze ginn.
Während Placken an CSS Positioning si sécher, datt et e puer Joer am Webdesign ze hunn, méi nei Layout Techniken, wéi CSS Grid a Flexbox, ginn elo Webdesigner nei Weeër fir Site Site Layout ze kreéieren. Eng nei neier Layoutstechnik déi vill Potenz weist e CSS méi Spalten.
CSS Säulen sinn elo e puer Joer agehale ginn, awer net genuch Ënnerstëtzung an al Browser (haaptsächlech äeren Versionen vum Internet Explorer) huet vill Websäite vun der Benotzung vun dësen Stiler an der Produktioun.
Am Ende vun der Ënnerstëtzung fir déi al Versioune vun IE, verschidde Websäite ginn elo experimentéiert mat neien CSS Layoutoptiounen, CSS Späicher inkludéiert a feststellen datt se sou vill méi Kontrolle mat dëse neit Approchen hunn wéi se mat Schwammen gemaach hunn.
D'Basics vun CSS Columns
Wéi säi Numm proposéiert, CSS Multiple Columns (och bekannt als CSS3 Multi-Säulen-Layout) erméiglecht Iech d'Inhalter an eng Rei vu Säulen ze splécken. Déi meescht Basis CSS-Propositiounen déi Dir benotzt hätten:
- column column
- Spaltlück
Fir Spalten-Zählwuert spezifizéiert Dir déi Zuel vu Spalten déi Dir wëllt. De Spaltlück ass déi Rieder oder Ofschnëtter tëschent deenen Spalten. De Browser follehlt dës Wäerter an de Contenu iwwergläicht souguer d'Nummer vun de Spalten, déi Dir uginn.
E gemeinsaamt Beispill vu CSS verschidde Säulen an der Praxis wier e Spuere vun Textinhalt an méi verschidde Spalten, sou wéi Dir an engem Zeitungsartikel gesitt. Sot Dir déi folgend HTML-Markup (mer weisen datt zum Beispill Zwecker den Ufank vun engem Paragrapus ass, während an der Praxis et wahrscheinlech méi Paragrafen vun Inhalter an dësem Markup ass):
D'Rubrik vun Ärem Artikel
Stellt Iech vir eng Paragrafen vum Text hier ...
Wann Dir dës CSS Stiwwelen schreift:
.content {-moz-column-count: 3; -webkit-column-count: 3; Kolonn-count: 3; -moz-Säulen-Spalt: 30px; -webkit-column-spat: 30px; Spaltlück: 30px; }}Dës CSS Regel hätt d'Divisioun "Inhalt" an 3 gläich Säulen mat enger Spalt vu 30 Pixelen tëscht hinnen gespaut. Wann Dir zwou Säiten statt 3 wënscht, wäerte mer just dëse Wäert änneren an de Browser wäerte déi nei Breede vun dëse Säiten berechnen fir de Inhalt gleichméisseg opzemaachen. Remarkéiert datt mir d'Vendor-präfixéiert Eegenschaften zuerst benotzen, gefollegt vun den net-prefixéierten Deklaratiounen.
Esou wéi et einfach ass, ass seng Benotzung sou déiselwecht fir Websäit benotzt. Jo, Dir kënnt e puer Erausfuerderungen an e puer Säulen spuere loossen, awer dat ass net d'Liwwerung fir de Web am meeschten, virun allem wann d'Héichzocker vun dëse Säulen ënnert dem "falschen" Bildschirm falen.
D'Lieser missten dann op a drënner scrollen fir de kompletten Inhalt ze liesen. Den Haaptprinzip vu CSS Späicher ass sou einfach wéi Dir hei kuckt, an et kann benotzt ginn fir dat vill méi wéi nëmmen den Inhalt vu verschidden Abschnitter ze splécken - et kann och fir den Layout benotzt ginn.
Layout Mat CSS Späicher
Gitt Dir datt Dir eng Websäit mat engem Inhaltsraum hutt 3 Säulen am Inhalt. Dëst ass eng ganz typesch Websäit Layout, a fir dës 3 Säulen ze erreechen, wäerte normalerweis d'Divisioune schwächen. Mat CSS multiple Columns ass et sou vill méi einfach.
Hei ass e puer Beispiller HTML:
Inhalt wier da weider ...
Vun eisem Blog
Inhalt ass hei heihinner ...
Ugestallten Veranstaltungen
Inhalt wier da weider ...
De CSS fir dës verschidde Säulen unzefänken mat deem wat Dir virdru gesinn huet:
.content {-moz-column-count: 3; -webkit-column-count: 3; Kolonn-count: 3; -moz-Säulen-Spalt: 30px; -webkit-column-spat: 30px; Spaltlück: 30px; }}Elo ass d'Erausfuerderung hei: Wann de Browser dësen Inhalt unzeginn wëllt, also wann d'Inhalel vun dësen Divisiounen ënnerschiddlech ass, gëtt de Browser de Inhalt vun enger individueller Divisioun deelhëlt, andeems hien et mat enger Kolonn starten an da weider an eng aner weiderfueren (Dir kënnt dat duerch de Code benotzen fir e Experiment ze maachen an ënnerschiddlech Längt vun Inhalt an all Divisioun ze addéieren)!
Dat ass net wat Dir wëllt. Dir wëllt jiddereen vun dësen Divisiounen eng spezifesch Kolonn erstellen an egal wéi grouss oder kleng en individuellen Divisiounen Inhalt ass, da wëlls de se och net divizéieren. Dir kënnt dëst erreechen andeems dës dës eng weider Zeil vu CSS addéiere kënnt:
.content div {display: inline-block; }}Dëst zwéngt d'Divisiounen déi am "Inhalt" sinn intakt bleiwen, och wann de Browser sämtlech an verschidde Säulen zerfällt. Sogar besser, well mir hei keng nëtzlech Breet hei hunn, wäerten déi Säulen automatesch d'Gréisst änneren, wann de Browser méi grouss ass wéi se en ideale Programm fir respektvoll Websäiten hunn . Mat deem "Inline-Block" Stil an der Plaz, all eenzel vun Ären 3 Divisiounen eng gesonder Spille vum Inhalt.
Benotze Column-Width
Et ass eng aner Eigenschaft niewent "Kolonnenzahl", déi Dir benotzt a benotzt a wéi ofhängeg vun Äre Bedierfnesser entsprécht, kann et tatsächlech e besseren Choix fir Är Säit sinn. Dëst ass "Kolonn breet". Mat därselwechter HTML Markup wéi virdrun ze gesinn, mir konnten awer stattfannen mat eisem CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; Spaltbreedung: 500px; -moz-Säulen-Spalt: 30px; -webkit-column-spat: 30px; Spaltlück: 30px; } .content div {display: inline-block; }}D'Art a Weis dat dëst funktionnéiert, datt de Browser dës "Spaltbreedung" als de maximalen Wäert vun dëser Kolonn benotzt. Also wann d'Browserfenêt manner wéi 500 Pixel breed ass, wäerten dës 3 Divisiounen an enger eenzeger Kolonn erscheinen, eng vun den Tops vun engem aneren. Dëst ass e typesche Layout fir mobil / kleng Schéinheetslayouts.
Wann d'Browserplaz méi grouss genuch ass fir 2 Säulen zesummen mat de spezifizéierte Spaltenlücken z'entwéckelen, gëtt de Browser automatesch vun engem eenzel Spaltenlayout op zwou Spalten. Bleift d'Bildschirmbreete erhéicht a schliisslech kritt Dir e 3 Spaltentechnik mat all 3 Divisiounen an hirer eegener Kolonn. Elo, dat ass eng super Manéier fir e puer Responsable Merci, Multi-Device Friendly Layout ze kréien, an Dir musst jo och keng Medien Query benotze fir d' Layoutstile ze änneren!
Aner Späichereigenschaften
Zousätzlech zu den Eegeschafte ginn et och Eegeschafte fir "Spaltenregel", dorënner Faarf, Stil a Breet d'Wäerter, fir datt Dir Regelen tëschent de Säulen erstellen. Dës wäerte benotzt ginn anstatt Grenzen wann Dir e puer Linnen hutt, déi Är Säulen trennen.
Zäit ze experimentéieren
De CSS Multiple Column Layout ass momentan gutt ënnerstëtzt. Mat Präfixe kënnen iwwer 94% vun de Benotzer d'Stiler gesinn, an datt déi net ënnerstëtzte Grupp wier wierklech nëmme méi al Versioune vun Internet Explorer sinn, déi Dir net weider ënnerstëtzt.
Mat dësem Niveau vun der Ënnerstëtzung elo op Plaz ass et kee Gronn, fir ze experimentéieren mat CSS Späicher ze starten an dës Stile an der Produktioun fäerdeg Websäiten ze benotzen. Dir kënnt Äert Experimenter benotze fir de HTML an CSS an dësem Artikel präsent ze ginn an mat verschiddenen Wäerter ze spillen fir ze kucken wat wat am Beschten entsprécht am Layout.