CSS-säilökyselyiden avulla voit käyttää tyylejä, jotka perustuvat komponentin säilön kokoon koko näkymän sijaan.
Mediakyselyt olivat pitkään ainoa tapa saada käyttöliittymäsuunnittelu reagoimaan erikokoisille näytöille. Mutta silläkin oli rajoituksensa. Yksi mediakyselyiden käytön suurimmista ongelmista oli se, että elementin tyyliä voitiin muokata vain näytön koon muutosten perusteella, ei sen lähintä säilöelementtiä.
Tämän ongelman ratkaisemiseksi otettiin käyttöön säilökyselyt. He ovat myös lisänneet suosiota Reactin ja Vue.js: n kaltaisten puitteiden myötä, jotka toimivat luomalla modulaarisia käyttöliittymän "komponentteja". Opi käyttämään säilökyselyitä reagoivien elementtien luomiseen CSS: ään.
Tässä artikkelissa käytetty koodi on saatavilla tässä GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.
Miksi sinun pitäisi käyttää CSS-säiliökyselyitä?
Ymmärtääksesi säilökyselyiden tärkeyden, käytetään esimerkkiä, joka helpottaa käsitteen ymmärtämistä. Mutta ensin sinun on kloonattava aloituskoodi tästä GitHub-arkisto.
Kun olet kloonannut repon onnistuneesti, suorita koodi. Löydät seuraavan kuvan kaltaisen verkkosivun:
Tässä on ruudukkoasettelu, jossa on kaksi saraketta: pääosa ja sivupalkki. Pääosio näyttää hyvältä, mutta sivupalkki (joka on paljon pienempi kuin pääsisältö) näyttää hieman litistyneeltä.
Asettelu on responsiivinen. Kun pienennät selainta, voit nähdä, että kortti muuttuu pystysuoraksi sarakkeeksi:
Toisin sanoen, kun sisältö alkaa muuttua lukukelvottomaksi, asettelu muuttuu pystysuoraksi sarakkeeksi, jossa kuva pinotaan sisällön päälle. Tämä vaikutus johtuu mediakyselyistä, mikä on ainoa tapa määrittää elementtien koko näytön koko koon perusteella.
Tässä tapauksessa aina kun näyttösi on alle 800 pikseliä, pinoat kaiken päällekkäin käyttämällä Flexbox-linjaus. Suuremmilla näytöillä sijoitamme sisällön vierekkäin:
@media(maksimileveys: 800 pikseliä) {
.kortti {
flex-suunta: sarakkeessa;
}
.card-header {
leveys: 100%;
}
}Mediakyselyt ovat olleet pisimpään yksi tärkeimmistä web-suunnittelun periaatteet responsiivisten asettelujen luomiseen CSS: n avulla (ja se on riittänyt useimpiin asioihin). Mutta törmäät varmasti skenaarioihin, joissa mediakyselyt eivät vain riitä tai eivät ainakaan ole kätevä ratkaisu.
Yksi näistä skenaarioista on, kun sinulla on sivupalkki (kuten teemme yllä olevassa esimerkissä). Näissä tapauksissa, joissa sinulla on sivupalkki, sinun on valittava sivupalkkikortti suoraan ja yritettävä pienentää sitä:
.sivupalkki.kortti {
/* Pienennä sivupalkkikorttia */
}
@media(maksimileveys: 800 pikseliä) {
/* Tyyli sivu, kun näyttö on kapeampi kuin 800 pikseliä */
}
Se voi olla melko monimutkaista, jos työskentelet monien elementtien kanssa, koska sinun on valittava kaikki elementit manuaalisesti ja muutettava niiden kokoa. Saat enemmän koodia ja monimutkaisempaa.
Tässä säilökyselyistä voi olla hyötyä. Sen sijaan, että sinun on pakko käyttää näkymääsi kokoina, voit käyttää mitä tahansa sivullasi olevaa elementtiä säilönä. Säilöllä voi sitten olla omat leveytensä, joiden perusteella voit perustaa mediakyselysi.
Säiliökyselyn luominen
Luodaksesi säilökyselyn aloitat kohdistamalla elementtiin, jota haluat käyttää säilönä (tässä tapauksessa pääosaan ja sivupalkkiin). Lohkon sisällä sinun on asetettava konttityyppinen to rivin kokoinen:
pää, .sivupalkki {
konttityyppinen: rivin kokoinen
}
Kun tallennat CSS-tiedoston, mikään sivulla ei muutu. Mutta nyt voit käyttää säilökyselyitä muuttaaksesi pää- ja sivupalkkiosion sisäkkäisten korttien kokoa ja tyyliä. Seuraavassa säilökyselyssä muutat kortit pystysarakkeiksi näytöillä, joiden leveys on enintään 500 kuvapistettä:
@kontti(maksimileveys: 500 pikseliä) {
.kortti {
flex-suunta: sarakkeessa;
}
.card-header {
leveys: 100%;
}
}
Tämä toimii normaalina mediakyselynä. Mutta sen sijaan, että mittaisit näytön kokoa, mittaat säilöjesi kokoa (pää- ja sivupalkin osiot). Joten nyt, kun säilösi on 500 pikseliä tai enemmän, käytät vaakanäkymää. Muussa tapauksessa käytät pystysuoraa (oletus flexboxille).
Yllä olevasta kuvasta näet, että sivupalkki on pystysuora, koska se on pienempi kuin 500 kuvapistettä. Pääsisältö säilyttää vaakasuuntaisen asettelunsa, koska se on suurempi kuin 500 pikseliä. Jos pienennät selaimesi, sivupalkki ja pääsisältö käyttävät pystysuuntaista kohdistusta, kun ne saavuttavat 500 pikseliä tai vähemmän.
Säilökysely on uskomattoman tehokas, koska sen avulla voit muuttaa asioiden kokoa säilön perusteella koko selaimen leveyden sijaan. Tämä on erityisen hyödyllistä käsiteltäessä komponentteja (kuten Reactissa tai Vuessa).
Säilökyselyillä voit helposti muuttaa käyttöliittymäkomponenttien kokoa niiden säilön perusteella, jolloin voit luoda täysin itsenäisiä komponentteja.
Säilöjen nimeäminen
Kun luot a @kontti kyselyssä, se etsii ensin sen elementin säilöä, johon kohdistat kyselyssä. Meidän tapauksessamme tämä olisi pääsäiliö ja sivupalkin säiliö.
Ja vaikka kortit olisivat toisen säiliön sisällä, se vain jättäisi muut säiliöt huomioimatta ja valitsee vain itseään lähinnä olevan kontin. Tämä on osa laajempaa CSS-konsepti, joka tunnetaan nimellä CSS-valitsimet.
Seuraavassa esimerkissä olemme muuttaneet body-elementin säilöksi:
kehon {
konttityyppinen: rivin kokoinen;
}
Nyt meillä on kolme erillistä konttia: runko-, pää- ja sivuosasto. Oletuksena säilökyselyssä kohdistamamme kortit ovat lähempänä pääosiota tai sivupalkkia kuin runkoa. Joten se käyttää pää- ja sivupalkkiosia säilöinä säilökyselylle.
Tämän toiminnan ohittamiseksi sinun on tehtävä kaksi asiaa. Ensin sinun on annettava body-elementille säilön nimi:
kehon {
konttityyppinen: rivin kokoinen;
kontin nimi: kehon;
}
Kun luot säilökyselyn, sinun on määritettävä sen jälkeen säilön nimi @kontti.
@kontti keho (suurin leveys:1000 pikseliä){
/* CSS-säännöt, jotka kohdistavat body-säilöön */
}
Tästä on hyötyä, jos haluat käyttää tiettyä elementtiä säilönä sen sijaan, että se olisi kohdistamaasi elementtiä lähinnä oleva säilö. Toisin sanoen voit valita minkä tahansa kontin ja hienosäätää asetteluasi.
Konttiyksiköt
Toinen konttien hieno ominaisuus on, että voit käyttää konttiyksiköitä. Nämä yksiköt toimivat aivan kuten näyttöikkunayksiköt (ne ovat kaikki täsmälleen samantyyppisiä yksiköitä). Kuitenkin konttiyksiköt käyttävät cqw (leveyden asettamiseen) ja cqh (korkeuden säätöön). Nämä yksiköt määrittävät säiliösi tarkan leveyden ja korkeuden.
CSS-säilökyselyiden avulla voit käyttää tiettyjä elementtejä mediakyselyjesi viitepisteinä. Tämä tekniikka on varsin kätevä luotaessa modulaarisia, itsenäisiä elementtejä, jotka voivat seistä itsenäisesti riippumatta siitä, missä säiliössä ne ovat. Mutta säilökyselyt käyttävät samoja periaatteita kuin mediakyselyt, ja tämä on asia, joka sinun tulee hallita, jos haluat olla yhden prosentin CSS-kehittäjä.