CSS-säiliökysely-yksiköt: Opas elementtikohtaiseen mitoitukseen responsiivisessa suunnittelussa

Responsiivinen web-suunnittelu on kehittynyt merkittävästi vuosien varrella. Vaikka näkymäportin kokoon perustuvat mediakyselyt ovat edelleen kulmakivi, CSS-säiliökyselyt (CSS Container Queries) tarjoavat hienojakoisemman ja komponenttikeskeisemmän lähestymistavan. Säiliökyselyt mahdollistavat tyylien soveltamisen perustuen säiliönä toimivan elementin kokoon, koko näkymäportin sijaan. Säiliökyselyiden sisällä säiliökysely-yksiköt vievät tämän hienojakoisuuden vielä pidemmälle, mahdollistaen elementtien mitoittamisen suhteessa niiden säiliöön.

Mitä ovat säiliökysely-yksiköt?

Säiliökysely-yksiköt (CQ-yksiköt) ovat CSS-yksiköiden joukko, jotka edustavat prosenttiosuutta säiliöelementin koosta. Nämä yksiköt tarjoavat tehokkaan tavan luoda komponentteja, jotka mukautuvat sulavasti erilaisiin säiliökokoihin riippumatta yleisestä näkymäportin koosta. Kuvittele navigointivalikko, joka mukauttaa asetteluaan sivupalkin käytettävissä olevan tilan mukaan, tai tuotekortti, joka säätää fonttikokoaan ja kuvan kokoaan ruudukkoasettelussa olevan säiliönsä leveyden perusteella. CQ-yksiköt tekevät tällaisista mukautuvista suunnitelmista huomattavasti helpompia toteuttaa.

Toisin kuin näkymäportin yksiköt (vw, vh, vmin, vmax), jotka ovat suhteessa näkymäporttiin, säiliökysely-yksiköt ovat suhteessa kyselysäiliöön. Tämä tarkoittaa, että sama komponentti voi renderöityä eri tavalla sovelluksesi eri osissa, mukautuen kunkin säiliön erityisiin rajoituksiin.

Keskeiset säiliökysely-yksiköt

On olemassa kuusi pääasiallista säiliökysely-yksikköä, jotka peilaavat näkymäportin yksiköiden käyttäytymistä:

• cqw: 1 % kyselysäiliön leveydestä.
• cqh: 1 % kyselysäiliön korkeudesta.
• cqi: 1 % kyselysäiliön inline-koosta. Inline-koko vastaa leveyttä horisontaalisissa kirjoitustiloissa (kuten suomi) ja korkeutta vertikaalisissa kirjoitustiloissa (kuten perinteinen mongolia).
• cqb: 1 % kyselysäiliön block-koosta. Block-koko vastaa korkeutta horisontaalisissa kirjoitustiloissa ja leveyttä vertikaalisissa kirjoitustiloissa.
• cqmin: 1 % kyselysäiliön pienemmästä ulottuvuudesta (joko inline-koko tai block-koko).
• cqmax: 1 % kyselysäiliön suuremmasta ulottuvuudesta (joko inline-koko tai block-koko).

On tärkeää ymmärtää ero cqw/cqh ja cqi/cqb välillä, erityisesti työskenneltäessä kansainvälistämisen (i18n) ja lokalisaation (l10n) parissa, koska kirjoitustilat voivat vaikuttaa siihen, mihin fyysisiin ulottuvuuksiin nämä yksiköt viittaavat. cqi ja cqb on suunniteltu loogisemmiksi, kunnioittaen dokumentin tai säiliön kirjoitustilaa.

Säiliökyselyiden määrittäminen

Ennen kuin voit käyttää säiliökysely-yksiköitä, sinun on määritettävä elementti kyselysäiliöksi. Tämä tehdään käyttämällä CSS-ominaisuutta container-type.

Ominaisuudelle container-type on kaksi pääarvoa:

