CSS-säilökyselyt: Kattava opas säilökyselyiden määrittelyyn

Responsiivinen web-suunnittelu on kehittynyt merkittävästi. Alun perin mediakyselyt olivat kulmakivi, jotka mahdollistivat asettelujen mukautumisen näkymäportin koon mukaan. Kuitenkin, kun verkkosivustoista tulee yhä monimutkaisempia ja komponenttipohjaisempia, tarve rakeisemmalle ja joustavammalle lähestymistavalle on tullut ilmeiseksi. Tässä CSS-säilökyselyt (CSS Container Queries) astuvat kuvaan.

Mitä ovat CSS-säilökyselyt?

CSS-säilökyselyt antavat kehittäjille mahdollisuuden soveltaa tyylejä elementtiin sen sisältävän elementin koon tai tilan perusteella, näkymäportin sijaan. Tämä perustavanlaatuinen muutos mahdollistaa todella uudelleenkäytettävien ja mukautuvien komponenttien luomisen, jotka integroituvat saumattomasti erilaisiin konteksteihin verkkosivulla.

Kuvittele korttikomponentti, jonka on mukautettava asetteluaan sen mukaan, onko se sijoitettu kapeaan sivupalkkiin vai laajaan pääsisältöalueeseen. Säilökyselyiden avulla tämä mukauttaminen on suoraviivaista, mikä varmistaa optimaalisen esitystavan ympäröivästä kontekstista riippumatta.

Miksi käyttää säilökyselyitä?

• Parempi komponenttien uudelleenkäytettävyys: Komponenteista tulee aidosti itsenäisiä ja mukautuvia, mikä yksinkertaistaa ylläpitoa ja edistää yhtenäisyyttä verkkosivuston eri osissa.
• Tarkempi hallinta: Toisin kuin mediakyselyt, jotka ovat riippuvaisia näkymäportista, säilökyselyt tarjoavat hienojakoista hallintaa tyylittelyyn komponentin tietyn ympäristön perusteella.
• Yksinkertaistettu kehitys: Vähentää tarvetta monimutkaisille JavaScript-ratkaisuille komponenttien tyylittelyn hallitsemiseksi niiden sijainnin perusteella asettelussa.
• Parannettu käyttäjäkokemus: Tarjoa optimaalisia kokemuksia erilaisilla laitteilla ja näyttöko'oilla, varmistaen, että sisältö esitetään aina sopivimmalla tavalla.

Säilön määrittäminen

Ennen kuin voit käyttää säilökyselyitä, sinun on määritettävä, mikä elementti toimii säilönä. Tämä tehdään käyttämällä container-type-ominaisuutta.

container-type-ominaisuus

container-type-ominaisuus määrittelee, onko elementti kyselysäilö, ja jos on, minkä tyyppinen säilö se on. Se hyväksyy seuraavat arvot:

• size: Säilön kyselyehdot perustuvat sen inline-kokoon (leveys vaakasuuntaisissa kirjoitustiloissa, korkeus pystysuuntaisissa kirjoitustiloissa) ja block-kokoon (korkeus vaakasuuntaisissa kirjoitustiloissa, leveys pystysuuntaisissa kirjoitustiloissa). Tämä on yleisin ja monipuolisin vaihtoehto.
• inline-size: Säilön kyselyehdot perustuvat sen inline-kokoon (leveys vaakasuuntaisissa kirjoitustiloissa, korkeus pystysuuntaisissa kirjoitustiloissa).
• normal: Elementti ei ole kyselysäilö. Tämä on oletusarvo.
• style: Elementti on tyylisäilö. Tyylisäilöt paljastavat niille määritellyt mukautetut ominaisuudet jälkeläiselementeille käyttämällä @container style() -kyselyä. Tämä on hyödyllistä tyyliteltäessä mukautettujen ominaisuuksien perusteella.

Esimerkki:

            
.container {
  container-type: size;
}

            

              
                Copy
              
            
          

