CSS @container: Konttikyselyiden hallinta modernissa responsiivisessa suunnittelussa

Jatkuvasti kehittyvässä verkkosuunnittelun maailmassa todella responsiivisten käyttöliittymien saavuttaminen, jotka mukautuvat välittömään ympäristöönsä pelkän näkymän sijaan, on ollut pitkäaikainen tavoite. Historiallisesti CSS-mediakyselyt ovat olleet responsiivisen suunnittelun kulmakivi, mahdollistaen tyylien räätälöinnin selainikkunan mittojen perusteella. Tämä lähestymistapa asettaa kuitenkin rajoituksia yksittäisten komponenttien tyylittelylle suuremmassa asettelussa. Tässä astuu kuvaan CSS @container, voimakas uusi sääntö, joka mullistaa tapamme lähestyä responsiivista suunnittelua mahdollistamalla konttikyselyt.

Näkymäpohjaisen responsiivisuuden rajoitukset

Vuosien ajan verkkosivustojen responsiiviseksi tekemisen pääasiallinen menetelmä on perustunut näkymäpohjaisiin mediakyselyihin. Nämä kyselyt, kuten @media (min-width: 768px), antavat kehittäjille mahdollisuuden soveltaa erilaisia tyylejä selainikkunan leveyden mukaan. Tämä on ollut uskomattoman tehokasta luotaessa asetteluja, jotka mukautuvat sulavasti erilaisiin näyttökokoihin, suurista työpöytänäytöistä pienempiin mobiililaitteisiin.

Kuvittele kuitenkin tilanne, jossa sinulla on komponentti, kuten tuotekortti tai sivupalkin widget, jonka täytyy näyttää erilaiselta sen mukaan, kuinka paljon tilaa se vie monimutkaisemmassa asettelussa. Pelkästään näkymäpohjaisilla mediakyselyillä tämän komponentin tehokas tyylittely muuttuu haastavaksi. Jos tuotekortti ilmestyy leveässä, monisarakkeisessa asettelussa työpöydällä, se saattaa tarvita erilaisen esitystavan kuin silloin, kun se ilmestyy kapeassa, yksisarakkeisessa asettelussa tabletilla, vaikka yleinen näkymän leveys pysyisi samana. Tämä johtuu siitä, että komponentin kontti sanelee sen optimaalisen renderöinnin, ei pelkästään globaali näkymän koko.

Tarve komponenttitason responsiivisuudelle on johtanut kiertoteihin, jotka usein sisältävät JavaScriptin käyttöä elementtien mittojen mittaamiseen ja luokkien lisäämiseen, tai monimutkaisia CSS-sisäkkäisyyksiä, jotka voivat muuttua hallitsemattomiksi. CSS @container pyrkii ratkaisemaan nämä ongelmat tuomalla käyttöön natiivin CSS-ratkaisun.

Esittelyssä CSS @container: Konttikyselysääntö

CSS @container esittelee konttikyselyiden käsitteen. Sen sijaan, että kysyttäisiin näkymän ominaisuuksia, konttikyselyt antavat meille mahdollisuuden kysyä elementin ylätason kontin ominaisuuksia, joka on nimenomaisesti määritelty kyselykontiksi.

Ajattele sitä näin: Sen sijaan, että kysyisimme "Kuinka leveä selainikkuna on?", voimme nyt kysyä "Kuinka leveä on elementti, joka sisältää tämän komponentin?". Tämä siirtää painopisteen globaalista kontekstista (näkymä) paikalliseen kontekstiin (vanhempi elementti tai nimetty kontti).

Kyselykontin määrittäminen

Konttikyselyiden käyttämiseksi sinun on ensin nimettävä HTML-elementti kyselykontiksi. Tämä saavutetaan käyttämällä container-type-ominaisuutta. Tämä ominaisuus kertoo selaimelle, että tätä elementtiä tulisi pitää viitekohtana sen jälkeläisiin kohdistuville konttikyselyille.

Yleisin arvo container-type-ominaisuudelle on normal. Tyylittelytarkoituksiin käytät kuitenkin usein arvoja inline-size tai size.

