Monta vuotta, CSS kelluu ovat olleet hieno, mutta välttämätön komponentti verkkosivujen asettelujen luomisessa. Jos suunnittelu vaati useita sarakkeita, kääntyit kellukkeiksi. Tämän menetelmän ongelmana on, että huolimatta uskomattomasta kekseliäisyydestä, jonka web-suunnittelijat / kehittäjät ovat osoittaneet monimutkaisten sivustojen luomisessa asettelut, CSS-kellukkeita ei koskaan ollut tarkoitus käyttää tällä tavalla.
Vaikka kellukkeilla ja CSS-paikannuksella on varmasti paikka web-suunnittelussa monien vuosien ajan, uudempi ulkoasu tekniikat, kuten CSS Grid ja Flexbox, antavat nyt web-suunnittelijoille uusia tapoja luoda sivustoasettelunsa. Toinen uusi asettelutekniikka, joka näyttää paljon potentiaalia, on CSS Multiple Columns.
CSS-sarakkeet ovat olleet olemassa jo muutaman vuoden ajan, mutta vanhemmissa (pääasiassa vanhemmissa) selaimissa ei ole tukea Internet Explorer -versiot) on estänyt monia verkkoammattilaisia käyttämästä näitä tyylejä tuotannossaan työ.
IE: n vanhempien versioiden tuen loppuessa jotkut web-suunnittelijat kokeilevat nyt uutta CSS-asettelua vaihtoehdot, mukaan lukien CSS-sarakkeet ja havaittu, että heillä on niin paljon enemmän hallintaa näillä uusilla lähestymistavoilla kuin he tekivät kelluu.
CSS-sarakkeiden perusteet
Kuten nimestään käy ilmi, CSS: n useita sarakkeita (tunnetaan myös nimellä CSS3 usean sarakkeen asettelu) avulla voit jakaa sisällön määritettyyn sarakemäärään. Peruskäyttöisimmät CSS-ominaisuudet ovat:
- sarakemäärä
- sarakeväli
Sarakemäärää varten määrität haluamasi sarakemäärän. Pylväsrako olisi kourut tai väli näiden pylväiden välillä. Selain ottaa nämä arvot ja jakaa sisällön tasaisesti määrittämäsi sarakemäärään.
Yleinen esimerkki CSS: n useista sarakkeista käytännössä olisi lohko tekstisisältöä jakaa useiksi sarakkeiksi, samanlainen kuin sanomalehtiartikkeli. Oletetaan, että sinulla on seuraava HTML-merkintä (huomaa, että olemme esimerkiksi kirjoittaneet vain alkupuolen yksi kappale, vaikka käytännössä tässä merkinnässä todennäköisesti olisi useita kappaleita sisältöä):
Artikkelisi otsikko.
Kuvittele paljon tekstikappaleita täällä ...
Jos sitten kirjoitit nämä CSS-tyylit:
.sisältö {
-moz-sarakemäärä: 3;
-webkit-sarake-määrä: 3;
sarakemäärä: 3;
-moz-sarakeväli: 30 kuvapistettä;
-webkit-sarake-aukko: 30px;
sarakeväli: 30 kuvapistettä;
}
Tämä CSS-sääntö jakoi "sisältö" -jakauman kolmeen yhtä suureen sarakkeeseen, joiden välissä on 30 pikselin rako. Jos haluat kaksi saraketta kolmen sijaan, muutat yksinkertaisesti arvoa ja selain laskee sarakkeiden uudet leveydet jakamaan sisällön tasaisesti. Huomaa, että käytämme ensin toimittajan etuliitettyjä ominaisuuksia, joita seuraavat etuliitetyt ilmoitukset.
Niin helppoa kuin se onkin, sen käyttö tällä tavalla on kyseenalaista verkkosivustojen käytössä. Kyllä, voit jakaa joukon sisältöä useisiin sarakkeisiin, mutta tämä ei välttämättä ole paras lukema kokemus verkosta, varsinkin jos näiden sarakkeiden korkeus putoaa -näyttö.
Lukijoiden olisi sitten vieritettävä ylös ja alas lukeakseen koko sisältö. Silti CSS-sarakkeiden pääosa on yhtä helppoa kuin näet täällä, ja sitä voidaan käyttää tekemään paljon enemmän kuin vain jakamaan joidenkin kappaleiden sisältö - sitä voidaan todellakin käyttää asettelussa.
Asettelu CSS-sarakkeilla
Oletetaan, että sinulla on verkkosivu, jonka sisältöalueella on 3 saraketta sisältöä. Tämä on hyvin yleinen verkkosivuston asettelu, ja näiden kolmen sarakkeen saavuttamiseksi kellutat yleensä osastot, jotka ovat. CSS: n useiden sarakkeiden avulla se on niin paljon helpompaa.
Tässä on esimerkki HTML: stä:
Blogistamme.
Sisältö menisi tänne ...
Tulevat tapahtumat.
Sisältö menisi tänne ...
CSS näiden useiden sarakkeiden luomiseksi alkaa siitä, mitä näit aiemmin:
.sisältö {
-moz-sarakemäärä: 3;
-webkit-sarake-määrä: 3;
sarakemäärä: 3;
-moz-sarakeväli: 30 kuvapistettä;
-webkit-sarake-aukko: 30px;
sarakeväli: 30 kuvapistettä;
}
Nyt haasteena on, että selain haluaa jakaa tämän sisällön tasaisesti, joten jos näiden jakojen sisällön pituus on erilainen, kyseinen selain todella jakaa tietyn sisällön yksittäinen jako, lisäämällä sen alku yhteen sarakkeeseen ja jatkaen sitten toiseen (näet tämän käyttämällä tätä koodia kokeilun suorittamiseen ja lisäämällä eri pituutta sisältöä kuhunkin jako).
Se ei ole mitä haluat. Haluat, että jokainen näistä jakoista luo erillisen sarakkeen, ja riippumatta siitä, kuinka suuri tai pieni yksittäisen jaon sisältö voi olla, et koskaan halua sen jakautuvan. Voit saavuttaa tämän lisäämällä tämän yhden ylimääräisen CSS-rivin:
.content div {
näyttö: inline-block;
}
Tämä pakottaa "sisällön" sisällä olevat jaot pysymään ehjinä, vaikka selain jakaa sen useaan sarakkeeseen. Vielä parempi, koska emme antaneet tälle mitään kiinteää leveyttä, näiden sarakkeiden koko muuttuu automaattisesti, kun selain muuttaa kokoa, mikä tekee niistä ihanteellisen sovelluksen reagoivat verkkosivustot. Kun tämä "inline-block" -tyyli on paikallaan, kukin kolmesta osastostasi on erillinen sisällön sarake.
Sarakkeen leveyden käyttäminen
Sarakelaskennan lisäksi on toinen ominaisuus, jota voit käyttää, ja asettelutarpeistasi riippuen se voi olla oikea valinta sivustollesi. Tämä on sarakkeen leveys. Käyttämällä samaa HTML-merkintää kuin aiemmin on esitetty, voimme tehdä sen CSS: llä:
.sisältö {
-moz-sarakkeen leveys: 500px;
-webkit-sarakkeen leveys: 500px;
sarakkeen leveys: 500px;
-moz-sarakeväli: 30 kuvapistettä;
-webkit-sarake-aukko: 30px;
sarakeväli: 30 kuvapistettä;
}
.content div {
näyttö: inline-block;
}
Tämä toimii siten, että selain käyttää tätä sarakkeen leveyttä sarakkeen enimmäisarvona. Joten jos selainikkuna on alle 500 pikseliä leveä, nämä 3 jakoa näkyvät yhdessä sarakkeessa, toisen päällä. Tämä on tyypillinen ulkoasu, jota käytetään mobiili- / pieninäyttöasettelussa.
Kun selaimen leveys kasvaa riittävän suureksi, jotta siihen mahtuu 2 saraketta määritettyjen sarakevälien kanssa, selain siirtyy automaattisesti yhden sarakkeen asettelusta kahteen sarakkeeseen. Lisää näytön leveyttä jatkuvasti ja lopulta saat 3 sarakkeen mallin, jossa jokainen 3 jaostamme näkyy omassa sarakkeessaan. Tämä on jälleen hieno tapa saada reagoivia, monilaitteinen ulkoasuja, eikä sinun tarvitse edes käyttää niitä mediakyselyt muuttaa asettelutyyliä!
Muut sarakkeen ominaisuudet
Tässä käsiteltyjen ominaisuuksien lisäksi on myös sarakkeen säännön ominaisuuksia, mukaan lukien väri-, tyyli- ja leveysarvot, joiden avulla voit luoda sääntöjä sarakkeiden väliin. Näitä käytetään reunojen sijaan, jos haluat, että sarakkeesi erottavat joitain rivejä.
Aika kokeilla
Tällä hetkellä CSS Multiple Column Layout on erittäin tuettu. Etuliitteillä yli 94% verkkokäyttäjistä voisi nähdä nämä tyylit, ja tuettu ryhmä olisi oikeastaan vain paljon vanhempia Internet Explorerin versioita, joita ei enää tueta.
Kun tämä tukitaso on nyt käytössä, ei ole mitään syytä olla aloittamatta kokeilua CSS-sarakkeissa ja näiden tyylien sijoittamista tuotantovalmiille verkkosivustoille. Voit aloittaa kokeilusi tässä artikkelissa esitetyillä HTML- ja CSS-tiedostoilla ja pelata eri arvoilla nähdäksesi, mikä toimisi parhaiten sivustosi asettamistarpeisiin.