Tämä koodinpätkä määrittelee elementin, jolla on luokka container, kyselysäilöksi, jolloin sen koko on käytettävissä säilökyselyille.

Vaihtoehtoisesti voit käyttää container: inline-size tai container: size. container-lyhenneominaisuudella voidaan asettaa sekä container-type että container-name yhdellä ilmoituksella. Säilön nimeä käytetään kohdistamaan tiettyyn säilöön, kun säilöjä sisäkkäistetään.

Säilökyselyiden käyttäminen

Kun olet määrittänyt säilön, voit käyttää @container-sääntöä soveltaaksesi tyylejä sen koon tai tilan perusteella.

@container-sääntö

@container-sääntö on samanlainen kuin @media-sääntö, mutta näkymäportin sijaan se kohdistuu tiettyyn säilöön. Syntaksi on seuraava:

            
@container [container-name] (condition) {
  /* Tyylit, joita sovelletaan, kun ehto täyttyy */
}

            

              
                Copy
              
            
          

• container-name (Valinnainen): Jos olet antanut säilöllesi nimen container-name-ominaisuudella, voit määrittää sen tässä kohdistaaksesi kyseiseen säilöön. Jos se jätetään pois, se koskee lähintä esisäilöä.
• condition: Ehto, jonka on täytyttävä, jotta tyylejä sovelletaan. Tämä voi perustua säilön leveyteen, korkeuteen tai muihin ominaisuuksiin.

Esimerkki:

            
.card {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä .card-elementti vaihtaa pystysuuntaisesta asettelusta vaakasuuntaiseen asetteluun, kun sen säilö on vähintään 400 pikseliä leveä. Myös .card__image- ja .card__content-elementit mukauttavat leveyttään vastaavasti.

Säilökysely-yksiköt

Säilökyselyt esittelevät uusia yksiköitä, jotka ovat suhteessa säilön mittoihin:

• cqw: 1 % säilön leveydestä.
• cqh: 1 % säilön korkeudesta.
• cqi: 1 % säilön inline-koosta.
• cqb: 1 % säilön block-koosta.
• cqmin: Pienempi arvoista cqi tai cqb.
• cqmax: Suurempi arvoista cqi tai cqb.

Nämä yksiköt mahdollistavat tyylien luomisen, jotka ovat todella suhteessa säilön kokoon, tehden komponenteistasi entistä mukautuvampia.

Esimerkki:

            
.element {
  font-size: 2cqw;
  padding: 1cqh;
}

            

              
                Copy
              
            
          

Tässä esimerkissä .element-elementin fonttikoko on 2 % säilön leveydestä, ja sen täyte (padding) on 1 % säilön korkeudesta.

Käytännön esimerkkejä

Tutustutaanpa muutamiin käytännön esimerkkeihin siitä, miten säilökyselyitä voidaan käyttää responsiivisten ja mukautuvien komponenttien luomiseen.

Esimerkki 1: Korttikomponentti

Harkitse korttikomponenttia, joka näyttää tietoja tuotteesta. Tämän komponentin saattaa olla tarpeen mukauttaa asetteluaan sen mukaan, mihin se on sijoitettu sivulla.

HTML:

            

  

    
    

      
Tuotteen otsikko
      
Tuotekuvaus tulee tähän.
      Lue lisää
    
  


            

              
                Copy
              
            
          

CSS:

            
.container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 16px;
}

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
    margin-bottom: 0;
    margin-right: 16px;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä .container-elementti on määritelty inline-size-säilöksi. Kun säilö on alle 500 pikseliä leveä, korttikomponentti näyttää kuvan ja sisällön pystysuuntaisessa asettelussa. Kun säilö on 500 pikseliä tai leveämpi, korttikomponentti vaihtaa vaakasuuntaiseen asetteluun, jossa kuva on vasemmalla ja sisältö oikealla. Tämä varmistaa, että korttikomponentti näyttää hyvältä riippumatta siitä, mihin se on sijoitettu sivulla.

Esimerkki 2: Navigaatiovalikko

