CSS-säiliökyselyiden pituusyksiköt: Hallitse elementtisuhteellinen laskenta globaalissa suunnittelussa

Jatkuvasti kehittyvässä web-suunnittelun maailmassa todella adaptiivisten ja responsiivisten käyttöliittymien saavuttaminen on aina ollut ensisijainen tavoite. Vaikka näkymäyksiköt, kuten vw ja vh, ovat palvelleet meitä hyvin vuosikymmeniä, ne sitovat muotoilun suoraan selainikkunaan. Tämä lähestymistapa voi olla rajoittava, kun elementtien on mukauduttava oman säiliönsä tilan perusteella koko näkymän sijaan. Tässä astuvat kuvaan CSS-säiliökyselyt (CSS Container Queries), vallankumouksellinen ominaisuus, joka antaa kehittäjille mahdollisuuden muotoilla komponentteja niiden vanhemman säiliön mittojen perusteella. Keskeinen osa tätä voimaa on sen uusi joukko elementtisuhteellisia pituusyksiköitä: cqw, cqh, cqi ja cqb. Tämä kattava opas syventyy näihin yksiköihin, selittää niiden laskennan, käytännön sovellukset ja kuinka niitä voidaan hyödyntää todella globaalissa ja kontekstitietoisessa suunnittelussa.

Näkymäyksiköiden rajoitukset

Ennen kuin syvennymme säiliökyselyiden pituusyksiköiden yksityiskohtiin, on tärkeää ymmärtää, miksi ne ovat tarpeellisia. Näkymäyksiköt (vw, vh, vmin, vmax) määrittelevät pituudet prosenttiosuutena näkymästä. Esimerkiksi 1vw on 1 % näkymän leveydestä ja 1vh on 1 % näkymän korkeudesta.

Vaikka nämä yksiköt ovat tehokkaita kokonaisten asettelujen tekemisessä responsiivisiksi, ne eivät vastaa yksittäisten komponenttien tarpeisiin. Harkitse navigaatiopalkkia, jonka on säädettävä fonttikokoaan tai välistystään sen vanhemman nav-elementin leveyden perusteella, ei selainikkunan. Jos navigaatio on upotettu sivupalkkiin, jolla on kiinteä leveys, vw-yksikön käyttäminen sen fonttikokoon johtaisi epäjohdonmukaiseen ja usein virheelliseen skaalaukseen näkymän muuttuessa. Komponentin sisäinen asettelu saattaa muuttua ahtaaksi tai liian väljäksi riippumatta sille todellisuudessa käytettävissä olevasta tilasta.

Tämä rajoitus korostuu entisestään monimutkaisissa, kansainvälistetyissä käyttöliittymissä, joissa komponentit saattavat olla sijoitettuina erilaisiin joustaviin asetteluihin, tai kun käsitellään erilaisia näyttökokoja ja kuvasuhteita globaalille yleisölle. Suunnittelijat ja kehittäjät turvautuvat usein JavaScriptiin mittaamaan säiliöiden mittoja ja soveltamaan tyylejä dynaamisesti, mikä on vähemmän suorituskykyistä ja vaikeampaa ylläpitää.

Esittelyssä CSS-säiliökyselyt ja pituusyksiköt

CSS-säiliökyselyt, jotka esiteltiin @container-säännön myötä, mahdollistavat tyylien soveltamisen elementtiin sen lähimmän esivanhemman mittojen perusteella, jolla on määritelty säiliökonteksti (yleensä asetetaan container-type- tai container-ominaisuudella). Tämä ajattelutavan muutos tarkoittaa, että komponenttimme voivat nyt reagoida välittömään ympäristöönsä, mikä mahdollistaa uuden tason hienojakoisen hallinnan responsiivisessa suunnittelussa.

Tämän säiliöpohjaisen responsiivisuuden mahdollistamiseksi on esitelty uusi joukko pituusyksiköitä:

• cqw (Container Width): 1 % säiliön inline-koosta.
• cqh (Container Height): 1 % säiliön block-koosta.
• cqi (Container Inline Size): Vastaa cqw-yksikköä.
• cqb (Container Block Size): Vastaa cqh-yksikköä.

Nämä yksiköt on suunniteltu vastaamaan näkymä-vastineitaan (vw ja vh), mutta ne lasketaan suhteessa säiliön mittoihin näkymän mittojen sijaan.

"Inline"- ja "Block"-koon ymmärtäminen

