CSS Container Style Queries: Tyyleihin perustuva responsiivinen suunnittelu globaaleihin sovelluksiin

Perinteinen responsiivinen suunnittelu perustuu vahvasti mediakyselyihin, jotka mukauttavat verkkosivuston asettelua ja tyylejä näkymän koon perusteella. Vaikka tämä lähestymistapa on tehokas, se voi johtaa epäjohdonmukaisuuksiin ja vaikeuksiin käsiteltäessä monimutkaisia komponentteja, joiden on mukauduttava erilaisiin konteksteihin samassa näkymässä. CSS Container Style Queries -kyselyt tarjoavat rakeisemman ja intuitiivisemman ratkaisun, joka antaa elementtien reagoida niiden sisältävään elementtiin sovellettuihin tyyleihin, mikä mahdollistaa todella komponenttipohjaisen responsiivisen käyttäytymisen.

Mitä ovat CSS Container Style Queries -kyselyt?

Container Style Queries -kyselyt laajentavat container-kyselyiden tehoa yksinkertaisia kokoon perustuvia ehtoja pidemmälle. Sen sijaan, että tarkistettaisiin säiliön leveyttä tai korkeutta, ne antavat sinun tarkistaa tiettyjen CSS-ominaisuuksien ja arvojen läsnäolon säiliössä. Tämä mahdollistaa komponenttien mukauttaa tyylinsä säiliön kontekstin perusteella, ei vain sen mittojen.

Ajattele sitä tällä tavalla: sen sijaan, että kysyisit "Onko näkymä leveämpi kuin 768 pikseliä?", voit kysyä "Onko tällä säiliöllä asetettuna mukautettu ominaisuus --theme: dark;?". Tämä avaa kokonaan uuden maailman mahdollisuuksia luoda joustavia ja uudelleenkäytettäviä komponentteja, jotka voivat saumattomasti mukautua erilaisiin teemoihin, asetteluihin tai brändivariaatioihin koko verkkosivustollasi tai sovelluksessasi.

Container Style Queries -kyselyiden edut

• Komponenttipohjainen responsiivisuus: Eristä responsiivisuus yksittäisiin komponentteihin, mikä tekee niistä siirrettävämpiä ja uudelleenkäytettävämpiä.
• Vähemmän monimutkainen CSS: Vältä liian tarkkoja mediakyselyitä, jotka kohdistuvat tiettyihin näyttökokoihin.
• Parempi ylläpidettävyys: Komponentin tyylimuutokset vaikuttavat epätodennäköisemmin muihin verkkosivuston osiin.
• Teemoitus ja variaatiot: Luo helposti erilaisia teemoja tai variaatioita komponenteille niiden säiliön tyylien perusteella. Tämä on erityisen hyödyllistä kansainvälisille brändeille, joiden on sovellettava erilaisia brändiohjeita eri alueilla.
• Parannettu saavutettavuus: Komponenttien tyylien mukauttaminen säiliön kontekstin perusteella voi parantaa saavutettavuutta tarjoamalla sopivampia visuaalisia vihjeitä vammaisille käyttäjille.
• Dynaaminen sisällön mukautuminen: Komponentit voivat säätää asetteluaan ja esitystapaansa niiden sisältämän sisällön tyypin perusteella. Kuvittele uutisartikkelin yhteenveto, joka mukautuu sen mukaan, sisältääkö se kuvan vai ei.

Kuinka käyttää CSS Container Style Queries -kyselyitä

Tässä on erittely, kuinka toteuttaa container style -kyselyitä:

1. Säiliön määrittäminen

Ensin sinun on määritettävä elementti säiliöksi. Voit tehdä tämän käyttämällä container-type-ominaisuutta:

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

            

              
                Copy
              
            
          

Arvo inline-size on yleisin ja hyödyllisin, koska se antaa säiliön kysellä sen inline- (vaaka-) kokoa. Voit myös käyttää arvoa size, joka kyselee sekä inline- että block-kokoa. Pelkän size-arvon käyttö voi aiheuttaa suorituskykyongelmia, jos et ole varovainen.

Vaihtoehtoisesti voit käyttää container-type: style, jolloin säiliötä käytetään vain tyylikyselyihin, ei kokokyselyihin, tai container-type: size style molempien käyttöön. Säiliön nimen hallitsemiseksi käytä container-name: my-container ja kohdista se sitten komennolla @container my-container (...).

2. Tyylikyselyiden määrittely