• size: Säiliö luo kyselysäiliön ja laskee säiliön koon inline- ja block-ulottuvuuksien perusteella. Tämä on yleisin arvo CQ-yksiköitä käytettäessä.
• inline-size: Säiliö luo kyselysäiliön, mutta vain inline-kokoa käytetään kyselyissä. Hyödyllinen, kun välitetään vain leveydestä horisontaalisissa kirjoitustiloissa.

Voit myös käyttää lyhenneominaisuutta container asettaaksesi sekä container-type että container-name (jonka avulla voit kohdistaa tiettyihin säiliöihin):

            .container {
  container: my-container size;
}

            

              
                Copy
              
            
          

Tässä esimerkissä olemme luoneet kyselysäiliön nimeltä "my-container". Voit sitten kohdistaa tähän säiliöön CSS:ssäsi käyttämällä @container at-sääntöä:

            @container my-container (min-width: 300px) {
  /* Tyylit, joita sovelletaan, kun säiliön leveys on vähintään 300px */
}

            

              
                Copy
              
            
          

Käytännön esimerkkejä säiliökysely-yksiköistä

Tutkitaanpa joitakin käytännön tilanteita, joissa säiliökysely-yksiköt voivat merkittävästi parantaa responsiivisen suunnittelun työnkulkuasi.

Esimerkki 1: Mukautuva tuotekortti

Kuvittele tuotekortti, jonka on mukautettava asetteluaan käytettävissä olevan tilan mukaan. Haluamme fonttikoon ja kuvan koon skaalautuvan suhteessa säiliön leveyteen.

            .product-card {
  container-type: size;
  width: 100%;
  border: 1px solid #ccc;
  padding: 16px;
}

.product-card img {
  width: 40cqw; /* 40 % säiliön leveydestä */
  height: auto;
}

.product-card h2 {
  font-size: 5cqw; /* 5 % säiliön leveydestä */
  margin-bottom: 8px;
}

.product-card p {
  font-size: 3cqw; /* 3 % säiliön leveydestä */
}

            

              
                Copy
              
            
          

Tässä esimerkissä kuvan leveys, otsikon fonttikoko ja kappaleen fonttikoko on määritelty käyttäen cqw-yksikköä. Kun tuotekortin säiliön koko muuttuu, nämä elementit skaalautuvat suhteellisesti, säilyttäen yhtenäisen visuaalisen ilmeen.

Globaali merkitys: Tämä esimerkki on yleismaailmallisesti sovellettavissa, koska tuotekortit ovat yleinen elementti verkkokauppa-alustoilla maailmanlaajuisesti. Myitpä tuotteita Pohjois-Amerikassa, Euroopassa, Aasiassa tai Afrikassa, tuotekorttien responsiivinen mukauttaminen on ratkaisevan tärkeää.

Esimerkki 2: Dynaaminen navigointivalikko

Harkitse navigointivalikkoa, jonka on säädettävä asetteluaan sen mukaan, onko se pääotsikossa vai pienemmässä sivupalkissa. Voimme käyttää säiliökyselyitä vaihtaaksemme vaaka- ja pystysuoran asettelun välillä.

            .navigation {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap; /* Salli kohteiden rivittyä tarvittaessa */
  gap: 10px;
}

.navigation a {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  white-space: nowrap; /* Estä tekstin rivittyminen */
}

