Mūsdienīgi CSS izkārtojumi: dziļa ieniršana konteineru vaicājumos

Gadiem ilgi mediju vaicājumi ir bijuši responsīvā tīmekļa dizaina stūrakmens. Tie ļauj mums pielāgot izkārtojumus, pamatojoties uz skatloga izmēru. Tomēr mediju vaicājumi darbojas ar pārlūkprogrammas loga izmēriem, kas dažkārt var radīt neveiklas situācijas, īpaši strādājot ar atkārtoti lietojamiem komponentiem. Ienāk konteineru vaicājumi – revolucionāra CSS funkcija, kas ļauj komponentiem pielāgoties, pamatojoties uz to ietverošā elementa izmēru, nevis uz kopējo skatlogu.

Kas ir konteineru vaicājumi?

Konteineru vaicājumi, ko oficiāli atbalsta lielākā daļa moderno pārlūkprogrammu, nodrošina granulārāku un uz komponentiem vērstu pieeju responsīvajam dizainam. Tie dod iespēju atsevišķiem komponentiem pielāgot savu izskatu un uzvedību, pamatojoties uz to vecākelementa konteinera izmēriem, neatkarīgi no skatloga izmēra. Tas nodrošina lielāku elastību un atkārtotu izmantojamību, īpaši strādājot ar sarežģītiem izkārtojumiem un dizaina sistēmām.

Iedomājieties kartītes komponentu, kuram jāizskatās atšķirīgi atkarībā no tā, vai tas ir ievietots šaurā sānjoslā vai platā galvenā satura apgabalā. Ar mediju vaicājumiem jums būtu jāpaļaujas uz skatloga izmēru un, iespējams, jādublē CSS noteikumi. Ar konteineru vaicājumiem kartītes komponents var gudri pielāgoties, pamatojoties uz pieejamo vietu savā konteinerī.

Kāpēc izmantot konteineru vaicājumus?

Šeit ir konteineru vaicājumu izmantošanas galveno priekšrocību sadalījums:

Uzlabota komponentu atkārtota izmantojamība: Komponenti kļūst patiesi neatkarīgi un var tikt nemanāmi atkārtoti izmantoti dažādās jūsu vietnes vai lietojumprogrammas daļās, neprasot ciešu saistību ar konkrētiem skatloga izmēriem. Padomājiet par ziņu raksta kartīti: tā varētu izskatīties atšķirīgi sānjoslā salīdzinājumā ar galveno satura daļu, balstoties tikai uz ietverošās kolonnas platumu.
Elastīgāki izkārtojumi: Konteineru vaicājumi ļauj veidot niansētākus un adaptīvākus izkārtojumus, īpaši strādājot ar sarežģītiem dizainiem, kur komponentiem jāreaģē atšķirīgi atkarībā no to konteksta. Apsveriet e-komercijas produktu saraksta lapu. Jūs varat mainīt vienumu skaitu rindā, nevis pamatojoties uz *ekrāna* platumu, bet gan uz *produktu saraksta konteinera* platumu, kas pats par sevi var atšķirties.
Samazināts CSS apjoms: Iekapsulējot responsīvo loģiku komponentos, jūs varat izvairīties no CSS noteikumu dublēšanas un izveidot vieglāk uzturējamus un organizētākus stila lapu failus. Tā vietā, lai katram komponentam būtu vairāki mediju vaicājumi, kas vērsti uz konkrētiem skatloga izmēriem, jūs varat definēt responsīvo uzvedību tieši komponenta CSS.
Labāka lietotāja pieredze: Pielāgojot komponentu prezentāciju to konkrētajam kontekstam, jūs varat radīt konsekventāku un intuitīvāku lietotāja pieredzi dažādās ierīcēs un ekrāna izmēros. Piemēram, navigācijas izvēlne varētu pārveidoties kompaktākā formā mazākā konteinerī, optimizējot vietu un lietojamību.
Uzlabotas dizaina sistēmas iespējas: Konteineru vaicājumi ir spēcīgs rīks, lai veidotu robustas un pielāgojamas dizaina sistēmas, ļaujot jums radīt atkārtoti lietojamus komponentus, kas nemanāmi integrējas dažādos kontekstos un izkārtojumos.

