CSS @container: išsami konteinerių užklausų analizė

Interneto kūrimo pasaulis nuolat keičiasi, o kartu su juo turi keistis ir mūsų požiūris į adaptyvų dizainą. Nors medijos užklausos ilgą laiką buvo standartas pritaikant išdėstymus skirtingiems ekranų dydžiams, jos dažnai tampa nepakankamos dirbant su sudėtingais, komponentais pagrįstais dizainais. Čia į pagalbą ateina CSS konteinerių užklausos – galinga nauja funkcija, leidžianti kurti tikrai pritaikomus ir pakartotinai naudojamus komponentus. Šiame straipsnyje pateikiamas išsamus vadovas, kaip suprasti ir įgyvendinti CSS konteinerių užklausas, kad galėtumėte kurti lankstesnes ir lengviau prižiūrimas vartotojo sąsajas.

Kas yra konteinerių užklausos?

Konteinerių užklausos, apibrėžtos @container taisykle, yra panašios į medijos užklausas, tačiau jos reaguoja ne į peržiūros srities dydį, o į *konteinerio* elemento dydį ar būseną. Tai reiškia, kad komponentas gali keisti savo išvaizdą priklausomai nuo laisvos vietos tėviniame konteineryje, neatsižvelgiant į bendrą ekrano dydį. Tai leidžia pasiekti detalesnį ir kontekstą labiau atitinkantį adaptyvų elgesį.

Įsivaizduokite kortelės komponentą, kuriame rodoma informacija apie produktą. Dideliame ekrane jame gali būti rodomas išsamus aprašymas ir kelios nuotraukos. Tačiau mažesnėje šoninėje juostoje gali prireikti rodyti tik pavadinimą ir miniatiūrą. Naudodami konteinerių užklausas, galite apibrėžti šiuos skirtingus išdėstymus pačiame komponente, todėl jis tampa tikrai autonomiškas ir pakartotinai naudojamas.

Kodėl verta naudoti konteinerių užklausas?

Konteinerių užklausos suteikia keletą svarbių pranašumų, palyginti su tradicinėmis medijos užklausomis:

• Komponento lygio adaptyvumas: Jos leidžia apibrėžti adaptyvų elgesį komponento lygmeniu, o ne remtis globaliais peržiūros srities dydžiais. Tai skatina moduliškumą ir pakartotinį naudojimą.
• Geresnė priežiūra: Įtraukdami adaptyvumo logiką į komponentus, sumažinate savo CSS sudėtingumą ir palengvinate jo priežiūrą.
• Didesnis lankstumas: Konteinerių užklausos leidžia kurti labiau pritaikomas ir kontekstą atitinkančias vartotojo sąsajas, suteikiant geresnę vartotojo patirtį įvairiuose įrenginiuose ir kontekstuose. Apsvarstykite daugiakalbę svetainę; konteinerio užklausa galėtų koreguoti šrifto dydį komponente, jei aptiktų kalbą su ilgesniais žodžiais, užtikrindama, kad tekstas neišeitų už ribų.
• Sumažėjęs CSS kodas: Užuot perrašius globalius stilius konkretiems komponentams, komponentas pats valdo savo adaptyvų elgesį, todėl CSS tampa švaresnis ir efektyvesnis.

Konteinerio apibrėžimas

Prieš pradedant naudoti konteinerių užklausas, reikia apibrėžti konteinerio elementą. Tai daroma naudojant container-type savybę.

Yra kelios galimos container-type reikšmės:

• size: Konteinerių užklausos reaguos į konteinerio inline ir block dydį. Tai yra labiausiai paplitęs ir universalus variantas.
• inline-size: Konteinerių užklausos reaguos tik į inline dydį (plotį horizontaliame rašymo režime).
• normal: Elementas nėra užklausų konteineris. Tai yra numatytoji reikšmė.

Štai pavyzdys, kaip apibrėžti konteinerį:

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

            

              
                Copy
              
            
          

Arba galite naudoti sutrumpintą container savybę, kad apibrėžtumėte ir container-type, ir container-name (kurį aptarsime vėliau):

            .card-container {
  container: card / size; /* container-name: card, container-type: size */
}

            

              
                Copy
              
            
          

Konteinerių užklausų rašymas