Termit "inline"- ja "block"-koko ovat perustavanlaatuisia näiden uusien yksiköiden ymmärtämisessä. Ne ovat abstrakteja, suunnasta riippumattomia termejä, joita käytetään CSS Writing Modes Level 3 -määrittelyssä:

• Inline-akseli: Akseli, jota pitkin teksti virtaa. Vaakasuuntaisissa kirjoitustiloissa (kuten englanti) tämä on leveys. Pystysuuntaisissa kirjoitustiloissa (kuten perinteinen japani) tämä on korkeus.
• Block-akseli: Akseli, joka on kohtisuorassa inline-akseliin nähden. Vaakasuuntaisissa kirjoitustiloissa tämä on korkeus. Pystysuuntaisissa kirjoitustiloissa tämä on leveys.

Siksi:

• cqi (Container Inline Size) viittaa 1 %:iin säiliön mitasta inline-akselia pitkin. Englannin kielelle (vaakasuuntainen kirjoitustila) tämä vastaa 1 %:a säiliön leveydestä.
• cqb (Container Block Size) viittaa 1 %:iin säiliön mitasta block-akselia pitkin. Englannin kielelle tämä vastaa 1 %:a säiliön korkeudesta.

Näiden abstraktien termien käyttöönotto varmistaa, että säiliökysely-yksiköt toimivat johdonmukaisesti eri kirjoitustiloissa ja tekstin suunnissa, mikä on ratkaisevan tärkeää globaaleissa sovelluksissa, joissa sisältöä saatetaan näyttää eri kielillä ja suuntauksilla.

Säiliökyselyiden pituusyksiköiden laskeminen

Laskutoimitus on yksinkertainen:

• 1cqw = Säiliön leveys / 100
• 1cqh = Säiliön korkeus / 100
• 1cqi = Säiliön inline-koko / 100 (Vastaa 1cqw-yksikköä vaakasuuntaisissa kirjoitustiloissa)
• 1cqb = Säiliön block-koko / 100 (Vastaa 1cqh-yksikköä vaakasuuntaisissa kirjoitustiloissa)

Havainnollistetaan esimerkillä. Jos säiliöelementin laskettu leveys on 500 pikseliä ja laskettu korkeus on 300 pikseliä:

• 10cqw olisi (500px / 100) * 10 = 50px.
• 25cqh olisi (300px / 100) * 25 = 75px.
• 50cqi olisi (500px / 100) * 50 = 250px.
• 100cqb olisi (300px / 100) * 100 = 300px.

On tärkeää huomata, että nämä yksiköt ovat dynaamisia. Jos säiliön mitat muuttuvat (esim. koonmuutostapahtuman tai asetteluun vaikuttavan sisällön lisäämisen/poistamisen vuoksi), kaikki näitä yksiköitä käyttävät CSS-ominaisuudet lasketaan automaattisesti uudelleen ja päivittyvät vastaavasti.

Käytännön sovellukset globaalissa suunnittelussa

cqw-, cqh-, cqi- ja cqb-yksiköiden voima piilee niiden kyvyssä luoda erittäin mukautuvia komponentteja, jotka reagoivat välittömään kontekstiinsa. Tämä on korvaamatonta kansainvälisessä web-kehityksessä.

1. Typografia eri kielille

Eri kielillä on vaihtelevia merkkileveyksiä ja lausepituuksia. Fonttikoko, joka toimii täydellisesti lyhyelle englanninkieliselle lauseelle, voi olla liian suuri pitkälle saksankieliselle lauseelle tai liian pieni kompaktille itäaasialaiselle merkistölle samassa komponentissa. Säiliökysely-yksiköiden käyttö font-size-ominaisuudelle mahdollistaa tekstin sulavan skaalautumisen komponentin käytettävissä olevan vaakasuuntaisen tilan mukaan.

Esimerkki: Korttikomponentti, joka näyttää artikkelien otsikoita.

            .card {
  container-type: inline-size;
  width: 300px; /* Esimerkki kortin kiinteästä leveydestä */
}

.card-title {
  font-size: 2.5cqw; /* Fonttikoko skaalautuu kortin leveyden mukaan */
  line-height: 1.4;
}

/* Esimerkkikysely pienemmille korteille */
@container (max-width: 200px) {
  .card-title {
    font-size: 3cqw; /* Hieman suurempi fontti kapeammille korteille luettavuuden säilyttämiseksi */
  }
}

            

              
                Copy
              
            
          

