Monien vuosien ajan CSS-kelluvat ovat olleet hieno, mutta tarpeellinen komponentti verkkosivujen ulkoasujen luomisessa. Jos suunnittelu vaati useita sarakkeita, olet kääntynyt kellumaan . Tämän menetelmän ongelma on se, että huolimatta uskomattomasta kekseliäisyydestä, jonka web-suunnittelijat / kehittäjät ovat osoittaneet luomasta monimutkaisia sivuston ulkoasuja, CSS-kellukkeita ei todellakaan ole tosiasiallisesti tarkoitettu käytettäväksi tällä tavoin.
Vaikka kellukkeet ja CSS-paikannus ovat varmasti paikkansa web-suunnittelussa monien vuosien ajan, uudet layout-tekniikat, kuten CSS Grid ja Flexbox, antavat nyt web-suunnittelijoille uusia tapoja luoda sivuston asetteluja. Toinen uusi layout-tekniikka, joka näyttää paljon mahdollisuuksia, on CSS Multiple Columns.
CSS-sarakkeet ovat olleet jo muutaman vuoden ajan, mutta vanhempien selainten (lähinnä Internet Explorerin vanhojen versioiden) puutteellinen tuki on pitänyt monet web-ammattilaiset käyttämästä näitä tyylejä heidän tuotantotyöstään.
Kun IE: n vanhemmat versiot tukevat, jotkut web-suunnittelijat kokeilevat nyt uusia CSS-asetteluvaihtoehtoja, mukaan lukien CSS-sarakkeet, ja havaitsevat, että niillä on paljon enemmän hallintaa näihin uusiin lähestymistapoihin kuin uimureiden kanssa.
CSS-sarakkeiden perusteet
Kuten sen nimi viittaa, CSS Multiple Columns (tunnetaan myös nimellä CSS3 monipylvästapahtuma) antaa sinun jakaa sisällön sarjan sarakkeisiin. Tärkeimmät CSS-ominaisuudet, joita haluat käyttää ovat:
- sarake-count
- sarake-aukko
Sarakkeen laskemiseksi määrität haluamasi sarakkeiden määrän. Pilarivälit olisivat kouruja tai välimatka näiden sarakkeiden välillä. Selaimesi ottaa nämä arvot ja jakaa sisällön tasaisesti määrittämiesi sarakkeiden määrään.
Yhteinen esimerkki CSS: n monesta sarakkeesta käytännössä olisi jakaa tekstisisältölohko useisiin sarakkeisiin, samanlainen kuin sanomalehtiartikkelissa. Sano että sinulla on seuraava HTML-merkintä (huomaa esimerkiksi, että tarkoitan vain yhden kappaleen alkua, mutta käytännössä tässä artikkelissa saattaa olla useita sisältöjä):
Artikkelin otsikko
Kuvittele paljon tekstikappaleita tässä ...
Jos kirjoitit sitten nämä CSS-tyylit:
.content {-moz-column-count: 3; -webkit-sarakkeiden määrä: 3; sarakkeiden lukumäärä: 3; -moz-sarake-aukko: 30px; -webkit-sarake-aukko: 30px; sarake-aukko: 30px; }Tämä CSS-sääntö jakaa sisällön jakautumisen kolmeen samanarvoiseen sarakkeeseen, joiden välinen etäisyys on 30 pikseliä. Jos haluat kaksi saraketta sijaan 3, voit yksinkertaisesti muuttaa kyseistä arvoa ja selaimen laskea näiden sarakkeiden uudet leveydet jakamaan sisältö tasaisesti. Huomaa, että käytämme ensin myyjän ennalta määritettyjä ominaisuuksia, joita seuraa ennalta määritetyt ilmoitukset.
Niin helppoa kuin se on, sen käyttö tällä tavalla on kyseenalaista verkkosivujen käyttöä varten. Kyllä, voit jakaa joukon sisältöä useisiin sarakkeisiin, mutta tämä ei välttämättä ole paras internetin lukukokemus, varsinkin jos näiden sarakkeiden korkeus jää näytön "fold" alle.
Lukijoiden pitäisi sitten selata ylös ja alas lukemaan koko sisällön. Silti CSS-sarakkeiden päällikkö on yhtä helppoa kuin täällä, ja sitä voidaan käyttää niin paljon enemmän kuin vain jakaa jonkin kappaleen sisältöä - sitä voidaan todellakin käyttää ulkoasuun.
Layout CSS-sarakkeilla
Sano, että sinulla on verkkosivusto, jossa on sisältöalue, jossa on kolme saraketta. Tämä on hyvin tyypillinen verkkosivujen asettelu, ja näiden kolonnien saavuttamiseksi normaalisti kelluu osastot, jotka ovat sisään. CSS-monipilarien avulla se on paljon helpompaa.
Seuraavassa on esimerkki HTML: stä:
Viimeisimmät uutiset
Sisältö tulee tänne ...
Tulevia tapahtumia
Sisältö menisi tänne ... p>
Näiden useiden sarakkeiden tekeminen CSS: ssä alkaa siitä, mitä aiemmin näit:
.content {-moz-column-count: 3; -webkit-sarakkeiden määrä: 3; sarakkeiden lukumäärä: 3; -moz-sarake-aukko: 30px; -webkit-sarake-aukko: 30px; sarake-aukko: 30px; } Nyt haasteena on se, että selaimen halutaan jakaa tämän sisällön tasaisesti, joten jos näiden jakautumien sisällön pituus on erilainen, selain todella jakaa yksittäisen divisioonan sisällön lisäämällä sen aloittamisen yhteen sarakkeeseen ja sitten jatkuu toiseen (näet tämän käyttämällä tätä koodia kokeilun suorittamiseksi ja lisäämällä eri pituudet sisältöä kunkin divisioonan sisällä)!
Se ei ole sitä mitä haluat. Haluat, että kukin näistä divisiooista luo erillisen sarakkeen, ja riippumatta siitä, kuinka suuri tai pieni yksittäinen jako on, et ikinä halua jakaa sitä. Voit saavuttaa tämän lisäämällä tämän uuden CSS-rivin:
.content div {display: inline-block; } Tämä pakottaa "sisällön" sisältämät alueet säilymään ennallaan silloinkin, kun selain jakaa tämän useisiin sarakkeisiin. Vielä parempi, koska emme antaneet mitään täällä kiinteää leveyttä, nämä sarakkeet muuttuvat automaattisesti selaimen kokoa muuttamalla, joten ne ovat ihanteellinen sovellus reagoiviin verkkosivustoihin . Kun kyseinen "inline-block" -tyyli on paikoillaan, kukin kolmesta osastasi on erillinen sisällön sarake.
Sarake-leveyden käyttäminen
Käytettävissäsi on myös toinen "sarakemäärän" ominaisuus, ja se riippuu ulkoasun tarpeista. Se voi todellakin olla parempi vaihtoehto sivustollesi. Tämä on "sarake-leveys". Käyttämällä samaa HTML-merkintää aiemmin esitetyllä tavalla, voimme sen sijaan tehdä sen CSS: llä:
.content {-moz-sarakkeen leveys: 500px; -webkit-sarake-leveys: 500px; sarake-leveys: 500px; -moz-sarake-aukko: 30px; -webkit-sarake-aukko: 30px; sarake-aukko: 30px; } .content div {display: inline-block; } Näin toimii, että selain käyttää tätä sarakkeen leveyttä kyseisen sarakkeen maksimiarvona. Joten jos selainikkuna on alle 500 pikseliä leveä, nämä kolme jakautumista näyttävät yhdestä sarakkeesta, toisesta toisesta yläosasta. Tämä on tyypillinen layout, jota käytetään mobiili- / pienoisruudulla.
Koska selaimen leveys kasvaa riittävän suureksi, jotta se sopisi 2 sarakkeen kanssa määritettyjen sarakkeiden aukkojen kanssa, selain siirtyy automaattisesti yhdestä sarakkeen ulkoasusta kahteen sarakkeeseen. Pidä näytön leveyden kasvaessa ja lopulta saat 3 sarakekuvion, ja jokainen 3 jakautumistasi näkyy omassa sarakkeessa. Jälleen tämä on hieno tapa saada reagoivia, monikäyttöisiä sovelluksia, eikä sinun tarvitse edes käyttää mediakyselyjä ulkoasutyylin muuttamiseen!
Muut sarakkeen ominaisuudet
Tässä käsiteltyjen ominaisuuksien lisäksi on myös ominaisuuksia sarakekoodeille, mukaan lukien väri-, tyyli- ja leveysarvot, joiden avulla voit luoda sääntöjä sarakkeiden välillä. Näitä käytetään rajojen sijaan, jos haluat, että jollakin rivillä erotetaan sarakkeet.
Aika kokeilla
Tällä hetkellä CSS Multiple Column Layout -järjestelmää tuetaan hyvin. Etuliitteillä yli 94% verkkokäyttäjistä näkee nämä tyylit ja että tuettu ryhmä olisi oikeastaan vain vanhemmat Internet Explorerin versiot, joita et ehkä enää tue.
Tällä tuetasolla nyt ei ole mitään syytä olla aloittamatta kokeilemalla CSS-sarakkeita ja ottamalla nämä tyylejä käyttöön valmistavissa verkkosivustoissa. Voit aloittaa kokeilut käyttämällä tässä artikkelissa esitettyä HTML- ja CSS-koodia ja pelata eri arvoilla, jotta näet, mikä sopisi parhaiten sivustosi ulkoasun tarpeisiin.
Tulevia tapahtumia
Sisältö menisi tänne ... p>
Näiden useiden sarakkeiden tekeminen CSS: ssä alkaa siitä, mitä aiemmin näit:
.content {-moz-column-count: 3; -webkit-sarakkeiden määrä: 3; sarakkeiden lukumäärä: 3; -moz-sarake-aukko: 30px; -webkit-sarake-aukko: 30px; sarake-aukko: 30px; }Nyt haasteena on se, että selaimen halutaan jakaa tämän sisällön tasaisesti, joten jos näiden jakautumien sisällön pituus on erilainen, selain todella jakaa yksittäisen divisioonan sisällön lisäämällä sen aloittamisen yhteen sarakkeeseen ja sitten jatkuu toiseen (näet tämän käyttämällä tätä koodia kokeilun suorittamiseksi ja lisäämällä eri pituudet sisältöä kunkin divisioonan sisällä)!
Se ei ole sitä mitä haluat. Haluat, että kukin näistä divisiooista luo erillisen sarakkeen, ja riippumatta siitä, kuinka suuri tai pieni yksittäinen jako on, et ikinä halua jakaa sitä. Voit saavuttaa tämän lisäämällä tämän uuden CSS-rivin:
.content div {display: inline-block; }Tämä pakottaa "sisällön" sisältämät alueet säilymään ennallaan silloinkin, kun selain jakaa tämän useisiin sarakkeisiin. Vielä parempi, koska emme antaneet mitään täällä kiinteää leveyttä, nämä sarakkeet muuttuvat automaattisesti selaimen kokoa muuttamalla, joten ne ovat ihanteellinen sovellus reagoiviin verkkosivustoihin . Kun kyseinen "inline-block" -tyyli on paikoillaan, kukin kolmesta osastasi on erillinen sisällön sarake.
Sarake-leveyden käyttäminen
Käytettävissäsi on myös toinen "sarakemäärän" ominaisuus, ja se riippuu ulkoasun tarpeista. Se voi todellakin olla parempi vaihtoehto sivustollesi. Tämä on "sarake-leveys". Käyttämällä samaa HTML-merkintää aiemmin esitetyllä tavalla, voimme sen sijaan tehdä sen CSS: llä:
.content {-moz-sarakkeen leveys: 500px; -webkit-sarake-leveys: 500px; sarake-leveys: 500px; -moz-sarake-aukko: 30px; -webkit-sarake-aukko: 30px; sarake-aukko: 30px; } .content div {display: inline-block; }Näin toimii, että selain käyttää tätä sarakkeen leveyttä kyseisen sarakkeen maksimiarvona. Joten jos selainikkuna on alle 500 pikseliä leveä, nämä kolme jakautumista näyttävät yhdestä sarakkeesta, toisesta toisesta yläosasta. Tämä on tyypillinen layout, jota käytetään mobiili- / pienoisruudulla.
Koska selaimen leveys kasvaa riittävän suureksi, jotta se sopisi 2 sarakkeen kanssa määritettyjen sarakkeiden aukkojen kanssa, selain siirtyy automaattisesti yhdestä sarakkeen ulkoasusta kahteen sarakkeeseen. Pidä näytön leveyden kasvaessa ja lopulta saat 3 sarakekuvion, ja jokainen 3 jakautumistasi näkyy omassa sarakkeessa. Jälleen tämä on hieno tapa saada reagoivia, monikäyttöisiä sovelluksia, eikä sinun tarvitse edes käyttää mediakyselyjä ulkoasutyylin muuttamiseen!
Muut sarakkeen ominaisuudet
Tässä käsiteltyjen ominaisuuksien lisäksi on myös ominaisuuksia sarakekoodeille, mukaan lukien väri-, tyyli- ja leveysarvot, joiden avulla voit luoda sääntöjä sarakkeiden välillä. Näitä käytetään rajojen sijaan, jos haluat, että jollakin rivillä erotetaan sarakkeet.
Aika kokeilla
Tällä hetkellä CSS Multiple Column Layout -järjestelmää tuetaan hyvin. Etuliitteillä yli 94% verkkokäyttäjistä näkee nämä tyylit ja että tuettu ryhmä olisi oikeastaan vain vanhemmat Internet Explorerin versiot, joita et ehkä enää tue.
Tällä tuetasolla nyt ei ole mitään syytä olla aloittamatta kokeilemalla CSS-sarakkeita ja ottamalla nämä tyylejä käyttöön valmistavissa verkkosivustoissa. Voit aloittaa kokeilut käyttämällä tässä artikkelissa esitettyä HTML- ja CSS-koodia ja pelata eri arvoilla, jotta näet, mikä sopisi parhaiten sivustosi ulkoasun tarpeisiin.