Muutaman kerran säiliön kokoa koskevat kyselyt olisivat auttaneet minua

CSS-säilökyselyt ovat edelleen saamassa vetovoimaa ja monet meistä saavat kätensä kastumaan niiden kanssa, vaikka kyse olisikin pienistä kokeiluista tai muusta. Ne ovat mahtavia, mutta eivät aivan täynnä, selaimen tuki - tarpeeksi oikeuttaakseen niiden käytön joissakin projekteissa, mutta ei ehkä siinä määrin, että saattaisimme alkaa korvata niitä mediakyselyt aiemmista projekteista kiiltävällä uusilla konttikokokyselyillä.

Ne ovat varmasti käteviä! Itse asiassa olen jo törmännyt muutamiin tilanteisiin, joissa olisin todella halunnut tavoittaa niitä, mutta en vain pystynyt voittamaan tukivaatimuksia. Jos olisin voinut käyttää niitä, tältä se olisi näyttänyt noissa tilanteissa.

Kaikki seuraavat demot ovat parhaiten katsottavissa Chromessa tai Safarissa tätä kirjoitettaessa. Firefox suunnittelee laivan tuki versiossa 109.

Tapaus 1: Korttiristikko

Sinun piti odottaa tätä, eikö? Se on niin yleinen malli, että me kaikki näyttävät törmäävän siihen jossain vaiheessa. Tosiasia kuitenkin on, että säilön kokoiset kyselyt olisivat säästäneet minulle valtavasti aikaa ja parempia tuloksia, jos olisin voinut käyttää niitä tavallisten mediakyselyiden sijaan.

Oletetaan, että sinulle on annettu tehtäväksi rakentaa tämä korttiruudukko siten, että jokaisen kortin on säilytettävä kuvasuhde 1:1:

Se on kovempaa kuin miltä näyttää! Ongelmana on, että komponentin sisällön mitoittaminen näkymän leveyden mukaan jättää sinut sen armoille, kuinka komponentti reagoi näkymään - samoin kuin muiden esi-isimpien säiliöiden tapaan reagoida siihen. Jos esimerkiksi haluat pienentää kortin otsikon kirjasinkokoa, kun kortti saavuttaa tietyn rivin koon, siihen ei ole luotettavaa tapaa.

Voit asettaa fontin koon vw yksikköä, luulisin, mutta komponentti on silti sidottu selaimen näkymän leveyteen. Ja se voi aiheuttaa ongelmia, kun korttiruudukkoa käytetään muussa yhteyksissä, joissa ei ehkä ole samoja keskeytyskohtia.

Todellisessa projektissani päädyin JavaScript-lähestymistapaan, joka:

1. Kuuntele tapahtuman kokoa.
2. Laske jokaisen kortin leveys.
3. Lisää jokaiseen korttiin upotettu fonttikoko sen leveyden perusteella.
4. Tyyli kaikki sisällä käyttämällä em yksikköä.

Näyttää olevan paljon työtä, eikö? Mutta se on vakaa ratkaisu saada tarvittava skaalaus erikokoisille näytöille eri yhteyksissä.

Konttikyselyt olisivat olleet paljon parempia, koska ne tarjoavat meille säilön kyselyyksiköt, Kuten cqw yksikkö. Olet varmaan jo ymmärtänyt sen, mutta 1cqw on yhtä suuri kuin 1% kontin leveydestä. Meillä on myös cqi yksikkö, joka on säilön rivin leveyden mitta, ja cqb kontin lohkon leveydelle. Joten jos meillä on korttisäiliö, se on 500px leveä, a 50cqw arvo laskee 250px.

Jos olisin voinut käyttää säilökyselyjä korttiruudukossani, olisin voinut määrittää .card komponentti säiliönä:

.card { 
  container: card / size;
}

Sitten olisin voinut asettaa sisäkääreen padding joka skaalautuu 10% että .cardn leveys käyttämällä cqw yksikkö:

.card__inner { 
  padding: 10cqw; 
} 

Tämä on mukava tapa skaalata kortin reunojen ja sen sisällön välinen etäisyys johdonmukaisesti riippumatta siitä, missä korttia käytetään missä tahansa katseluportin leveydessä. Mediakyselyitä ei tarvita!

Toinen idea? Käyttää cqw yksikköä sisäisen sisällön fonttikoon mukaan ja lisää sitten täyte em yksiköt:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw on mielivaltainen arvo – vain sellainen, johon päädyin. Se pehmuste on edelleen yhtä suuri 10cqw koska em yksikkö on suhteessa .card__inner Fonttikoko!

Saitko sen kiinni? The 2em on suhteessa 5cqw asetettu fonttikoko samassa säiliössä. Säiliöt toimivat eri tavalla kuin mihin olemme tottuneet em yksiköt ovat suhteessa samaan elementtiin font-size value. Huomasin kuitenkin nopeasti, että säilön kyselyyksiköt liittyvät lähin vanhempi, joka on myös kontti.

Esimerkiksi 5cqw ei skaalaa perusteella .card elementin leveys tässä esimerkissä:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

Pikemminkin se skaalautuu lähimpään säilöksi määritellyn ylätason mukaan. Siksi perustin a .card__inner kääre.

Tapaus 2: Vaihteleva asettelu