• container-type: normal;: Tämä on oletusarvo. Se luo kyselykontin, mutta ei välttämättä luo uutta sisältävää lohkoa sijoittelua varten, eikä se oletusarvoisesti mahdollista kokokyselyitä. Yleensä tämä on yhdistettävä muihin ominaisuuksiin täyden toiminnallisuuden saavuttamiseksi.
• container-type: inline-size;: Tämä on yleisimmin käytetty arvo responsiivisille komponenteille. Se luo kyselykontin, jonka inline-ulottuvuutta (leveys vaakasuuntaisissa kirjoitustiloissa tai korkeus pystysuuntaisissa kirjoitustiloissa) voidaan kysellä. Tämä sopii täydellisesti komponenteille, joiden on mukauduttava niiden vaakasuuntaisen tilan mukaan.
• container-type: size;: Tämä luo kyselykontin, jota voidaan kysellä sekä sen inline-ulottuvuuden että sen block-ulottuvuuden (korkeus vaakasuuntaisissa kirjoitustiloissa, leveys pystysuuntaisissa kirjoitustiloissa) perusteella. Tämä on hyödyllistä komponenteille, joiden on mukauduttava sekä leveyden että korkeuden rajoituksiin.

Voit myös määrittää kontin nimen käyttämällä container-name-ominaisuutta. Tämän avulla voit kohdistaa kyselyt tiettyihin kontteihin, kun komponenttipuussa on useita kyselykontteja, estäen tahattoman tyylittelyn.

Esimerkki: Kyselykontin asettaminen

            
.product-card-container {
  container-type: inline-size;
  container-name: product-card;
  width: 50%; /* Esimerkkileveys itse kontille */
  margin: 20px;
  border: 1px solid #ccc;
  padding: 15px;
}

            

              
                Copy
              
            
          

Tässä esimerkissä elementti, jolla on luokka .product-card-container, on nyt kyselykontti nimeltä 'product-card', ja sen inline-kokoa (leveyttä) voidaan kysellä.

Konttikyselyiden kirjoittaminen

Kun elementti on nimetty kyselykontiksi, voit käyttää @container-sääntöä soveltaaksesi tyylejä sen jälkeläisiin kontin ominaisuuksien perusteella. Syntaksi on samankaltainen kuin mediakyselyissä, mutta se käyttää avainsanaa container sanan media sijaan.

Syntaksi:

            
@container [<name> | <family>] <condition> {
  /* Sovellettavat CSS-säännöt */
}

            

              
                Copy
              
            
          

• [<name> | <family>] (Valinnainen): Määrittää kyseltävän kontin nimen tai perheen. Jos se jätetään pois, se kyselee mitä tahansa konttia, jolle on määritelty container-type.
• <condition>: Tässä määrität kontin ominaisuudet, joita haluat kysellä. Yleisiä ehtoja ovat width, height, inline-size, block-size, aspect-ratio, orientation ja resolution.

Esimerkki: Tyylien soveltaminen tuotekorttiin sen kontin sisällä

            
.product-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Kysely kontille nimeltä 'product-card' */
@container product-card (min-width: 400px) {
  .product-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .product-card img {
    margin-right: 20px;
    margin-bottom: 0;
  }
}

@container product-card (min-width: 600px) {
  .product-card {
    padding: 30px;
  }

  .product-card h3 {
    font-size: 1.8em;
  }
}

            

              
                Copy
              
            
          

Tässä kattavassa esimerkissä:

• .product-card-container on asetettu kyselykontiksi.
• Sen sisällä oleva .product-card-elementti saa oletustyylit.
• Kun .product-card-container on vähintään 400 pikseliä leveä, .product-card vaihtaa rivipohjaiseen flex-asetteluun, tasaa tekstin vasemmalle ja säätää kuvan marginaaleja.
• Kun .product-card-container on vähintään 600 pikseliä leveä, .product-card-elementin täytettä ja otsikon fonttikokoa säädetään edelleen.

Tämä osoittaa, kuinka yksi komponentti voi mukauttaa sisäistä asetteluaan ja tyyliään pelkästään sen vanhempikontin käytettävissä olevan tilan perusteella, ilman riippuvuutta yleisestä näkymän koosta.

Keskeiset konttikyselyominaisuudet ja -ominaisuudet

Perus-@container-säännön ja container-type-ominaisuuden lisäksi on useita muita liittyviä ominaisuuksia ja ominaisuuksia, jotka parantavat konttikyselyiden tehoa:

1. container-name

Kuten aiemmin mainittiin, container-name antaa sinun määrittää yksilöllisen tunnisteen kyselykontille. Tämä on ratkaisevan tärkeää, kun sinulla on sisäkkäisiä komponentteja tai useita itsenäisiä komponentteja sivulla, joilla kullakin voi olla omat konttikyselymääritelmänsä.

Esimerkki:

            
.sidebar {
  container-type: inline-size;
  container-name: sidebar-queries;
}

.main-content {
  container-type: inline-size;
  container-name: main-content-queries;
}