Darba sākšana ar konteineru vaicājumiem

Konteineru vaicājumu izmantošana ietver dažus galvenos soļus:

Konteinera definēšana: Norādiet elementu kā konteineru, izmantojot `container-type` īpašību. Tas nosaka robežas, kurās vaicājums darbosies.
Vaicājuma definēšana: Definējiet vaicājuma nosacījumus, izmantojot `@container` at-rule. Tas ir līdzīgi kā `@media`, bet skatloga īpašību vietā jūs vaicāsiet konteinera īpašības.
Stilu piemērošana: Piemērojiet stilus, kas jāpiemēro, kad vaicājuma nosacījumi ir izpildīti. Šie stili ietekmēs tikai elementus konteinerā.

1. Konteinera iestatīšana

Pirmais solis ir definēt, kurš elements darbosies kā konteiners. Tam varat izmantot `container-type` īpašību. Ir vairākas iespējamās vērtības:

`size`: Konteiners sekos gan rindas (platums), gan bloka (augstums) izmēriem.
`inline-size`: Konteiners sekos tikai savam rindas izmēram (parasti platumam). Šī ir visizplatītākā un veiktspējīgākā izvēle.
`normal`: Elements nav vaicājumu konteiners (noklusējuma vērtība).

Šeit ir piemērs:


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

Šajā piemērā `.card-container` elements ir norādīts kā konteiners, kas seko savam rindas izmēram (platumam).

2. Konteinera vaicājuma definēšana

Tālāk jūs definēsiet pašu vaicājumu, izmantojot `@container` at-rule. Šeit jūs norādāt nosacījumus, kuriem jābūt izpildītiem, lai vaicājumā esošie stili tiktu piemēroti.

Šeit ir vienkāršs piemērs, kas pārbauda, vai konteiners ir vismaz 500 pikseļus plats:


@container (min-width: 500px) {
  .card {
    flex-direction: row; /* Change the card layout */
  }
}

Šajā piemērā, ja `.card-container` elements ir vismaz 500 pikseļus plats, `.card` elementa `flex-direction` tiks iestatīts uz `row`.

Jūs varat izmantot arī `max-width`, `min-height`, `max-height` un pat apvienot vairākus nosacījumus, izmantojot loģiskos operatorus, piemēram, `and` un `or`.


@container (min-width: 300px) and (max-width: 700px) {
  .card-title {
    font-size: 1.2em;
  }
}

Šis piemērs piemēro stilus tikai tad, ja konteinera platums ir no 300px līdz 700px.

3. Stilu piemērošana

`@container` at-rule ietvaros jūs varat piemērot jebkurus CSS stilus, ko vēlaties, elementiem konteinerā. Šie stili tiks piemēroti tikai tad, kad vaicājuma nosacījumi ir izpildīti.

Šeit ir pilnīgs piemērs, kas apvieno visus soļus:


<div class="card-container">
  <div class="card">
    <h2 class="card-title">Produkta nosaukums</h2>
    <p class="card-description">Īss produkta apraksts.</p>
    <a href="#" class="card-button">Uzzināt vairāk</a>
  </div>
</div>


.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card-button {
  background-color: #007bff;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card-title {
    font-size: 1.8em;
  }
}

Šajā piemērā, kad `.card-container` ir vismaz 500 pikseļus plats, `.card` elements pārslēgsies uz horizontālu izkārtojumu, un `.card-title` palielināsies.

Konteineru nosaukumi

Jūs varat piešķirt konteineriem nosaukumu, izmantojot `container-name: my-card;`. Tas ļauj jums būt precīzākiem savos vaicājumos, īpaši, ja jums ir ligzdoti konteineri.


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

@container my-card (min-width: 500px) {
  /* Stili, kas piemēroti, kad konteiners ar nosaukumu "my-card" ir vismaz 500px plats */
}

Tas ir īpaši noderīgi, ja lapā ir vairāki konteineri, un jūs vēlaties ar saviem vaicājumiem mērķēt uz konkrētu no tiem.

Konteineru vaicājumu mērvienības

Tāpat kā mediju vaicājumiem, arī konteineru vaicājumiem ir savas mērvienības, kas ir relatīvas attiecībā pret konteineru. Tās ir:

