Sok éven, CSS lebeg finnyás, mégis szükséges elem volt a weboldal elrendezésének létrehozásában. Ha a terv több oszlopra szólított fel, akkor az úszók felé fordult. Ezzel a módszerrel az a probléma, hogy annak ellenére, hogy a webtervezők / fejlesztők hihetetlen ötletességet mutattak az összetett webhely létrehozásában elrendezések, A CSS float-okat soha nem akarták ilyen módon használni.
Míg az úszóknak és a CSS-helymeghatározásnak biztos, hogy az elkövetkező években is helyet kap a webdesign, az újabb elrendezés technikák, köztük a CSS Grid és a Flexbox, most új módszereket kínálnak a webdesigntereknek a webhely elrendezésének elkészítésére. Egy másik új lehetőség, amely sok potenciált mutat, a CSS több oszlop.
A CSS oszlopok már néhány éve léteznek, de a régebbi (főleg a régebbi) böngészőkben nincs támogatás Az Internet Explorer verziói) sok webes szakembert visszatartott attól, hogy ezeket a stílusokat használja a gyártás során munka.
Az IE régebbi verzióinak támogatásának lejártával néhány webdesigner most új CSS elrendezéssel kísérletezik opciók, a CSS-oszlopok is, és annak megállapítása, hogy sokkal nagyobb az irányításuk ezekkel az új megközelítésekkel, mint azokkal lebeg.
A CSS oszlopok alapjai
Ahogy a neve is sugallja, a CSS több oszlop (más néven CSS3 többoszlopos elrendezés) lehetővé teszi, hogy a tartalmat meghatározott számú oszlopra oszthassa. A legalapvetőbb CSS tulajdonságok, amelyeket használni szeretne:
- oszlopszám
- oszloprés
Oszlopszámláláshoz adja meg a kívánt oszlopok számát. Az oszloprés a csatornák vagy az oszlopok közötti távolság lenne. A böngésző ezeket az értékeket veszi fel, és a tartalmat egyenletesen felosztja a megadott oszlopok számára.
A CSS több oszlopának gyakori példája a gyakorlatban az lenne, ha a szöveges tartalom blokkját több oszlopra osztanánk, hasonlóan ahhoz, amit egy újságcikkben látni lehet. Tegyük fel, hogy a következő HTML jelöléssel rendelkezik (vegye figyelembe, hogy például csak a kezdetét tettük egy bekezdés, míg a gyakorlatban valószínűleg több bekezdést tartalmazna a tartalom ebben a jelölésben):
A cikk címe.
Képzeljen el itt sok bekezdést ...
Ha ezután ezeket a CSS stílusokat írta:
.tartalom {
-moz-oszlopszám: 3;
-webkit-oszlop-szám: 3;
oszlopszám: 3;
-moz-oszlop-rés: 30px;
-webkit-oszlop-rés: 30px;
oszloprés: 30 képpont;
}
Ez a CSS-szabály a „tartalom” felosztást 3 egyenlő oszlopra osztaná fel, közöttük 30 képpontos hézaggal. Ha három oszlop helyett két oszlopot szeretne, egyszerűen megváltoztatja ezt az értéket, és a böngésző kiszámítja az oszlopok új szélességét a tartalom egyenletes felosztása érdekében. Vegye figyelembe, hogy először a szállító előtagú tulajdonságokat használjuk, majd a nem előtagú deklarációkat követjük.
Bármilyen egyszerű is, ilyen módon használata megkérdőjelezhető a weboldal használata szempontjából. Igen, egy csomó tartalmat több oszlopra oszthat, de lehet, hogy ez nem a legjobb olvasmány tapasztalat a webről, különösen, ha ezeknek az oszlopoknak a magassága a "hajtás" alá esik képernyő.
Ezután az olvasóknak fel és le kell görgetniük a teljes tartalom elolvasásához. Ennek ellenére a CSS oszlopok főkönyve olyan egyszerű, mint itt láthatja, és sokkal többre használható, mint csak egyes bekezdések tartalmának felosztása - valóban felhasználható elrendezésre is.
Elrendezés CSS oszlopokkal
Tegyük fel, hogy van olyan weboldala, amelynek tartalmi területe 3 oszlopos tartalommal rendelkezik. Ez egy nagyon gyakori webhelyelrendezés, és ennek a 3 oszlopnak az eléréséhez általában lebegtetni kell a felosztásokat, amelyekben vannak. A CSS többoszlopos használatával sokkal könnyebb.
Íme néhány példa HTML-re:
Blogunkból.
A tartalom ide kerülne ...
Közelgő események.
A tartalom ide kerülne ...
A több oszlop létrehozásához szükséges CSS a korábban látottal kezdődik:
.tartalom {
-moz-oszlopszám: 3;
-webkit-oszlop-szám: 3;
oszlopszám: 3;
-moz-oszlop-rés: 30px;
-webkit-oszlop-rés: 30px;
oszloprés: 30 képpont;
}
Most az a kihívás, hogy a böngésző ezt a tartalmat egyenletesen akarja felosztani, tehát ha ezen felosztás tartalmi hossza eltér, akkor ez a böngésző ténylegesen fel fogja osztani egy egyéni felosztás, hozzáadva annak elejét az egyik oszlophoz, majd folytatva egy másikba (ezt láthatja úgy, hogy ezzel a kóddal kísérletet hajt végre, és mindegyikbe különböző hosszúságú tartalmat ad osztály).
Nem ezt akarod. Szeretné, ha ezek a részlegek külön oszlopot hoznának létre, és bármennyire is nagy vagy kicsi az egyes részlegek tartalma, soha nem akarja, hogy fel legyenek osztva. Ezt úgy érheti el, hogy hozzáadja ezt az egyetlen további CSS sort:
.content div {
kijelző: inline-block;
}
Ez arra kényszeríti a „tartalom” belsejében lévő részeket, hogy épek maradjanak, még akkor is, ha a böngésző ezt több oszlopra osztja. Még jobb, mivel itt semmit sem adtunk fix szélességűnek, ezek az oszlopok automatikusan átméretezésre kerülnek, ahogy a böngésző átméretezi, így ideális alkalmazás érzékeny weboldalak. Ha az „in-block” stílus a helyén van, akkor mind a 3 részlege különálló tartalomoszlop lesz.
Oszlopszélesség használata
Az „oszlopszámlálás” mellett van egy másik tulajdonság is, amelyet használhat, és az elrendezési igényektől függően valóban jobb választás lehet a webhelyére. Ez „oszlopszélesség”. A korábban bemutatott HTML jelöléssel használhatjuk ezt CSS-sel:
.tartalom {
-moz-oszlop-szélesség: 500px;
-webkit-oszlop-szélesség: 500px;
oszlopszélesség: 500px;
-moz-oszlop-rés: 30px;
-webkit-oszlop-rés: 30px;
oszloprés: 30 képpont;
}
.content div {
kijelző: inline-block;
}
Ez úgy működik, hogy a böngésző ezt az oszlopszélességet használja az oszlop maximális értékeként. Tehát, ha a böngészőablak kevesebb, mint 500 képpont széles, ez a 3 felosztás egyetlen oszlopban jelenik meg, egyik a másik tetején. Ez egy tipikus elrendezés, amelyet mobil / kis képernyő elrendezésekhez használnak.
Mivel a böngésző szélessége elég nagy lesz ahhoz, hogy 2 oszlop elférjen a megadott oszloprésekkel együtt, a böngésző automatikusan egyetlen oszlopelrendezésről két oszlopra vált. Növelje tovább a képernyő szélességét, és végül egy 3 oszlopos kialakítást kap, amelyen mind a 3 részleg a saját oszlopában jelenik meg. Ez megint egy nagyszerű módszer arra, hogy reagálni tudjunk, többeszköz-barát elrendezéseket, és nem is kell használnia média lekérdezések az elrendezési stílusok megváltoztatásához!
Egyéb oszlop tulajdonságok
Az itt lefedett tulajdonságok mellett vannak az „oszlop-szabály” tulajdonságai is, beleértve a szín, a stílus és a szélesség értékeit, amelyek lehetővé teszik szabályok létrehozását az oszlopok között. Ezeket szegélyek helyett használnánk, ha azt szeretnénk, hogy az oszlopokat elválasztja néhány vonal.
Ideje kísérletezni
Jelenleg a CSS többoszlopos elrendezése nagyon jól támogatott. Előtagokkal a webes felhasználók több mint 94% -a láthatja ezeket a stílusokat, és ez a nem támogatott csoport valójában csak az Internet Explorer sokkal régebbi verziói lennének, amelyeket amúgy sem támogatnak.
Mivel ez a támogatási szint már megvan, nincs ok arra, hogy ne kezdjünk kísérletezni a CSS-oszlopokkal, és ezeket a stílusokat telepítsük a gyártásra kész webhelyekre. Elkezdheti a kísérleteket az ebben a cikkben bemutatott HTML és CSS használatával, és különböző értékekkel játszhat, hogy megnézze, mi felelne meg legjobban webhelye elrendezési igényeinek.