Tässä skenaariossa, jos .card-elementti on 300 pikseliä leveä, otsikon fonttikoko on 2.5% 300 pikselistä, eli 7.5px. Jos kortti kutistuu 200 pikseliin, fonttikooksi tulee 3% 200 pikselistä, eli 6px. Tämä varmistaa, että teksti pysyy luettavana ja oikein suhteutettuna kortin rajojen sisällä, mukautuen sulavasti pidempään tai lyhyempään sisältöön.

2. Välistys- ja asettelumuutokset

Komponenttien sisäisiä täytteitä (padding), marginaaleja (margin) ja välejä (gap) voidaan säätää dynaamisesti. Tämä on erityisen hyödyllistä elementeille, kuten navigaatiovalikoille, lomakekentille tai kuvagallerioille, joissa välistyksen on mukauduttava komponentin säiliön leveyteen.

Esimerkki: Responsiivinen navigaatiovalikko joustavassa sivupalkissa.

            .sidebar {
  container-type: inline-size;
  width: 25%; /* Esimerkki: Sivupalkki vie 25 % vanhemman elementin leveydestä */
}

.nav-link {
  padding: 1cqw 1.5cqw; /* Täyte skaalautuu sivupalkin leveyden mukaan */
  margin-bottom: 1cqw;
}

.nav-icon {
  width: 3cqw; /* Kuvakkeen koko suhteessa sivupalkin leveyteen */
  height: auto;
}

            

              
                Copy
              
            
          

Kun sivupalkin leveys muuttuu (ehkä siksi, että pääsisältöalueen kokoa muutetaan), navigaatiolinkkien täytteet ja kuvakkeiden koot mukautuvat automaattisesti, säilyttäen johdonmukaisen visuaalisen hierarkian suhteessa käytettävissä olevaan tilaan.

3. Kuvan ja median kuvasuhteet

Vaikka kuvasuhdeominaisuudet ja sisäinen mitoitus ovat tehokkaita, joskus media täytyy mukauttaa suoremmin säiliönsä mittoihin, erityisesti kun säiliö itse on ensisijainen responsiivisuuden ajuri.

Esimerkki: Hero-kuva, jonka tulisi täyttää säiliönsä leveys, mutta säilyttää tietty kuvasuhde suhteessa kyseiseen leveyteen.

            .hero-section {
  container-type: inline-size;
  width: 100%;
}

.hero-image {
  width: 100%;
  height: 50cqh; /* Kuvan korkeus on 50 % hero-osion korkeudesta */
  object-fit: cover;
}

            

              
                Copy
              
            
          

Tässä 50cqh varmistaa, että kuvan korkeus on aina puolet sen säiliön korkeudesta. Jos säiliö on korkea ja kapea, kuva heijastaa sitä. Jos säiliö on matala ja leveä, kuva mukautuu myös. Tämä sopii erinomaisesti globaalisti yhdenmukaisiin hero-bannereihin tai taustakuviin.

4. Monimutkaisten komponenttien mukauttaminen (esim. datataulukot)

Datataulukot ovat tunnettuja responsiivisuushaasteistaan, erityisesti monien sarakkeiden ja eri kielten kanssa. Säiliökysely-yksiköt voivat auttaa hallitsemaan sarakkeiden leveyksiä, fonttikokoja ja solujen täytteitä.