Nyt voit käyttää @container style() -sääntöä määrittääksesi tyylejä, jotka pätevät, kun tietty ehto täyttyy:

            @container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä @container-säännön sisällä olevat tyylit sovelletaan .component-elementtiin vain, jos sen sisältävällä elementillä on --theme-mukautettu ominaisuus asetettuna arvoon dark.

3. Tyylien soveltaminen säiliöön

Lopuksi sinun on sovellettava CSS-ominaisuuksia, joita tyylikyselysi tarkistavat, säiliöelementtiin:

            <div class="container" style="--theme: dark;">
  <div class="component">This is a component. </div>
</div>

            

              
                Copy
              
            
          

Tässä esimerkissä .component-elementillä on tumma tausta ja valkoinen teksti, koska sen säiliöön on sovellettu --theme: dark; -tyyli suoraan HTML:ssä (yksinkertaisuuden vuoksi). Paras käytäntö on soveltaa tyylejä CSS-luokkien kautta. Voit myös käyttää JavaScriptiä muuttaaksesi dynaamisesti säiliön tyylejä, mikä laukaisee tyylikyselyiden päivitykset.

Käytännön esimerkkejä globaaleihin sovelluksiin

1. Teemoitetut komponentit

Kuvittele verkkosivusto, joka tukee useita teemoja. Voit käyttää container style -kyselyitä säätääksesi automaattisesti komponenttien tyyliä aktiivisen teeman perusteella.

            /* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Card Title</h2>
    <p>Card content.</p>
  </div>
</div>

            

              
                Copy
              
            
          

Tässä esimerkissä .card-komponentti vaihtaa automaattisesti tumman ja vaalean teeman välillä säiliönsä --theme-ominaisuuden perusteella. Tämä on erittäin hyödyllistä sivustoilla, joilla käyttäjät voivat valita eri teemoja mieltymystensä mukaan.

2. Asettelun variaatiot

Voit käyttää container style -kyselyitä luodaksesi erilaisia asetteluvaihtoehtoja komponenteille käytettävissä olevan tilan tai sivun yleisen asettelun perusteella. Harkitse kielenvalintakomponenttia. Päänavigaatiossa se voi olla kompakti pudotusvalikko. Alaviitteessä se voisi olla täydellinen luettelo saatavilla olevista kielistä.

            /* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Styles for compact dropdown */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Styles for full list of languages */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

            

              
                Copy
              
            
          

Tämä lähestymistapa on arvokas verkkosivustoille, jotka palvelevat erilaisia käyttöliittymiä eri laitteilla ja alustoilla. Huomioi, että mobiili- ja työpöytäsivustojen rakenteet eroavat usein suuresti, ja tämä voi auttaa komponentteja mukautumaan.

3. Mukautuminen sisällön tyyppiin