Tarvitsin vielä toisen korttikomponentin eri projektiin. Tällä kertaa tarvitsin korttia siirtyäkseni vaaka-asettelusta pystyasetteluun… sitten takaisin vaaka-asetteluun ja takaisin pystysuuntaan, kun näyttö pienenee.

Tein likaisen työn saadakseni tämän osan muuttumaan muotokuvaksi näillä kahdella tietyllä näkymäalueella (huuta uuden median kyselyalueen syntaksi!), mutta ongelmana on jälleen se, että se lukitaan sen jälkeen asetettuihin mediakyselyihin, sen ylätason kyselyihin ja kaikkeen muuhun, joka saattaa vastata näkymän leveyteen. Haluamme jotain, joka toimii kaikissa olosuhteissa ilman, että tarvitsee miettiä, mihin sisältö menee rikki!

Konttikyselyt olisivat tehneet tästä helppoa, kiitos @container sääntö:

.info-card {
  container-type: inline-size;
  container-name: info-card;
}

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

Yksi kysely, ääretön sujuvuus:

Mutta odota! On jotain, mitä saatat haluta varoa. Erityisesti tämän kaltaisen säilökyselyn käyttäminen prop-pohjaisessa suunnittelujärjestelmässä voi olla vaikeaa. Esimerkiksi tämä .info-card komponentti voi sisältää lapsikomponentteja, joiden ulkonäkö muuttuu rekvisiittauksen avulla.

Miksi se on iso juttu? Kortin pystyasettelu saattaa edellyttää vaihtoehtoista tyyliä, mutta et voi muuttaa JavaScriptin rekvisiitta CSS:llä. Näin ollen vaarana on kopioida vaaditut tyylit. Itse asiassa kosketin tätä ja kuinka kiertää se toisessa artikkelissa. Jos sinun on käytettävä säilökyselyitä merkittävässä määrin tyyliäsi, sinun on ehkä perustettava koko suunnittelujärjestelmäsi niiden ympärille sen sijaan, että yrittäisit yhdistää ne olemassa olevaan suunnittelujärjestelmään, joka vaatii paljon mediakyselyitä.

Tapaus 3: SVG-vedot

Tässä on toinen erittäin yleinen malli, jota olen äskettäin käyttänyt ja jossa säiliökokokyselyt olisivat johtaneet kiillotetumpaan tuotteeseen. Oletetaan, että sinulla on lukittu kuvake otsikolla:

  
    
   
  Heading

On melko yksinkertaista skaalata kuvaketta otsikon koon mukaan, jopa ilman mediakyselyjä. Ongelma on kuitenkin se, että SVG:t stroke-width saattaa olla liian ohut huomatakseen pienemmässä koossa, ja ehkä kiinnittää liikaa huomiota erittäin paksulla vedolla suuremmassa koossa.

Minun on täytynyt luoda ja soveltaa luokkia jokaiseen kuvakeinstanssiin määrittääkseni sen koon ja viivan leveyden. Se on OK, jos kuvake on otsikon vieressä, joka on muotoiltu kiinteällä kirjasinkoolla, mutta se ei ole niin hienoa, kun työskentelet jatkuvasti muuttuvan nestetyypin kanssa.

Otsikon fonttikoko saattaa perustua näkymän leveyteen, joten SVG-kuvakkeen on säädettävä vastaavasti, missä sen viiva toimii missä tahansa koossa. Voit määrittää viivan leveyden suhteessa otsikkoon font-size asettamalla sen sisään em yksiköitä. Mutta jos sinulla on tietty joukko vetokokoja, joita sinun on noudatettava, tämä ei toimisi, koska se muuten skaalautuu lineaarisesti – sitä ei voi säätää tiettyyn stroke-width arvoa tietyissä kohdissa turvautumatta mediakyselyihin katseluportin leveydestä.

Mutta näin olisin tehnyt, jos minulla olisi ollut säilökyselyjen ylellisyys tuolloin:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

Vertaa toteutuksia ja katso, kuinka säilön kyselyversio napsauttaa SVG:n viivan haluamiini leveyksiin säilön leveyden perusteella.

Bonus: Muuntyyppiset konttikokokyselyt

Ok, joten en ole itse asiassa törmännyt tähän todellisessa projektissa. Mutta kun selailin tietoja säilökyselyistä, huomasin, että on olemassa muita asioita, joita voimme kysyä säilöstä, jotka liittyvät säilön kokoon tai fyysisiin mittoihin.

Useimmat esimerkit, jotka olen nähnyt, kysyvät width, max-widthja min-width, height, block-sizeja inline-size kuten olen tehnyt koko tämän artikkelin ajan.

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

Mutta MDN hahmottelee vielä kaksi asiaa voimme kysyä vastaan. Yksi on orientation mikä on täysin järkevää, koska käytämme sitä koko ajan mediakyselyissä. Se ei eroa säilökyselyistä:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

Toinen? Sen aspect-ratio, usko tai älä:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

Tässä on muokattava demo, jota voit pelata molemmilla esimerkeillä:

En ole vielä löytänyt hyvää käyttötapaa kummallekaan. Jos sinulla on ideoita tai tunnet, että se olisi voinut auttaa sinua projekteissasi, kerro minulle kommenteissa!