Apibrėžę konteinerį, galite naudoti @container taisyklę rašyti konteinerių užklausas. Sintaksė panaši į medijos užklausų:

            @container card (min-width: 300px) {
  .card {
    background-color: lightblue;
  }
}

            

              
                Copy
              
            
          

Šiame pavyzdyje .card elemento fono spalva pasikeis į šviesiai mėlyną, kai jo tėvinis konteineris (su klase .card-container ir container-type: size) bus bent 300px pločio.

Konteinerių užklausoje galite naudoti visas standartines medijos užklausų funkcijas, tokias kaip min-width, max-width, min-height, max-height ir kt. Taip pat galite derinti kelias sąlygas naudodami loginius operatorius, tokius kaip and, or ir not.

Pavyzdys: šrifto dydžio pritaikymas

Tarkime, turite antraštę kortelės komponente ir norite sumažinti jos šrifto dydį, kai kortelė rodoma mažesniame konteineryje:

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

.card h2 {
  font-size: 2em;
}

@container (max-width: 400px) {
  .card h2 {
    font-size: 1.5em;
  }
}

            

              
                Copy
              
            
          

Šiuo atveju, kai konteineris yra 400px pločio ar mažesnis, h2 elemento šrifto dydis bus sumažintas iki 1.5em.

Konteinerių pavadinimai

Sudėtingesniems išdėstymams su įdėtais konteineriais galite naudoti container-name savybę, kad suteiktumėte konteineriams unikalius pavadinimus. Tai leidžia nukreipti užklausas į konkrečius konteinerius.

            .main-content {
  container: main-content / size;
}

.sidebar {
  container: sidebar / inline-size;
}

@container main-content (min-width: 700px) {
  /* Styles applied when the main-content container is at least 700px wide */
}

@container sidebar (min-inline-size: 200px) {
  /* Styles applied when the sidebar container is at least 200px wide */
}

            

              
                Copy
              
            
          

Pavadindami savo konteinerius, galite išvengti galimų konfliktų ir užtikrinti, kad jūsų stiliai būtų teisingai pritaikyti numatytiems elementams. Tai ypač naudinga dirbant su didelėmis ir sudėtingomis interneto programomis, kurias kuria tarptautinės komandos.

Konteinerių užklausų vienetų naudojimas

Konteinerių užklausos įveda naujus vienetus, kurie yra santykiniai konteinerio dydžiui:

• cqw: 1% konteinerio pločio.
• cqh: 1% konteinerio aukščio.
• cqi: 1% konteinerio inline dydžio (plotis horizontaliame rašymo režime).
• cqb: 1% konteinerio block dydžio (aukštis horizontaliame rašymo režime).
• cqmin: Mažesnis iš cqi arba cqb.
• cqmax: Didesnis iš cqi arba cqb.

Šie vienetai gali būti neįtikėtinai naudingi kuriant išdėstymus, kurie proporcingai keičiasi kartu su konteinerio dydžiu. Pavyzdžiui, galite nustatyti antraštės šrifto dydį kaip procentą nuo konteinerio pločio:

            .card h2 {
  font-size: 5cqw;
}

            

              
                Copy
              
            
          

Tai užtikrina, kad antraštė visada išlaikys nuoseklų vizualinį santykį su kortelės dydžiu, nepriklausomai nuo jos absoliučių matmenų.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip konteinerių užklausos gali būti naudojamos kuriant labiau pritaikomas ir adaptyvias vartotojo sąsajas.

1. Adaptyvi navigacija

Įsivaizduokite, kad turite navigacijos juostą su nuorodų eile. Didesniuose ekranuose norite rodyti visas nuorodas horizontaliai. Tačiau mažesniuose ekranuose norite sutraukti nuorodas į išskleidžiamąjį meniu.

