Kaasaegsed CSS-i paigutused: põhjalik ülevaade konteineripäringutest

Aastaid on meediapäringud olnud reageeriva veebidisaini nurgakiviks. Need võimaldavad meil kohandada oma paigutusi vaateakna suuruse alusel. Kuid meediapäringud toimivad brauseriakna mõõtmete põhjal, mis võib mõnikord viia ebamugavate olukordadeni, eriti taaskasutatavate komponentidega tegelemisel. Siin tulevad mängu konteineripäringud – murranguline CSS-i funktsioon, mis võimaldab komponentidel kohaneda nende sisaldava elemendi suuruse, mitte kogu vaateakna alusel.

Mis on konteineripäringud?

Konteineripäringud, mida enamik kaasaegseid brausereid ametlikult toetab, pakuvad reageerivale disainile peenemat ja komponendikeskset lähenemist. Need annavad üksikutele komponentidele võime kohandada oma välimust ja käitumist vastavalt oma vanemkonteineri mõõtmetele, sõltumata vaateakna suurusest. See võimaldab suuremat paindlikkust ja taaskasutatavust, eriti keerukate paigutuste ja disainisüsteemidega töötamisel.

Kujutage ette kaardikomponenti, mis peab kuvama erinevalt, olenevalt sellest, kas see on paigutatud kitsasse külgribasse või laia põhisisu alale. Meediapäringutega peaksite tuginema vaateakna suurusele ja potentsiaalselt dubleerima CSS-i reegleid. Konteineripäringutega saab kaardikomponent arukalt kohaneda vastavalt oma konteineris olemasolevale ruumile.

Miks kasutada konteineripäringuid?

Siin on ülevaade konteineripäringute kasutamise peamistest eelistest:

Parem komponentide taaskasutatavus: Komponendid muutuvad tõeliselt iseseisvaks ja neid saab sujuvalt taaskasutada teie veebisaidi või rakenduse erinevates osades, ilma et neid oleks vaja tihedalt siduda konkreetsete vaateakende suurustega. Mõelge uudiste artikli kaardile: see võib kuvada külgveerus erinevalt kui põhitekstis, tuginedes puhtalt sisaldava veeru laiusele.
Paindlikumad paigutused: Konteineripäringud võimaldavad nüansseeritumaid ja kohanduvamaid paigutusi, eriti keerukate disainide puhul, kus komponendid peavad oma kontekstist sõltuvalt erinevalt reageerima. Kaaluge e-kaubanduse tootenimekirja lehte. Saate muuta toodete arvu reas mitte *ekraani* laiuse, vaid *tootenimekirja konteineri* laiuse alusel, mis ise võib varieeruda.
Vähendatud CSS-i maht: Kapseldades reageeriva loogika komponentidesse, saate vältida CSS-i reeglite dubleerimist ja luua paremini hooldatavaid ja organiseeritud stiililehti. Selle asemel, et omada mitut meediapäringut, mis on suunatud iga komponendi jaoks konkreetsetele vaateakende suurustele, saate reageeriva käitumise määratleda otse komponendi CSS-is.
Parem kasutajakogemus: Kohandades komponentide esitlust nende konkreetsele kontekstile, saate luua järjepidevama ja intuitiivsema kasutajakogemuse erinevates seadmetes ja ekraanisuurustes. Näiteks võib navigeerimismenüü muutuda väiksemas konteineris kompaktsemaks vormiks, optimeerides ruumi ja kasutatavust.
Täiustatud disainisüsteemi võimekused: Konteineripäringud on võimas tööriist robustsete ja kohanduvate disainisüsteemide loomiseks, võimaldades teil luua taaskasutatavaid komponente, mis integreeruvad sujuvalt erinevatesse kontekstidesse ja paigutustesse.

Konteineripäringutega alustamine

Konteineripäringute kasutamine hõlmab mõnda põhietappi:

Konteineri määratlemine: Määrake element konteineriks, kasutades atribuuti `container-type`. See kehtestab piirid, mille sees päring toimib.
Päringu määratlemine: Määratlege päringu tingimused, kasutades `@container` at-reeglit. See on sarnane `@media`-ga, kuid vaateakna atribuutide asemel pärite konteineri atribuute.
Stiilide rakendamine: Rakendage stiilid, mida tuleks rakendada, kui päringu tingimused on täidetud. Need stiilid mõjutavad ainult konteineris olevaid elemente.

1. Konteineri seadistamine

Esimene samm on määratleda, milline element toimib konteinerina. Selleks saate kasutada atribuuti `container-type`. Võimalikke väärtusi on mitu:

`size`: Konteiner jälgib nii reasisest (laius) kui ka ploki (kõrgus) mõõdet.
`inline-size`: Konteiner jälgib ainult oma reasisese mõõdet (tavaliselt laius). See on kõige levinum ja jõudluse seisukohast parim valik.
`normal`: Element ei ole päringukonteiner (vaikimisi).