@container sidebar-queries (min-width: 200px) {
  /* Tyylit elementeille sivupalkin kontin sisällä */
}

@container main-content-queries (min-width: 700px) {
  /* Tyylit elementeille pääsisällön kontin sisällä */
}

            

              
                Copy
              
            
          

2. Eri konttiakselien kysely

Konttikyselyt voivat kohdistua paitsi kontin inline- (tyypillisesti leveys) myös block- (tyypillisesti korkeus) ulottuvuuksiin. Tämä on erityisen hyödyllistä komponenteille, joiden on mukauduttava sekä leveyden että korkeuden rajoituksiin.

• width / inline-size: Kyselyt perustuvat kontin vaakasuuntaiseen ulottuvuuteen.
• height / block-size: Kyselyt perustuvat kontin pystysuuntaiseen ulottuvuuteen.
• aspect-ratio: Kyselyt perustuvat kontin leveyden ja korkeuden suhteeseen.
• orientation: Kyselyt perustuvat siihen, onko kontin inline-size suurempi tai yhtä suuri kuin sen block-size (portrait) vai pienempi (landscape).

Esimerkki block-size-ominaisuuden käytöstä:

            
.chart-container {
  container-type: size;
  container-name: chart;
  height: 300px;
}

.chart {
  /* Kaavion oletustyylit */
}

@container chart (min-height: 250px) {
  .chart {
    /* Säädöt korkeammille kaavioille */
    font-size: 1.1em;
  }
}

@container chart (orientation: landscape) {
  .chart {
    /* Säädöt leveämmille kuin korkeille kaavioille */
    transform: rotate(90deg);
  }
}

            

              
                Copy
              
            
          

3. Konttikysely-yksiköt

Konttikyselyt tuovat mukanaan uusia CSS-yksiköitä, jotka ovat suhteellisia kyselykontin mittoihin, samankaltaisia kuin näkymäyksiköt (vw, vh), mutta erityisiä kontille.

• cqw: 1 % kontin inline-koosta.
• cqh: 1 % kontin block-koosta.
• cqi: Vastaa cqw:tä.
• cqb: Vastaa cqh:ta.
• cqmin: Pienempi arvoista cqi tai cqb.
• cqmax: Suurempi arvoista cqi tai cqb.

Nämä yksiköt ovat uskomattoman tehokkaita luotaessa tiiviisti sidottuja komponenttityylejä, jotka skaalautuvat suhteessa niiden kontteihin.

Esimerkki:

            
.product-card-container {
  container-type: inline-size;
}

.product-card h3 {
  font-size: 2.5cqi; /* Fonttikoko skaalautuu kontin inline-koon mukaan */
  margin-bottom: 1cqi;
}

.product-card p {
  font-size: 1.2cqi;
}

            

              
                Copy
              
            
          

Tässä esimerkissä .product-card-elementin sisällä olevan otsikon ja kappaleen fonttikoot säätyvät automaattisesti niiden vanhempikontin leveyden mukaan, varmistaen luettavuuden eri komponenttikoissa.

4. contain-ominaisuus (ja sen suhde container-type-ominaisuuteen)

CSS:n contain-ominaisuus ei ole suoraan osa konttikyselysyntaksia, mutta se on erittäin relevantti. Se kertoo selaimelle elementin sisällöstä auttaakseen selainta optimoimaan renderöinnin. Kun asetat container-type-arvoksi inline-size tai size, se viittaa eräänlaiseen eristämiseen. Selain tietää, että tämän kontin sisällä olevat tyylit ovat riippuvaisia sen koosta, eikä sen tarvitse renderöidä uudelleen sivun asiaankuulumattomia osia, kun kontti muuttaa kokoaan.

Erityisesti container-type: inline-size; on lyhenne, joka implisiittisesti asettaa contain: layout style inline-size;. Tämä on ratkaiseva suorituskyvyn optimointi.

Käytännön käyttötapaukset ja globaalit esimerkit

Konttikyselyiden monipuolisuus tekee niistä sovellettavia monenlaisiin tilanteisiin, erityisesti globaaleille yleisöille, joissa moninaiset asettelut ja laitekontekstit ovat yleisiä.

1. Responsiiviset navigaatiovalikot

Navigaatioelementtien on usein mukauduttava vaakasuorasta listasta suurilla näytöillä supistettuun hampurilaisvalikkoon pienemmillä näytöillä. Konttikyselyiden avulla navigaatiokomponentti voidaan sijoittaa joustavaan sivupalkkiin tai ylätunnisteeseen, ja se voi itsenäisesti säätää asetteluaan kyseisen sivupalkin tai ylätunnisteen leveyden perusteella, riippumatta yleisestä näkymän koosta.