@container (max-width: 400px) {
  .navigation {
    flex-direction: column;
    align-items: stretch;
  }

  .navigation a {
    display: block;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

Tässä tapauksessa käytämme säiliökyselyä max-width-ehdolla. Kun säiliön leveys on 400 pikseliä tai vähemmän, navigointivalikko vaihtaa pystysuoraan asetteluun. Huomaa, että välitämme vain säiliön inline-koosta, mistä syystä käytämme `container-type: inline-size;`

Globaali merkitys: Navigointivalikot ovat olennainen osa verkkosivuston käytettävyyttä. Tarve responsiiviselle navigoinnille on yleismaailmallinen, kohdeyleisöstä tai maantieteellisestä sijainnista riippumatta.

Esimerkki 3: Datataulukon mukauttaminen

Datataulukot ovat tunnetusti vaikeita tehdä responsiivisiksi. Säiliökyselyt yhdistettynä CQ-yksiköihin voivat auttaa meitä luomaan joustavampia taulukoita, jotka mukautuvat pienempiin säiliöihin.

            .data-table-container {
  container-type: size;
  overflow-x: auto; /* Salli vaakasuuntainen vieritys pienillä näytöillä */
}

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

.data-table th, .data-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 3cqw; /* Mukauta fonttikoko säiliön leveyteen */
  white-space: nowrap; /* Estä rivinvaihdot */
}

@container (max-width: 600px) {
  .data-table th, .data-table td {
    font-size: 4cqw; /* Hieman suurempi fonttikoko pienemmissä säiliöissä */
  }
}

            

              
                Copy
              
            
          

Tässä käytämme cqw-yksikköä skaalaamaan fonttikokoa taulukon soluissa. Mahdollistamme myös vaakasuuntaisen vierityksen säiliössä käyttämällä `overflow-x: auto`, jotta taulukko pysyy käyttökelpoisena pienemmillä näytöillä. Säiliökysely säätää fonttikokoa hieman paremman luettavuuden saavuttamiseksi kapeissa säiliöissä.

Globaali merkitys: Datataulukoita käytetään laajalti eri toimialoilla maailmanlaajuisesti, rahoituksesta ja terveydenhuollosta koulutukseen ja logistiikkaan. Responsiivinen datataulukko varmistaa, että tärkeät tiedot ovat saatavilla eri laitteilla ja näyttöko'oilla, mikä on ratkaisevan tärkeää globaalille yleisölle.

Esimerkki 4: cqmin ja cqmax -yksiköiden käyttö yhdenmukaisten mittasuhteiden saavuttamiseksi

Oletetaan, että haluat luoda neliönmuotoisen elementin säiliön sisälle, jossa sivun pituus on aina prosenttiosuus säiliön pienemmästä ulottuvuudesta.

            .square-container {
  container-type: size;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.square {
  width: 30cqmin; /* 30 % pienemmästä ulottuvuudesta */
  height: 30cqmin; /* 30 % pienemmästä ulottuvuudesta */
  background-color: lightblue;
}

            

              
                Copy
              
            
          

Tässä esimerkissä .square-elementti on aina neliö, ja sen sivun pituus on 30 % .square-container-säiliön pienemmästä ulottuvuudesta (tässä tapauksessa korkeudesta). Jos säiliön leveys olisi pienempi kuin sen korkeus, neliön sivun pituus perustuisi sen sijaan leveyteen. Tämä on erityisen hyödyllistä kuvasuhteiden ylläpitämisessä responsiivisesti.

Globaali merkitys: Kuvasuhteiden ylläpitäminen on tärkeää erilaisissa visuaalisissa elementeissä, kuten logoissa, profiilikuvissa tai ikoneissa. cqmin-yksikön käyttö varmistaa johdonmukaisuuden eri säiliöissä, mikä on tärkeää yhtenäisen brändikokemuksen kannalta käyttäjille maailmanlaajuisesti.

Selaintuki ja polyfillit

Vuoden 2023 loppupuolella selaintuki säiliökyselyille ja säiliökysely-yksiköille on erinomainen moderneissa selaimissa, kuten Chromessa, Firefoxissa, Safarissa ja Edgessä. Jos sinun kuitenkin tarvitsee tukea vanhempia selaimia, saatat harkita polyfillin käyttöä. Saatavilla on useita polyfillejä, jotka voivat tuoda säiliökysely-toiminnallisuuden vanhempiin selaimiin, vaikka suorituskyky voi vaihdella.

Säiliökysely-yksiköiden käytön edut

• Parempi komponenttien uudelleenkäytettävyys: Komponenteista tulee itsenäisempiä ja mukautuvampia, koska niiden tyylit ovat suhteessa niiden säiliöön, eivät koko näkymäporttiin.
• Hienojakoisempi hallinta: Säiliökyselyt tarjoavat tarkempaa hallintaa tyylittelyyn, mahdollistaen tiettyjen komponenttien kohdistamisen niiden yksilöllisen kontekstin perusteella.
• Yksinkertaistettu responsiivinen suunnittelu: CQ-yksiköt yksinkertaistavat monimutkaisia responsiivisia asetteluita mahdollistamalla tyylien määrittelyn, jotka skaalautuvat suhteessa säiliön kokoon.
• Parannettu koodin ylläpidettävyys: Komponenttipohjainen tyylittely tekee CSS:stäsi järjestelmällisempää ja helpommin ylläpidettävää.
• Parempi suorituskyky: Joissakin tapauksissa säiliökyselyt voivat johtaa parempaan suorituskykyyn verrattuna monimutkaisiin mediakysely-asetelmiin, koska selaimen tarvitsee arvioida kyselyt vain tietylle säiliölle, ei koko näkymäportille.

Haasteet ja huomioon otettavat seikat

• Selaintuki: Vaikka selaintuki on hyvä, testaa suunnitelmasi aina perusteellisesti eri selaimilla ja laitteilla, varsinkin jos sinun on tuettava vanhempia versioita.
• Suorituskyky: Säiliökyselyiden liiallinen käyttö tai liian monimutkaisten kyselyiden luominen voi mahdollisesti vaikuttaa suorituskykyyn. Profiiloi koodisi tunnistaaksesi mahdolliset suorituskyvyn pullonkaulat.
• Monimutkaisuus: Säiliökyselyt voivat lisätä monimutkaisuutta CSS:ään, erityisesti käsiteltäessä sisäkkäisiä säiliöitä. Asianmukainen suunnittelu ja organisointi ovat välttämättömiä.
• Kirjoitustilojen ymmärtäminen: Muista ero `cqw`/`cqh` ja `cqi`/`cqb` välillä, erityisesti käsiteltäessä monikielisiä verkkosivustoja, jotka käyttävät eri kirjoitustiloja.

Parhaat käytännöt säiliökysely-yksiköiden käyttöön

• Aloita komponenttipohjaisella lähestymistavalla: Suunnittele käyttöliittymäsi uudelleenkäytettävien komponenttien kokoelmana.
• Käytä säiliökyselyitä säästeliäästi: Älä käytä säiliökyselyitä liikaa, jos yksinkertaiset mediakyselyt riittävät.
• Pidä kyselyt kohdennettuina: Pidä säiliökyselysi spesifeinä ja kohdennettuina.
• Testaa perusteellisesti: Testaa suunnitelmasi eri selaimilla, laitteilla ja säiliöko'oilla.
• Dokumentoi koodisi: Dokumentoi selkeästi säiliökyselysi ja niiden taustalla olevat perustelut.
• Harkitse saavutettavuutta: Varmista, että responsiiviset suunnitelmasi ovat saavutettavia vammaisille käyttäjille, riippumatta säiliön koosta.

Yhteenveto

CSS-säiliökysely-yksiköt tarjoavat tehokkaan ja joustavan tavan luoda aidosti responsiivisia suunnitelmia. Mahdollistamalla elementtien tyylittelyn suhteessa niiden säiliöihin, CQ-yksiköt antavat sinun rakentaa uudelleenkäytettävämpiä, ylläpidettävämpiä ja mukautuvampia komponentteja. Vaikka on olemassa joitakin haasteita, säiliökyselyiden ja CQ-yksiköiden käytön edut ovat paljon suuremmat kuin haitat, erityisesti monimutkaisissa ja komponenttivetoisissa verkkosovelluksissa. Selaintuen jatkaessa paranemistaan, säiliökyselyistä on tulossa olennainen työkalu front-end-kehittäjille maailmanlaajuisesti. Hyödynnä elementtikohtaisen mitoituksen voima ja avaa projekteillesi uusi responsiivisen suunnittelun mahdollisuuksien taso.