Esimerkki: Taulukko, jonka sarakkeiden leveydet mukautuvat taulukon kokonaisleveyden mukaan.

            .data-table-container {
  container-type: inline-size;
  overflow-x: auto; /* Tärkeä taulukoille */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header,
.table-cell {
  padding: 1.5cqw;
  font-size: 1.2cqw;
}

/* Suhteellisten leveyksien määrittäminen tietyille sarakkeille */
.column-name {
  width: 25cqi; /* 25 % taulukkosäiliön inline-koosta */
}

.column-value {
  width: 75cqi; /* 75 % taulukkosäiliön inline-koosta */
}

            

              
                Copy
              
            
          

Tässä esimerkissä täytteet, fonttikoot ja sarakkeiden leveydet on kaikki määritelty suhteessa .data-table-container-elementtiin. Kun säiliö kapenee tai levenee, taulukon sisäinen asettelu mukautuu suhteellisesti, mikä tekee siitä luettavamman eri taukopisteissä ja eri alueiden käyttäjille, jotka saattavat kohdata eripituisia tietoja.

5. Pystysuuntaisten kirjoitustilojen käsittely

Sovelluksille, jotka tukevat pystysuuntaisia kirjoitustiloja (esim. perinteinen kiina, japani), ero cqi:n ja cqb:n välillä tulee kriittisen tärkeäksi. Pystysuuntaisessa kirjoitustilassa inline-akseli on pystysuuntainen ja block-akseli on vaakasuuntainen.

Tarkastellaan pystysuuntaista navigaatiovalikkoa:

            body {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.vertical-nav {
  container-type: inline-size; /* Säiliön inline-koko on nyt sen korkeus */
  height: 100vh; /* Esimerkki */
  width: 100px; /* Esimerkki */
}

.nav-item {
  padding: 1cqi 2cqi; /* Täyte suhteessa säiliön korkeuteen (inline-koko) */
  margin-bottom: 1cqi; /* Marginaali suhteessa säiliön korkeuteen */
}

.nav-icon {
  width: auto; /* Automaattinen leveys */
  height: 3cqi; /* Kuvakkeen korkeus skaalautuu säiliön korkeuden mukaan */
}

            

              
                Copy
              
            
          

Tässä asetelmassa 1cqi viittaisi 1 %:iin säiliön korkeudesta, kun taas 1cqw viittaisi 1 %:iin säiliön leveydestä. Tämä varmistaa, että muotoilu pysyy kontekstuaalisesti oikeana kirjoitustilasta riippumatta, mikä on merkittävä etu globaaleille sovelluksille.

Selaintuki ja huomioitavat asiat

Säiliökyselyt, pituusyksiköt mukaan lukien, ovat suhteellisen uusia, mutta ne ovat saavuttaneet laajan selaintuen. Vuoden 2023 lopulla ja 2024 alussa modernit selaimet, kuten Chrome, Firefox, Safari ja Edge, tarjoavat erinomaisen tuen.

Tärkeitä huomioita:

• Selainyhteensopivuus: Tarkista aina ajantasaiset selaintukitiedot. Vanhemmille selaimille, jotka eivät tue säiliökyselyitä, tarvitset varamenetelmän, joka usein sisältää JavaScriptiä tai yksinkertaisempia CSS-mediakyselyitä.
• container-type ja container-name: Jotta säiliökysely-yksiköitä voi käyttää, vanhemman elementin on luotava säiliökonteksti. Tämä tehdään tyypillisesti käyttämällä container-type: normal; (joka oletusarvoisesti käyttää inline-size-mitoitusakselia) tai container-type: inline-size; tai container-type: size;. Voit myös nimetä säiliöitä käyttämällä container-name-ominaisuutta kohdistaaksesi tiettyihin esivanhempiin.
• Suorituskyky: Vaikka yleisesti ottaen suorituskykyisiä, ole tietoinen liian monimutkaisista laskelmista tai liian monista dynaamiseen koonmuutokseen perustuvista elementeistä. Useimmissa tyypillisissä skenaarioissa suorituskyky ei ole ongelma.
• Varamenetelmät: Käytä @supports-kyselyitä tarkistaaksesi säiliökyselyiden tuen ja tarjotaksesi vaihtoehtoisia tyylejä tarvittaessa.

            .my-component {
  /* Varamenetelmä vanhemmille selaimille */
  width: 100%;
  padding: 15px; /* Kiinteä täyte */
  font-size: 16px; /* Kiinteä fonttikoko */
}

@container (min-width: 500px) {
  @supports (container-type: inline-size) {
    .my-component {
      /* Säiliökyselytyylit korvaavat varamenetelmät */
      padding: 2cqw;
      font-size: 3cqw;
    }
  }
}

            

              
                Copy
              
            
          

CSS:n jäsentäminen säiliökyselyitä varten

Yleinen toimintamalli on määrittää säiliökonteksti vanhemmalle elementille ja käyttää sitten säiliökyselyitä lapsielementtien tyylittelyyn.

Malli 1: Inline-säiliön mitoitus

Tämä on yleisin käyttötapaus, jossa komponentit mukautuvat leveyteensä perustuen.

            .component-wrapper {
  container-type: inline-size;
  width: 100%; /* Tai mikä tahansa muu leveys */
}

.component-content {
  font-size: 2cqw;
  padding: 1cqw;
}

@container (max-width: 400px) {
  .component-content {
    font-size: 3cqw;
    padding: 1.5cqw;
  }
}

            

              
                Copy
              
            
          

Malli 2: Block-säiliön mitoitus

Hyödyllinen elementeille, joiden on mukauduttava korkeutensa perusteella, kuten sticky-otsikoille tai kiinteän korkeuden elementeille flex- tai grid-asettelussa.

            .vertical-spacer {
  container-type: block-size;
  height: 50vh;
}

.vertical-content {
  margin-top: 5cqb;
}

            

              
                Copy
              
            
          

Malli 3: Yhdistetty mitoitus (käyttäen size)

Jos sinun tarvitsee viitata sekä säiliön leveyteen että korkeuteen, käytä container-type: size;.

            
.aspect-ratio-box {
  container-type: size;
  width: 100%;
  height: 300px;
}

.inner-element {
  width: 100%;
  /* Aseta korkeudeksi 50 % säiliön leveydestä, säädettynä 20 %:lla sen korkeudesta */
  height: calc(50cqw + 20cqb);
}

            

              
                Copy
              
            
          

Yksinkertaisen skaalauksen tuolla puolen: Edistyneet tekniikat

Todellinen voima tulee esiin, kun yhdistät säiliökysely-yksiköitä muihin CSS-ominaisuuksiin, kuten calc(), clamp() ja mediakyselyihin.

1. calc()-funktion käyttö säiliöyksiköiden kanssa

Yhdistä säiliöyksiköitä kiinteisiin yksiköihin tai muihin suhteellisiin yksiköihin hienovaraisemman hallinnan saavuttamiseksi.

Esimerkki: Painike, joka säilyttää vähimmäistäytteen, mutta skaalaa fonttikokoaan.

            
.action-button {
  container-type: inline-size;
  display: inline-block;
  padding: 10px 2cqw; /* Kiinteä pystysuuntainen täyte, dynaaminen vaakasuuntainen täyte */
  font-size: clamp(14px, 2.5cqw, 20px); /* Rajoita fonttikoko 14px ja 20px välille */
}

            

              
                Copy
              
            
          

2. Responsiivinen suunnittelu globaaleille komponenteille

Kun suunnittelet komponentteja globaalille yleisölle, mieti, miten erilaiset sisällön pituudet, merkistöt ja jopa käyttöliittymäasetukset voivat vaikuttaa komponenttiin. Säiliökyselyt ovat liittolaisesi.

• Monikielinen tuki: Varmista, että teksti pysyy luettavana ja komponentit eivät hajoa pidemmillä tai lyhyemmillä käännöksillä.
• Saavutettavuus: Käyttäjien tekstikokoasetukset voidaan ottaa paremmin huomioon, kun komponentit skaalautuvat kontekstuaalisesti.
• Suorituskyvyn optimointi: Kuvien tai monimutkaisten grafiikoiden osalta säiliökyselyt voivat auttaa varmistamaan, että ne sopivat niille varattuun tilaan ilman liiallisia latauksia tai asettelun muutoksia.

Yhteenveto

CSS-säiliökyselyiden pituusyksiköt – cqw, cqh, cqi ja cqb – edustavat merkittävää harppausta eteenpäin responsiivisessa web-suunnittelussa. Mahdollistamalla elementtisuhteellisen yksiköiden laskennan ne antavat kehittäjille vallan luoda erittäin mukautuvia komponentteja, jotka reagoivat älykkäästi omaan asettelukontekstiinsa globaalin näkymän sijaan.

Globaalissa web-kehityksessä nämä yksiköt ovat korvaamattomia. Ne mahdollistavat vankemman typografian skaalautumisen eri kielillä, joustavat välistysmuutokset sisäkkäisissä asetteluissa ja yhdenmukaiset kuvasuhteet medialle, kunnioittaen samalla eri kirjoitustiloja. Säiliökyselyiden ja niihin liittyvien pituusyksiköiden omaksuminen johtaa kestävämpiin, ylläpidettävämpiin ja käyttäjäystävällisempiin käyttöliittymiin yleisöille maailmanlaajuisesti.

Aloita kokeileminen näillä yksiköillä seuraavassa projektissasi. Huomaat, että ne avaavat uuden tason hallintaa ja eleganssia responsiivisen suunnittelun työnkulkuihisi, tehden verkkosivustoistasi todella mukautuvia mihin tahansa säiliöön, missä päin maailmaa tahansa.