Globaali skenaario: Kuvittele kansainvälinen verkkokauppasivusto, jossa tuotekategoriat saatetaan näyttää sivupalkissa työpöydällä Euroopassa, mutta kapeammassa osiossa mobiililaitteella Aasiassa. Konttitietoinen navigaatiokomponentti varmistaa, että se näytetään aina optimaalisesti välittömässä kontekstissaan.

2. Mukautuvat käyttöliittymäkomponentit (painikkeet, kortit, lomakkeet)

Yleiset käyttöliittymäelementit, kuten painikkeet, kortit ja lomakekentät, voivat hyötyä valtavasti. Tuotekortti saattaa näyttää tiedot vierekkäin, kun sen kontti on leveä, mutta pinota ne pystysuoraan, kun kontti on kapea. Painike saattaa muuttaa täytettään tai tekstikokoaan.

Globaali skenaario: Matkanvarausalusta saattaa näyttää lentotiedot kompaktissa korttimuodossa hakutulosten luettelossa. Jos tämä luettelo sijoitetaan kapeaan sivupalkkiin tabletilla, kortin tulisi mukauttaa asetteluaan pystysuuntaisemmaksi. Jos se on leveämmällä pääsisältöalueella, se voi näyttää enemmän tietoa vaakasuunnassa.

3. Monimutkaiset asettelut ja kojelaudat

Kojelaudat, joissa on useita widgettejä, tai monimutkaiset artikkeli-asettelut hyötyvät komponenteista, jotka voivat uudelleenjärjestäytyä ja -tyylittyä sen sarakkeen mukaan, jossa ne sijaitsevat. Tämä mahdollistaa tarkemman hallinnan tiedon esittämisessä.

Globaali skenaario: Talousuutisten kojelaudalla voisi olla useita widgettejä, jotka näyttävät osakekursseja, markkina-analyysejä ja uutissyötteitä. Jokainen widget voi olla kyselykontti, joka varmistaa, että osakesymbolin näyttö, kaavion responsiivisuus tai uutiskatkelman pituus säätyvät oikein sen perusteella, mikä leveys kyseiselle widgetille on varattu kojelaudan ruudukkojärjestelmässä.

4. Tulostustyylit ja viety sisältö

Vaikka mediakyselyitä käytetään tyypillisesti tulostukseen, konttikyselyt voivat myös auttaa hallitsemaan komponenttien tyylittelyä, kun sisältöä viedään tai tulostetaan, varmistaen yhdenmukaisuuden 'kontin' (esim. tietyn sivun leveyden tulostustyylisivussa) perusteella.

5. Suunnittelujärjestelmät ja uudelleenkäytettävät komponentit

Konttikyselyt ovat mullistavia suunnittelujärjestelmille. Kehittäjät voivat luoda todella itsenäisiä ja uudelleenkäytettäviä komponentteja, joita ei tarvitse erikseen mukauttaa jokaiseen mahdolliseen asetteluun. Komponentin tyyli on luonnostaan sidottu sen konttiin, mikä tekee siitä ennustettavamman ja helpommin toteutettavan eri projekteissa ja konteksteissa.

Globaali skenaario: Globaali yritys, joka rakentaa uutta sisäistä portaalia, voi hyödyntää suunnittelujärjestelmää, jossa on konttitietoisia komponentteja. Esimerkiksi painikekomponentti voidaan suunnitella näyttämään hyvältä riippumatta siitä, onko se kapeassa modaali-ikkunassa, leveässä alatunnisteessa vai tavallisessa lomakekentässä, ilman että jokaiseen skenaarioon tarvitaan erityisiä luokkia.

Selainten tuki ja toteutus

Konttikyselyt ovat suhteellisen uusi CSS-ominaisuus. Vaikka selainten tuki paranee nopeasti, on olennaista tarkistaa viimeisimmät yhteensopivuustaulukot tuotantokäyttöä varten.

• Chrome/Edge: Tuki on ollut saatavilla jo jonkin aikaa, vaatien aluksi usein lipun asettamista, mutta on nyt laajalti tuettu.
• Firefox: Tuki on saatavilla.
• Safari: Tuki on saatavilla.
• Muut selaimet: Tuki kasvaa, mutta varmista aina kohdeyleisösi osalta.

Selaimille, jotka eivät tue konttikyselyitä, sinun on toteutettava varasuunnitelma. Tämä tarkoittaa usein JavaScriptin käyttöä tuen havaitsemiseen ja perinteisemmän näkymäpohjaisen responsiivisen kokemuksen tarjoamista, tai vanhempien CSS-tekniikoiden käyttöä.