`cqw`: 1% no konteinera platuma.
`cqh`: 1% no konteinera augstuma.
`cqi`: 1% no konteinera rindas izmēra (platums horizontālās rakstīšanas režīmos).
`cqb`: 1% no konteinera bloka izmēra (augstums horizontālās rakstīšanas režīmos).
`cqmin`: Mazākais no `cqi` vai `cqb`.
`cqmax`: Lielākais no `cqi` vai `cqb`.

Šīs mērvienības ir noderīgas, lai definētu izmērus un atstarpes, kas ir relatīvas attiecībā pret konteineru, vēl vairāk uzlabojot jūsu izkārtojumu elastību.


.element {
  width: 50cqw;
  font-size: 2cqmin;
}

Praktiski piemēri un lietošanas gadījumi

Šeit ir daži reālās pasaules piemēri, kā jūs varat izmantot konteineru vaicājumus, lai izveidotu pielāgojamākus un atkārtoti lietojamus komponentus:

1. Responsīva navigācijas izvēlne

Navigācijas izvēlne var pielāgot savu izkārtojumu, pamatojoties uz pieejamo vietu tās konteinerā. Šaurā konteinerā tā varētu sabrukt par hamburgera izvēlni, bet platākā konteinerā tā var attēlot visus izvēlnes elementus horizontāli.

2. Adaptīvs produktu saraksts

E-komercijas produktu saraksts var pielāgot attēloto produktu skaitu rindā, pamatojoties uz tā konteinera platumu. Platākā konteinerā tas var attēlot vairāk produktu rindā, bet šaurākā konteinerā tas var attēlot mazāk produktu, lai izvairītos no pārpildīšanas.

3. Elastīga raksta kartīte

Raksta kartīte var mainīt savu izkārtojumu, pamatojoties uz pieejamo vietu. Sānjoslā tā varētu parādīt nelielu sīktēlu un īsu aprakstu, bet galvenajā satura apgabalā tā var parādīt lielāku attēlu un detalizētāku kopsavilkumu.

4. Dinamiski formas elementi

Formas elementi var pielāgot savu izmēru un izkārtojumu, pamatojoties uz konteineru. Piemēram, meklēšanas josla varētu būt platāka vietnes galvenē un šaurāka sānjoslā.

5. Informācijas paneļa logrīki

Informācijas paneļa logrīki var pielāgot savu saturu un prezentāciju, pamatojoties uz to konteinera izmēru. Grafika logrīks varētu rādīt vairāk datu punktu lielākā konteinerā un mazāk datu punktu mazākā konteinerā.

Globāli apsvērumi

Izmantojot konteineru vaicājumus, ir svarīgi apsvērt jūsu dizaina izvēļu globālo ietekmi.

Lokalizācija: Nodrošiniet, lai jūsu izkārtojumi graciozi pielāgotos dažādām valodām un teksta virzieniem. Dažām valodām var būt nepieciešams vairāk vietas nekā citām, tāpēc ir svarīgi veidot elastīgus izkārtojumus, kas var pielāgoties mainīgiem teksta garumiem.
Pieejamība: Pārliecinieties, ka jūsu konteineru vaicājumi negatīvi neietekmē pieejamību. Pārbaudiet savus izkārtojumus ar palīgtehnoloģijām, lai nodrošinātu, ka tie paliek lietojami cilvēkiem ar invaliditāti.
Veiktspēja: Lai gan konteineru vaicājumi piedāvā ievērojamu elastību, ir svarīgi tos izmantot apdomīgi. Pārmērīga konteineru vaicājumu izmantošana var potenciāli ietekmēt veiktspēju, īpaši sarežģītos izkārtojumos.
No labās uz kreiso (RTL) pusi rakstāmās valodas: Veidojot dizainu RTL valodām, piemēram, arābu vai ebreju, nodrošiniet, ka jūsu konteineru vaicājumi pareizi apstrādā izkārtojuma spoguļošanu. Tādas īpašības kā `margin-left` un `margin-right` var būt nepieciešams dinamiski pielāgot.

Pārlūkprogrammu atbalsts un polifili