Toinen yleinen käyttötapaus säilökyselyille on navigointivalikon mukauttaminen käytettävissä olevan tilan mukaan.

HTML:

            

  


            

              
                Copy
              
            
          

CSS:

            
.nav-container {
  container-type: inline-size;
  width: 100%;
  background-color: #f0f0f0;
}

.nav {
  padding: 16px;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav__item {
  margin-bottom: 8px;
}

.nav__link {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

@container (max-width: 400px) {
  .nav__list {
    flex-direction: column;
  }

  .nav__item {
    margin-bottom: 16px;
  }

  .nav__link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä .nav-container-elementti on määritelty inline-size-säilöksi. Kun säilö on 400 pikseliä leveä tai kapeampi, navigointivalikko vaihtaa pystysuuntaiseen asetteluun, jossa kukin linkki vie koko säilön leveyden. Kun säilö on leveämpi kuin 400 pikseliä, navigointivalikko näyttää linkit rivissä, joiden välissä on tilaa. Tämä mahdollistaa navigointivalikon mukautumisen eri näyttökokoihin ja suuntauksiin.

Sisäkkäiset säilöt

Säilökyselyitä voidaan sisäkkäistää, mikä mahdollistaa entistä monimutkaisemman ja tarkemman hallinnan tyylittelyssä. Kohdistaaksesi tiettyyn säilöön sisäkkäistyksessä voit käyttää container-name-ominaisuutta antaaksesi säilöillesi yksilölliset nimet. Sitten @container-säännössäsi voit määrittää sen säilön nimen, johon haluat kohdistaa.

Esimerkki:

            

  

    
Sisältö
  


            

              
                Copy
              
            
          

            
.outer-container {
  container-type: inline-size;
  container-name: outer;
}

.inner-container {
  container-type: inline-size;
  container-name: inner;
}

@container outer (min-width: 500px) {
  .inner-container {
    background-color: lightblue;
  }
}

@container inner (min-width: 300px) {
  p {
    font-size: 1.2rem;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä .outer-container on nimetty "outer" ja .inner-container on nimetty "inner". Ensimmäinen @container-sääntö kohdistuu "outer"-säilöön ja soveltaa taustavärin .inner-container-elementtiin, kun "outer"-säilö on vähintään 500 pikseliä leveä. Toinen @container-sääntö kohdistuu "inner"-säilöön ja suurentaa p-elementin fonttikokoa, kun "inner"-säilö on vähintään 300 pikseliä leveä.

Selaintuki

Säilökyselyillä on erinomainen ja kasvava selaintuki. Useimmat nykyaikaiset selaimet tukevat täysin container-type-, container-name- ja @container-ominaisuuksia. On aina hyvä idea tarkistaa Can I use -sivustolta viimeisimmät yhteensopivuustiedot.

Vanhemmille selaimille, jotka eivät tue säilökyselyitä, voit käyttää polyfill-kirjastoja tarjotaksesi varatukea. On kuitenkin tärkeää huomata, että polyfillit eivät välttämättä täysin jäljittele natiivien säilökyselyiden käyttäytymistä, ja ne voivat lisätä sivun latausaikaa.

Parhaat käytännöt

Tässä on joitakin parhaita käytäntöjä, jotka kannattaa pitää mielessä työskennellessäsi säilökyselyiden kanssa:

• Aloita mobiili edellä: Suunnittele komponenttisi ensin pienimmälle säilökoolle ja käytä sitten säilökyselyitä parantaaksesi progressiivisesti asettelua suuremmille säilöille.
• Käytä merkityksellisiä säilöjen nimiä: Jos sisäkkäistät säilöjä, käytä kuvaavia nimiä, jotka osoittavat selkeästi kunkin säilön tarkoituksen.
• Vältä liian monimutkaisia kyselyitä: Pidä säilökyselysi yksinkertaisina ja kohdennettuina. Liian monet monimutkaiset kyselyt voivat tehdä koodistasi vaikeasti ymmärrettävää ja ylläpidettävää.
• Testaa perusteellisesti: Testaa komponenttejasi erilaisissa säilöko'oissa ja konteksteissa varmistaaksesi, että ne mukautuvat oikein.
• Ota suorituskyky huomioon: Ole tietoinen säilökyselyiden suorituskykyvaikutuksista, erityisesti kun käytät monimutkaisia kyselyitä tai suurta määrää säilöjä.

Saavutettavuusnäkökohdat

Vaikka säilökyselyt keskittyvät pääasiassa visuaalisiin asettelun muutoksiin, on tärkeää ottaa saavutettavuus huomioon varmistaakseen, että komponenttisi pysyvät käyttökelpoisina kaikille.

• Säilytä semanttinen rakenne: Varmista, että taustalla oleva HTML-rakenne pysyy semanttisena ja saavutettavana säilön koosta riippumatta.
• Testaa avustavilla teknologioilla: Testaa komponenttejasi ruudunlukijoilla ja muilla avustavilla teknologioilla varmistaaksesi, että sisältö on edelleen saavutettavissa ja ymmärrettävissä.
• Tarjoa vaihtoehtoista sisältöä: Jos säilön koko muuttaa merkittävästi sisältöä, harkitse vaihtoehtoisen sisällön tai mekanismien tarjoamista varmistaaksesi, että vammaiset käyttäjät voivat päästä käsiksi tietoon.

Koon lisäksi: Tilakyselyt

Vaikka kokoon perustuvat säilökyselyt ovat yleisimpiä, säilökyselyiden tulevaisuus ulottuu pelkkää kokoa pidemmälle. Uusia määrityksiä ja ehdotuksia on olemassa tyylikyselyille (style queries) ja tilakyselyille (state queries).

Tyylikyselyt mahdollistavat tyylien soveltamisen säilöön määriteltyjen mukautettujen ominaisuuksien perusteella. Tämä mahdollistaa tehokkaan tyylittelyn, joka perustuu dynaamiseen dataan ja konfiguraatioon.

Tilakyselyt mahdollistaisivat säilön tilan kyselemisen, kuten onko se kohdistettu, hiiren alla tai onko sillä tietty luokka. Tämä voisi avata vielä enemmän mahdollisuuksia mukautuville komponenteille, jotka reagoivat käyttäjän vuorovaikutukseen.

Johtopäätös

CSS-säilökyselyt ovat tehokas työkalu responsiivisten ja mukautuvien verkkokomponenttien luomiseen. Koska ne mahdollistavat elementtien tyylittelyn niiden sisältävän elementin koon tai tilan perusteella, säilökyselyt tarjoavat rakeisemman ja joustavamman lähestymistavan responsiiviseen suunnitteluun kuin perinteiset mediakyselyt. Selainten tuen jatkuvasti parantuessa säilökyselyistä on tulossa olennainen osa jokaisen web-kehittäjän työkalupakkia. Ota ne käyttöön rakentaaksesi vankempia, uudelleenkäytettävämpiä ja käyttäjäystävällisempiä verkkokokemuksia maailmanlaajuiselle yleisölle.

Säilökyselyiden avaamat mahdollisuudet ulottuvat paljon pidemmälle kuin yksinkertaiset asettelun säädöt. Ne mahdollistavat kontekstitietoisten komponenttien luomisen, jotka voivat mukautua monenlaisiin tilanteisiin, johtaen saumattomampaan ja intuitiivisempaan käyttäjäkokemukseen. Kun tutkit tätä tehokasta ominaisuutta, mieti, miten se voi parantaa verkkoprojektiesi uudelleenkäytettävyyttä, ylläpidettävyyttä ja mukautuvuutta, edistäen lopulta osallistavampaa ja maailmanlaajuisesti saavutettavampaa verkkoa.

Hyödyntämällä säilökyselyiden voimaa voit luoda verkkokokemuksia, jotka eivät ole vain visuaalisesti miellyttäviä, vaan myös erittäin mukautuvia ja käyttäjäkeskeisiä, vastaten maailmanlaajuisen yleisön moninaisiin tarpeisiin.