Siin on näide:


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

Selles näites on element `.card-container` määratud konteineriks, mis jälgib oma reasisese suurust (laiust).

2. Konteineripäringu defineerimine

Järgmisena defineerite päringu ise, kasutades `@container` at-reeglit. Siin määrate tingimused, mis peavad olema täidetud, et päringus olevad stiilid rakenduksid.

Siin on lihtne näide, mis kontrollib, kas konteiner on vähemalt 500 pikslit lai:


@container (min-width: 500px) {
  .card {
    flex-direction: row; /* Muuda kaardi paigutust */
  }
}

Selles näites, kui element `.card-container` on vähemalt 500 pikslit lai, seatakse elemendi `.card` `flex-direction` väärtuseks `row`.

Võite kasutada ka `max-width`, `min-height`, `max-height` ja isegi kombineerida mitut tingimust, kasutades loogilisi operaatoreid nagu `and` ja `or`.


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

See näide rakendab stiile ainult siis, kui konteineri laius on 300px ja 700px vahel.

3. Stiilide rakendamine

At-reegli `@container` sees saate rakendada mis tahes CSS-stiile, mida soovite konteineris olevatele elementidele. Need stiilid rakenduvad ainult siis, kui päringu tingimused on täidetud.

Siin on täielik näide, mis ühendab kõik sammud:


<div class="card-container">
  <div class="card">
    <h2 class="card-title">Toote pealkiri</h2>
    <p class="card-description">Toote lühikirjeldus.</p>
    <a href="#" class="card-button">Loe edasi</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;
  }
}

Selles näites, kui `.card-container` on vähemalt 500 pikslit lai, lülitub element `.card` horisontaalsele paigutusele ja `.card-title` suurus kasvab.

Konteinerite nimed

Saate anda konteineritele nime, kasutades `container-name: my-card;`. See võimaldab teil oma päringutes olla täpsem, eriti kui teil on pesastatud konteinereid.


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

@container my-card (min-width: 500px) {
  /* Stiilid, mis rakenduvad, kui konteiner nimega "my-card" on vähemalt 500px lai */
}

See on eriti kasulik, kui teil on lehel mitu konteinerit ja soovite oma päringutega sihtida konkreetset.

Konteineripäringu ühikud

Nagu meediapäringutelgi, on konteineripäringutel oma ühikud, mis on suhtelised konteineriga. Need on:

`cqw`: 1% konteineri laiusest.
`cqh`: 1% konteineri kõrgusest.
`cqi`: 1% konteineri reasisesest suurusest (laius horisontaalsetes kirjutusrežiimides).
`cqb`: 1% konteineri ploki suurusest (kõrgus horisontaalsetes kirjutusrežiimides).
`cqmin`: Väiksem väärtus `cqi` või `cqb` hulgast.
`cqmax`: Suurem väärtus `cqi` või `cqb` hulgast.

Need ühikud on kasulikud suuruste ja vahede määratlemisel, mis on suhtelised konteineriga, suurendades veelgi teie paigutuste paindlikkust.


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

Praktilised näited ja kasutusjuhud

Siin on mõned reaalsed näited sellest, kuidas saate konteineripäringuid kasutada kohanduvamate ja taaskasutatavamate komponentide loomiseks:

1. Reageeriv navigeerimismenüü

Navigeerimismenüü saab kohandada oma paigutust vastavalt konteineris olemasolevale ruumile. Kitsas konteineris võib see kokku klappida hamburger-menüüks, samas kui laiemas konteineris saab see kuvada kõik menüüelemendid horisontaalselt.

2. Kohanduv toodete nimekiri

E-kaubanduse tootenimekiri saab reguleerida reas kuvatavate toodete arvu vastavalt oma konteineri laiusele. Laiemas konteineris saab see kuvada rohkem tooteid reas, samas kui kitsamas konteineris saab kuvada vähem tooteid, et vältida ülerahvastatust.

3. Paindlik artiklikaart

Artiklikaart saab muuta oma paigutust vastavalt olemasolevale ruumile. Külgribal võib see kuvada väikese pisipildi ja lühikese kirjelduse, samas kui põhisisu alal saab see kuvada suurema pildi ja üksikasjalikuma kokkuvõtte.

4. Dünaamilised vormielemendid

Vormielemendid saavad kohandada oma suurust ja paigutust vastavalt konteinerile. Näiteks võib otsinguriba olla veebisaidi päises laiem ja külgribal kitsam.

5. Armatuurlaua vidinad

Armatuurlaua vidinad saavad reguleerida oma sisu ja esitlust vastavalt oma konteineri suurusele. Graafiku vidin võib suuremas konteineris näidata rohkem andmepunkte ja väiksemas konteineris vähem andmepunkte.

Globaalsed kaalutlused

Konteineripäringute kasutamisel on oluline arvestada oma disainivalikute globaalsete mõjudega.