Konteineru vaicājumiem ir labs atbalsts modernajās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr, ja jums nepieciešams atbalstīt vecākas pārlūkprogrammas, varat izmantot polifilu, piemēram, @container-style/container-query. Šis polifils pievieno konteineru vaicājumu atbalstu pārlūkprogrammām, kuras tos dabiski neatbalsta.

Pirms konteineru vaicājumu izmantošanas ražošanas vidē vienmēr ir laba ideja pārbaudīt pašreizējo pārlūkprogrammu atbalstu un nepieciešamības gadījumā apsvērt polifila izmantošanu.

Labākās prakses

Šeit ir dažas labākās prakses, kas jāpatur prātā, strādājot ar konteineru vaicājumiem:

Sāciet ar "Mobile-First" pieeju: Vispirms izstrādājiet savus izkārtojumus mazākiem konteineriem un pēc tam izmantojiet konteineru vaicājumus, lai tos uzlabotu lielākiem konteineriem. Šī pieeja nodrošina labu lietotāja pieredzi visās ierīcēs.
Lietojiet jēgpilnus konteineru nosaukumus: Izmantojiet aprakstošus konteineru nosaukumus, lai padarītu jūsu kodu lasāmāku un vieglāk uzturējamu.
Rūpīgi testējiet: Pārbaudiet savus izkārtojumus dažādās pārlūkprogrammās un ekrāna izmēros, lai nodrošinātu, ka jūsu konteineru vaicājumi darbojas, kā paredzēts.
Saglabājiet vienkāršību: Izvairieties no pārlieku sarežģītu konteineru vaicājumu veidošanas. Jo sarežģītāki būs jūsu vaicājumi, jo grūtāk tos būs saprast un uzturēt.
Apsveriet veiktspēju: Lai gan konteineru vaicājumi piedāvā ievērojamu elastību, ir svarīgi būt uzmanīgiem attiecībā uz veiktspēju. Izvairieties no pārāk daudzu konteineru vaicājumu izmantošanas vienā lapā un optimizējiet savu CSS, lai samazinātu ietekmi uz renderēšanas veiktspēju.

Konteineru vaicājumi pret mediju vaicājumiem: salīdzinājums

Lai gan gan konteineru vaicājumi, gan mediju vaicājumi tiek izmantoti responsīvajam dizainam, tie darbojas pēc atšķirīgiem principiem un ir vislabāk piemēroti dažādiem scenārijiem.

Iezīme	Konteineru vaicājumi	Mediju vaicājumi
Mērķis	Konteinera izmērs	Skatloga izmērs
Darbības joma	Komponentu līmenis	Globāls
Atkārtota izmantojamība	Augsta	Zemāka
Specifiskums	Specifiskāks	Mazāk specifisks
Lietošanas gadījumi	Atsevišķu komponentu pielāgošana to kontekstam	Kopējā izkārtojuma pielāgošana dažādiem ekrāna izmēriem

Kopumā konteineru vaicājumi ir labāk piemēroti atsevišķu komponentu pielāgošanai to kontekstam, savukārt mediju vaicājumi ir labāk piemēroti kopējā izkārtojuma pielāgošanai dažādiem ekrāna izmēriem. Jūs pat varat apvienot abus, lai izveidotu sarežģītākus izkārtojumus.

CSS izkārtojumu nākotne

Konteineru vaicājumi ir nozīmīgs solis uz priekšu CSS izkārtojumu evolūcijā. Dodot komponentiem iespēju pielāgoties, pamatojoties uz to konteineru, tie nodrošina elastīgāku, atkārtoti lietojamu un vieglāk uzturējamu kodu. Tā kā pārlūkprogrammu atbalsts turpina uzlaboties, konteineru vaicājumi ir ceļā, lai kļūtu par būtisku rīku front-end izstrādātājiem.

Noslēgums

Konteineru vaicājumi ir spēcīgs papildinājums CSS ainavai, piedāvājot uz komponentiem vērstāku pieeju responsīvajam dizainam. Izprotot, kā tie darbojas un kā tos efektīvi izmantot, jūs varat izveidot pielāgojamākas, atkārtoti lietojamas un vieglāk uzturējamas tīmekļa lietojumprogrammas. Pieņemiet konteineru vaicājumus un atklājiet jaunu elastības līmeni savos CSS izkārtojumos!