Naudodami konteinerių užklausas, galite tai pasiekti nesiremdami globaliomis medijos užklausomis.

            .nav-container {
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-toggle {
  display: none;
}

@container (max-inline-size: 600px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

            

              
                Copy
              
            
          

Šiame pavyzdyje navigacijos nuorodos bus paslėptos, o navigacijos perjungimo mygtukas bus rodomas, kai .nav-container plotis bus mažesnis nei 600px.

2. Pritaikomos produktų kortelės

Kaip minėta anksčiau, produktų kortelės yra puikus konteinerių užklausų panaudojimo pavyzdys. Galite koreguoti kortelės išdėstymą ir turinį atsižvelgiant į laisvą vietą jos konteineryje.

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

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-description {
  font-size: 0.9em;
  margin-bottom: 10px;
}

.product-price {
  font-weight: bold;
}

@container (max-width: 300px) {
  .product-image {
    display: none;
  }

  .product-description {
    display: none;
  }

  .product-title {
    font-size: 1em;
  }
}

            

              
                Copy
              
            
          

Šiame pavyzdyje, kai .product-card-container plotis yra mažesnis nei 300px, produkto paveikslėlis ir aprašymas bus paslėpti, o produkto pavadinimo šrifto dydis bus sumažintas.

3. Dinamiškai koreguojami tinkleliai

Konteinerių užklausos yra labai naudingos dirbant su tinklelio išdėstymais. Tinklelis, kuriame rodomos nuotraukos, galėtų, pavyzdžiui, koreguoti stulpelių skaičių pagal turimą plotį konteineryje, kuriame jis yra. Tai gali būti ypač naudinga el. prekybos svetainėse ar portfolio puslapiuose.

            .grid-container {
  container-type: size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
}

@container (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

            

              
                Copy
              
            
          

Aukščiau pateiktas kodas sukuria tinklelį su minimaliu stulpelio pločiu 200px, prisitaikantį prie turimos konteinerio erdvės. Jei konteineris susiaurėja iki mažiau nei 500px, tinklelis persikonfigūruos į vieno stulpelio išdėstymą, užtikrindamas, kad turinys liktų įskaitomas ir prieinamas.

Prieinamumo aspektai

Įgyvendinant konteinerių užklausas, svarbu atsižvelgti į prieinamumą, siekiant užtikrinti, kad jūsų svetainė būtų naudojama visiems.

• Semantinis HTML: Naudokite semantinius HTML elementus, kad suteiktumėte aiškią struktūrą savo turiniui. Tai padeda pagalbinėms technologijoms suprasti kiekvieno elemento paskirtį.
• Pakankamas kontrastas: Užtikrinkite, kad tarp teksto ir fono spalvų būtų pakankamas kontrastas, kad žmonėms su regos sutrikimais būtų lengva skaityti jūsų turinį. Kontrastą galite įvertinti naudodami tokius įrankius kaip WebAIM kontrasto tikrintuvas.
• Navigacija klaviatūra: Įsitikinkite, kad visi interaktyvūs elementai yra pasiekiami naudojant klaviatūrą. Tai būtina vartotojams, kurie negali naudotis pele.
• Fokusavimo indikatoriai: Pateikite aiškius ir matomus fokusavimo indikatorius klaviatūros vartotojams. Tai padeda jiems suprasti, kuris elementas šiuo metu yra pasirinktas.
• Adaptyvūs vaizdai: Naudokite <picture> elementą arba srcset atributą, kad pateiktumėte adaptyvius vaizdus, optimizuotus skirtingiems ekranų dydžiams. Tai pagerina našumą ir sumažina pralaidumo naudojimą.
• Testavimas su pagalbinėmis technologijomis: Išbandykite savo svetainę su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, kad įsitikintumėte, jog ji yra visiškai prieinama.

Naršyklių palaikymas

Konteinerių užklausų palaikymas šiuolaikinėse naršyklėse yra geras. Dabartinę palaikymo būseną galite patikrinti svetainėse, tokiose kaip Can I use....

2024 m. pabaigoje dauguma pagrindinių naršyklių, įskaitant Chrome, Firefox, Safari ir Edge, palaiko konteinerių užklausas. Tačiau visada verta patikrinti naujausius atnaujinimus ir užtikrinti, kad jūsų svetainė būtų išbandyta skirtingose naršyklėse ir įrenginiuose.

Geriausios konteinerių užklausų naudojimo praktikos

Norėdami maksimaliai išnaudoti konteinerių užklausas, atsižvelkite į šias geriausias praktikas:

• Pradėkite nuo mažų dalykų: Pradėkite diegti konteinerių užklausas mažesniuose, autonomiškuose komponentuose. Tai padės jums suprasti koncepcijas ir išvengti galimų sudėtingumų.
• Naudokite prasmingus konteinerių pavadinimus: Pasirinkite aprašomuosius ir prasmingus konteinerių pavadinimus, kad pagerintumėte kodo skaitomumą ir priežiūrą.
• Venkite per didelio specifiškumo: Laikykite savo konteinerių užklausų selektorius kuo paprastesnius, kad išvengtumėte konfliktų ir užtikrintumėte, kad jūsų stiliai būtų taikomi teisingai.
• Kruopščiai testuokite: Išbandykite savo svetainę skirtingose naršyklėse, įrenginiuose ir ekranų dydžiuose, kad įsitikintumėte, jog jūsų konteinerių užklausos veikia kaip tikėtasi.
• Dokumentuokite savo kodą: Dokumentuokite savo konteinerių užklausų įgyvendinimus, kad kitiems kūrėjams būtų lengviau suprasti ir prižiūrėti jūsų kodą.

Dažniausios klaidos ir kaip jų išvengti

Nors konteinerių užklausos suteikia didelių pranašumų, taip pat yra keletas dažnų spąstų, kuriuos reikia žinoti:

• Ciklinės priklausomybės: Venkite kurti ciklinių priklausomybių, kai konteinerio dydis priklauso nuo jo vaikinių elementų dydžio, kuris savo ruožtu priklauso nuo konteinerio dydžio. Tai gali sukelti begalines kilpas ir netikėtą elgesį.
• Per didelis sudėtingumas: Neperkraukite savo konteinerių užklausų įgyvendinimų. Laikykite juos kuo paprastesnius ir aiškesnius.
• Našumo problemos: Pernelyg didelis konteinerių užklausų naudojimas gali paveikti našumą, ypač sudėtinguose išdėstymuose. Naudokite juos protingai ir optimizuokite savo kodą našumui.
• Planavimo stoka: Nepavykus suplanuoti savo adaptyvios strategijos prieš įgyvendinant konteinerių užklausas, gali atsirasti neorganizuotas ir sunkiai prižiūrimas kodas. Skirkite laiko atidžiai apsvarstyti savo reikalavimus ir atitinkamai suprojektuoti komponentus.

Adaptyvaus dizaino ateitis

Konteinerių užklausos yra svarbus žingsnis į priekį adaptyvaus dizaino evoliucijoje. Jos suteikia lankstesnį, modularesnį ir lengviau prižiūrimą požiūrį į pritaikomų vartotojo sąsajų kūrimą. Tobulėjant naršyklių palaikymui, konteinerių užklausos greičiausiai taps esminiu įrankiu interneto kūrėjams.

Išvada

CSS konteinerių užklausos yra galinga nauja funkcija, leidžianti kurti tikrai pritaikomus ir pakartotinai naudojamus komponentus. Suprasdami šiame straipsnyje išdėstytas koncepcijas ir geriausias praktikas, galite pasinaudoti konteinerių užklausomis, kad sukurtumėte lankstesnes, lengviau prižiūrimas ir patogesnes vartotojui interneto programas.

Eksperimentuokite su konteinerių užklausomis, tyrinėkite skirtingus naudojimo atvejus ir atraskite, kaip jos gali pagerinti jūsų adaptyvaus dizaino darbo eigą. Adaptyvaus dizaino ateitis jau čia, ir ją kuria konteinerių užklausos!

Nuo tarptautinių el. prekybos platformų, kurioms reikia pritaikomų produktų rodinių, iki daugiakalbių naujienų svetainių, reikalaujančių lanksčių turinio išdėstymų, konteinerių užklausos siūlo vertingą sprendimą kuriant tikrai globalias ir prieinamas interneto patirtis.

Apsvarstykite galimybę tyrinėti pažangesnes technikas, tokias kaip JavaScript naudojimas dinamiškai koreguoti konteinerio savybes atsižvelgiant į vartotojo sąveikas ar serverio duomenis. Pavyzdžiui, interaktyvus žemėlapio komponentas galėtų koreguoti savo mastelį atsižvelgdamas į konteinerio dydį, suteikdamas intuityvesnę patirtį vartotojams skirtinguose įrenginiuose ir ekranų dydžiuose.

Galimybės yra beribės, todėl priimkite konteinerių užklausas ir atrakinkite naują adaptyvaus dizaino lygį.