Lokaliseerimine: Veenduge, et teie paigutused kohanduksid sujuvalt erinevate keelte ja teksti suundadega. Mõned keeled võivad nõuda rohkem ruumi kui teised, seega on oluline kujundada paindlikke paigutusi, mis mahutavad erineva pikkusega tekste.
Juurdepääsetavus: Veenduge, et teie konteineripäringud ei mõjutaks negatiivselt juurdepääsetavust. Testige oma paigutusi abitehnoloogiatega, et tagada nende kasutatavus puuetega inimestele.
Jõudlus: Kuigi konteineripäringud pakuvad märkimisväärset paindlikkust, on oluline neid kasutada kaalutletult. Konteineripäringute liigne kasutamine võib potentsiaalselt mõjutada jõudlust, eriti keerukate paigutuste puhul.
Paremalt-vasakule (RTL) keeled: Projekteerides RTL keelte jaoks, nagu araabia või heebrea keel, veenduge, et teie konteineripäringud käsitleksid paigutuse peegeldamist korrektselt. Atribuute nagu `margin-left` ja `margin-right` võib olla vaja dünaamiliselt kohandada.

Brauseri tugi ja polüfillid

Konteineripäringutel on hea tugi kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge. Kui teil on aga vaja toetada vanemaid brausereid, saate kasutada polüfilli, näiteks @container-style/container-query. See polüfill lisab konteineripäringute toe brauseritele, mis seda loomulikult ei toeta.

Enne konteineripäringute kasutamist tootmiskeskkonnas on alati hea mõte kontrollida praegust brauseri tuge ja vajadusel kaaluda polüfilli kasutamist.

Parimad praktikad

Siin on mõned parimad praktikad, mida konteineripäringutega töötamisel meeles pidada:

Alustage mobiil-eelkõige põhimõttest: Kujundage oma paigutused esmalt väiksematele konteineritele ja seejärel kasutage konteineripäringuid nende täiustamiseks suuremate konteinerite jaoks. See lähenemine tagab hea kasutajakogemuse kõikides seadmetes.
Kasutage tähendusrikkaid konteinerite nimesid: Kasutage kirjeldavaid konteinerite nimesid, et muuta oma kood loetavamaks ja hooldatavamaks.
Testige põhjalikult: Testige oma paigutusi erinevates brauserites ja ekraanisuurustes, et tagada konteineripäringute ootuspärane toimimine.
Hoidke see lihtsana: Vältige liiga keerukate konteineripäringute loomist. Mida keerulisemad on teie päringud, seda raskem on neid mõista ja hooldada.
Arvestage jõudlusega: Kuigi konteineripäringud pakuvad märkimisväärset paindlikkust, on oluline olla teadlik jõudlusest. Vältige liiga paljude konteineripäringute kasutamist ühel lehel ja optimeerige oma CSS-i, et minimeerida mõju renderdamise jõudlusele.

Konteineripäringud vs. meediapäringud: võrdlus

Kuigi nii konteineripäringuid kui ka meediapäringuid kasutatakse reageeriva disaini jaoks, toimivad need erinevatel põhimõtetel ja sobivad kõige paremini erinevatesse stsenaariumidesse.

Omadus	Konteineripäringud	Meediapäringud
Sihtmärk	Konteineri suurus	Vaateakna suurus
Ulatus	Komponendi tasand	Globaalne
Taaskasutatavus	Kõrge	Madalam
Spetsiifilisus	Spetsiifilisem	Vähem spetsiifiline
Kasutusjuhud	Üksikute komponentide kohandamine nende kontekstile	Üldise paigutuse kohandamine erinevatele ekraanisuurustele

Üldiselt sobivad konteineripäringud paremini üksikute komponentide kohandamiseks nende kontekstile, samas kui meediapäringud sobivad paremini üldise paigutuse kohandamiseks erinevatele ekraanisuurustele. Keerulisemate paigutuste jaoks saate isegi mõlemat kombineerida.

CSS-i paigutuste tulevik

Konteineripäringud kujutavad endast olulist sammu edasi CSS-i paigutuste arengus. Andudes komponentidele võime kohaneda oma konteineri alusel, võimaldavad need paindlikumat, taaskasutatavamat ja hooldatavamat koodi. Kuna brauserite tugi jätkuvalt paraneb, on konteineripäringud valmis saama front-end arendajate jaoks oluliseks tööriistaks.

Kokkuvõte

Konteineripäringud on võimas täiendus CSS-i maastikule, pakkudes reageerivale disainile komponendikesksemat lähenemist. Mõistes, kuidas need toimivad ja kuidas neid tõhusalt kasutada, saate luua kohanduvamaid, taaskasutatavamaid ja hooldatavamaid veebirakendusi. Võtke konteineripäringud omaks ja avage oma CSS-i paigutustes uus paindlikkuse tase!