Varasuunnitelman esimerkki (käsitteellinen):

            
.product-card-container {
  container-type: inline-size;
  /* Komponentin oletustyylit */
  display: flex;
  flex-direction: column;
}

/* Varasuunnitelma mediakyselyillä selaimille, jotka eivät tue konttikyselyitä */
@media (min-width: 400px) {
  .product-card-container {
    /* Vastaavat tyylit kuin @container (min-width: 400px) */
    flex-direction: row;
  }
}

/* Konttikyselykohtaiset tyylit */
@container (min-width: 400px) {
  .product-card-container {
    /* Erityiset tyylit, kun kontti on 400px+ leveä */
    /* Nämä ylikirjoittavat mediakyselyn varasuunnitelman, jos tuettu */
  }
}

            

              
                Copy
              
            
          

Yleinen lähestymistapa on antaa konttikyselyiden olla etusijalla, jos ne ovat tuettuja, ja tarjota vähemmän yksityiskohtainen mutta silti toimiva responsiivinen kokemus mediakyselyiden kautta vanhemmille selaimille.

Parhaat käytännöt ja vinkit konttikyselyiden käyttöön

Jotta voit hyödyntää konttikyselyiden täyden tehon tehokkaasti ja ylläpitää vankkaa, ylläpidettävää koodikantaa:

• Määritä kontit nimenomaisesti: Aseta aina container-type elementeille, joiden tulisi toimia kyselykontteina. Älä luota implisiittiseen käyttäytymiseen.
• Käytä nimiä selkeyden vuoksi: Käytä container-name-ominaisuutta, kun käsittelet sisäkkäisiä tai useita itsenäisiä kontteja nimien yhteentörmäysten välttämiseksi ja varmistaaksesi, että kyselyt kohdistuvat oikeisiin elementteihin.
• Ajattele komponenttikeskeisesti: Suunnittele ja rakenna komponenttisi konttikyselyt mielessä. Mieti, miten ne käyttäytyvät eri konttikooissa.
• Käytä konttikysely-yksiköitä viisaasti: cqw, cqh jne. ovat tehokkaita skaalautuville komponenteille. Käytä niitä fonttikokoihin, väleihin ja muihin mittoihin, joiden tulisi mukautua suhteellisesti.
• Yhdistä mediakyselyihin: Konttikyselyt eivät korvaa kaikkia mediakyselyitä. Käytä mediakyselyitä yleiseen sivun asetteluun, koko sivuston typografiaan ja saavutettavuusominaisuuksiin, ja konttikyselyitä komponenttitason responsiivisuuteen.
• Testaa perusteellisesti: Testaa komponenttejasi eri konttikooissa ja selainympäristöissä varmistaaksesi, että ne käyttäytyvät odotetusti. Muuta selainikkunan kokoa, käytä kehittäjätyökaluja simuloidaksesi eri elementtikokoja ja tarkista yhteensopivuus.
• Harkitse suorituskykyä: Vaikka konttikyselyt voivat parantaa suorituskykyä eristämällä tyylittelyn, ole tietoinen liian monimutkaisista sisäkkäisyyksistä tai liian monista kyselykonteista, jos niitä ei hallita oikein.
• Progressiivinen parantaminen: Varmista, että sivustosi pysyy käyttökelpoisena ja esitettävänä selaimissa, jotka eivät tue konttikyselyitä, tarjoamalla sulavat vararatkaisut.

Johtopäätös: Responsiivisen suunnittelun uusi aikakausi

CSS @container edustaa merkittävää harppausta eteenpäin responsiivisessa verkkosuunnittelussa. Mahdollistamalla kehittäjille tyylien luomisen, jotka ovat kontekstitietoisia komponenttitasolla, konttikyselyt avaavat uuden tason suunnittelun joustavuudelle ja modulaarisuudelle. Tämä mahdollistaa todella mukautuvien käyttöliittymien luomisen, jotka ovat vankempia, helpompia ylläpitää ja sopivat paremmin monenlaisille laitteille ja asetteluille, joita globaali yleisö kohtaa.

Kun selainten tuki jatkaa kypsymistään, konttikyselyiden omaksumisesta tulee yhä tärkeämpää modernien, hienostuneiden ja yleisesti saavutettavien verkkokokemusten rakentamisessa. Ota tämä voimakas työkalu käyttöösi ja määrittele uudelleen, miten lähestyt responsiivista suunnittelua todella yhdistyneessä maailmassa.