Harkitse uutissivustoa, jossa on artikkelitiivistelmiä. Voit käyttää container style -kyselyitä säätääksesi tiivistelmien esitystapaa sen perusteella, sisältävätkö ne kuvan vai eivät.

            /* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (with image) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (without image) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

            

              
                Copy
              
            
          

Tämä mahdollistaa visuaalisesti houkuttelevamman ja informatiivisemman esitystavan artikkelitiivistelmille, mikä parantaa käyttökokemusta. Huomaa, että --has-image-ominaisuuden asettaminen suoraan HTML:ssä ei ole ihanteellista. Parempi lähestymistapa olisi käyttää JavaScriptiä kuvan läsnäolon havaitsemiseen ja dynaamisesti lisäämään tai poistamaan luokan (esim. .has-image) .article-summary-elementistä ja asettamaan sitten --has-image-mukautetun ominaisuuden .has-image-luokan CSS-säännössä.

4. Paikallistettu tyylittely

Kansainvälisillä verkkosivustoilla container style -kyselyitä voidaan käyttää tyylien mukauttamiseen kielen tai alueen perusteella. Saatat esimerkiksi haluta käyttää erilaisia kirjasinkokoja tai välistyksiä kielille, joissa on pidempää tekstiä.

            /* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

            

              
                Copy
              
            
          

Tämä mahdollistaa räätälöidympien ja käyttäjäystävällisempiien kokemusten luomisen eri kieliryhmille. Huomioi, että jotkut kielet, kuten arabia ja heprea, kirjoitetaan oikealta vasemmalle, ja niihin on sovellettava erityisiä tyylejä. Japanin ja muiden Itä-Aasian kielten osalta saatetaan tarvita erilaisia välistyksiä ja kirjasinkokoja merkkien oikeanlaiseen hahmontamiseen.

5. Saavutettavuusnäkökohdat

Container style -kyselyt voivat myös parantaa saavutettavuutta mukauttamalla komponenttien tyylejä käyttäjän mieltymysten tai laitteen ominaisuuksien perusteella. Voit esimerkiksi lisätä komponentin kontrastia, jos käyttäjä on ottanut käyttöön korkean kontrastin tilan käyttöjärjestelmässään.

            /* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

            

              
                Copy
              
            
          

Tämä varmistaa, että verkkosivustosi on käyttökelpoinen ja saavutettavissa kaikille heidän kyvyistään riippumatta. Huomaa @media (prefers-contrast: more) -mediakyselyn käyttö korkean kontrastin tilan havaitsemiseksi käyttöjärjestelmätasolla ja sitten --high-contrast-mukautetun ominaisuuden asettaminen. Tämä mahdollistaa tyylimuutosten laukaisemisen tyylikyselyn avulla käyttäjän järjestelmäasetusten perusteella.

Parhaat käytännöt

• Käytä kuvaavia mukautettujen ominaisuuksien nimiä: Valitse nimiä, jotka ilmaisevat selkeästi ominaisuuden tarkoituksen (esim. --theme --t:n sijaan).
• Pidä tyylikyselyt yksinkertaisina: Vältä monimutkaista logiikkaa tyylikyselyissä luettavuuden ja suorituskyvyn ylläpitämiseksi.
• Aloita vankalta pohjalta: Käytä perinteistä CSS:ää ja mediakyselyitä perusasetteluun ja tyylittelyyn. Container style -kyselyiden tulisi parantaa, ei korvata, olemassa olevaa CSS:ääsi.
• Ota huomioon suorituskyky: Vaikka container style -kyselyt ovat yleensä tehokkaita, ole tietoinen käyttämiesi kyselyiden määrästä ja niiden laukaisemien tyylien monimutkaisuudesta. Ylikäyttö voi vaikuttaa suorituskykyyn, erityisesti vanhemmilla laitteilla.
• Testaa perusteellisesti: Testaa komponenttejasi erilaisissa konteksteissa ja selaimissa varmistaaksesi, että ne mukautuvat oikein.
• Käytä vararatkaisuja: Tarjoa varatyylejä selaimille, jotka eivät vielä täysin tue container style -kyselyitä. Ominaisuuskyselyitä (@supports) voidaan käyttää tyylikyselykoodin ehdolliseen soveltamiseen.
• Dokumentoi komponenttisi: Dokumentoi selkeästi kunkin komponentin käyttötarkoitus ja mukautetut ominaisuudet, joihin se nojaa.
• Ota huomioon periminen (cascade): Muista, että periminen pätee edelleen container style -kyselyiden sisällä. Ole tietoinen spesifisyydestä ja perinnästä, kun määrität tyylejäsi.
• Käytä JavaScriptiä säästeliäästi: Vaikka voit käyttää JavaScriptiä muuttaaksesi dynaamisesti säiliön tyylejä, yritä minimoida sen käyttö. Turvaudu CSS:ään mahdollisimman paljon tyylimuutoksissa.

Selainten tuki

Container style -kyselyillä on erinomainen selainten tuki nykyaikaisissa selaimissa, kuten Chrome, Firefox, Safari ja Edge. Vanhemmat selaimet eivät kuitenkaan välttämättä tue tätä ominaisuutta täysin. Varmista, että käytät ominaisuuskyselyitä tarjotaksesi varatyylejä näille selaimille tai käytä polyfilliä.

Yhteenveto

CSS Container Style Queries -kyselyt tarjoavat tehokkaan ja joustavan lähestymistavan responsiiviseen suunnitteluun, jonka avulla voit luoda aidosti komponenttipohjaisia ja mukautuvia verkkosivustoja ja sovelluksia. Hyödyntämällä säiliöelementtien tyylittelyä voit avata uuden tason hallintaa ja tarkkuutta suunnitelmissasi, mikä johtaa ylläpidettävämpiin, skaalautuvampiin ja käyttäjäystävällisempiin kokemuksiin globaalille yleisölle.

Ota container style -kyselyt käyttöön rakentaaksesi responsiivisia komponentteja, jotka mukautuvat saumattomasti erilaisiin teemoihin, asetteluihin, kieliin ja saavutettavuusvaatimuksiin, luoden todella globaalin verkkokokemuksen.

Resurssit

• MDN Web Docs: CSS Container Queries
• CSS Container Style Queries – a First Look
• Container Style Queries Polyfills