M

MLOG

Lietuvių

Įvaldykite CSS konteinerių užklausas tikrai responsyviam interneto dizainui. Išmokite pritaikyti maketus pagal konteinerio dydį, o ne tik pagal peržiūros langą, siekiant vientisos vartotojo patirties visuose įrenginiuose.

Responsinio dizaino atvėrimas: Išsamus CSS konteinerių užklausų vadovas

Daugelį metų responsyvus interneto dizainas daugiausia rėmėsi medijos užklausomis (media queries), kurios leido svetainėms pritaikyti savo maketą ir stilių pagal peržiūros lango plotį ir aukštį. Nors šis metodas yra veiksmingas, kartais jis gali atrodyti ribojantis, ypač dirbant su sudėtingais komponentais, kuriuos reikia pritaikyti nepriklausomai nuo bendro ekrano dydžio. Pristatome CSS konteinerių užklausas (CSS Container Queries) – galingą naują įrankį, leidžiantį elementams reaguoti į juos talpinančio elemento dydį, o ne į patį peržiūros langą. Tai atveria naują lankstumo ir tikslumo lygį responsyviame dizaine.

Kas yra CSS konteinerių užklausos?

CSS konteinerių užklausos yra CSS funkcija, leidžianti taikyti stilius elementui atsižvelgiant į jo pagrindinio konteinerio dydį ar kitas savybes. Skirtingai nuo medijos užklausų, kurios yra nukreiptos į peržiūros langą, konteinerių užklausos yra nukreiptos į konkretų elementą. Tai leidžia kurti komponentus, kurie pritaiko savo stilių pagal turimą erdvę savo konteineryje, nepriklausomai nuo ekrano dydžio.

Įsivaizduokite kortelės komponentą, kuris rodomas skirtingai, priklausomai nuo to, ar jis yra siauroje šoninėje juostoje, ar plačioje pagrindinio turinio srityje. Naudojant medijos užklausas, jums tektų koreguoti kortelės stilių pagal ekrano dydį, o tai galėtų sukelti neatitikimų. Naudojant konteinerių užklausas, galite apibrėžti stilius, kurie taikomi būtent tada, kai kortelės konteineris pasiekia tam tikrą plotį, užtikrinant nuoseklią ir responsyvią patirtį skirtinguose maketuose.

Kodėl verta naudoti konteinerių užklausas?

Konteinerių užklausos siūlo keletą pranašumų, palyginti su tradicinėmis medijos užklausomis:

Kaip įgyvendinti CSS konteinerių užklausas

CSS konteinerių užklausų įgyvendinimas susideda iš dviejų pagrindinių žingsnių: konteinerio apibrėžimo ir užklausų rašymo.

1. Konteinerio apibrėžimas

Pirma, turite nurodyti elementą kaip *konteinerį*. Tai daroma naudojant container-type savybę. Yra dvi pagrindinės container-type reikšmės:

Taip pat galite naudoti container-name, kad suteiktumėte savo konteineriui pavadinimą, kas gali būti naudinga norint nukreipti užklausas į konkrečius konteinerius. Pavyzdžiui:

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

Šis kodas deklaruoja elementą su klase .card-container kaip konteinerį. Nurodome inline-size, kad būtų galima atlikti užklausas pagal konteinerio plotį. Taip pat suteikėme jam pavadinimą cardContainer.

2. Konteinerių užklausų rašymas

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

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Ši užklausa taiko stilius riestiniuose skliaustuose tik tada, kai konteineris, pavadintas cardContainer, turi mažiausiai 400px plotį. Ji nukreipta į .card elementą (tikėtina, .card-container vaiką) ir koreguoja jo maketą. Jei konteineris yra siauresnis nei 400px, šie stiliai nebus taikomi.

Sutrumpinimas: Taip pat galite naudoti sutrumpintą @container taisyklės versiją, kai nereikia nurodyti konteinerio pavadinimo:

@container (min-width: 400px) {
  /* Stiliai, taikomi, kai konteineris yra bent 400px pločio */
}

Praktiniai konteinerių užklausų pavyzdžiai

Pažvelkime į keletą praktinių pavyzdžių, kaip galite naudoti konteinerių užklausas kuriant responsyvesnius ir lengviau pritaikomus maketus.

1 pavyzdys: Kortelės komponentas

Šis pavyzdys parodo, kaip pritaikyti kortelės komponentą pagal jo konteinerio plotį. Kortelė rodys savo turinį viename stulpelyje, kai konteineris yra siauras, ir dviejuose stulpeliuose, kai konteineris yra platesnis.

HTML:


  

    Kortelės paveikslėlis
    

      
Kortelės pavadinimas

      
Tai yra pavyzdinis kortelės turinys.

      Skaityti daugiau

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Šiame pavyzdyje .card-container yra deklaruotas kaip konteineris. Kai konteinerio plotis yra mažesnis nei 500px, .card naudos stulpelio maketą, išdėstydamas paveikslėlį ir turinį vertikaliai. Kai konteinerio plotis yra 500px ar daugiau, .card pereis į eilutės maketą, rodydamas paveikslėlį ir turinį vienas šalia kito.

2 pavyzdys: Navigacijos meniu

Šis pavyzdys parodo, kaip pritaikyti navigacijos meniu pagal turimą erdvę. Kai konteineris yra siauras, meniu punktai bus rodomi išskleidžiamajame sąraše. Kai konteineris yra platesnis, meniu punktai bus rodomi horizontaliai.

HTML:

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

Šiame pavyzdyje .nav-container yra deklaruotas kaip konteineris. Kai konteinerio plotis yra mažesnis nei 600px, meniu punktai bus rodomi kaip vertikalus sąrašas. Kai konteinerio plotis yra 600px ar daugiau, meniu punktai bus rodomi horizontaliai naudojant flexbox.

3 pavyzdys: Produktų sąrašas

El. prekybos produktų sąrašas gali pritaikyti savo maketą pagal konteinerio plotį. Mažesniuose konteineriuose puikiai tinka paprastas sąrašas su produkto paveikslėliu, pavadinimu ir kaina. Konteineriui didėjant, galima pridėti papildomos informacijos, pvz., trumpą aprašymą ar klientų įvertinimą, kad pagerintumėte pateikimą. Tai taip pat leidžia detalesnį valdymą, nei nukreipiant užklausas tik į peržiūros langą.

HTML:


  

    Produktas 1
    
Produkto pavadinimas 1

    
19.99 €

  

  

    Produktas 2
    
Produkto pavadinimas 2

    
24.99 €

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Šis CSS kodas pirmiausia nustato `product-listing-container` kaip konteinerį. Siauruose konteineriuose (mažiau nei 400px), kiekvienas produktas užima 100% pločio. Kai konteineris išauga virš 400px, produktai išdėstomi dviejuose stulpeliuose. Virš 768px, produktai rodomi trijuose stulpeliuose.

Naršyklių palaikymas ir polifilai

Konteinerių užklausos turi gerą palaikymą moderniose naršyklėse, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau senesnės naršyklės gali jų nepalaikyti.

Norėdami palaikyti senesnes naršykles, galite naudoti polifilą (polyfill). Populiarus pasirinkimas yra container-query-polyfill, kurį galima rasti npm ir GitHub. Polifilai užpildo nepalaikomų funkcijų spragas, leisdami naudoti konteinerių užklausas net senesnėse naršyklėse.

Geriausios konteinerių užklausų naudojimo praktikos

Štai keletas geriausių praktikų, kurių reikėtų nepamiršti naudojant konteinerių užklausas:

Dažniausios klaidos ir kaip jų išvengti

Konteinerių užklausos vs. Medijos užklausos: tinkamo įrankio pasirinkimas

Nors konteinerių užklausos siūlo didelių pranašumų, medijos užklausos vis dar turi savo vietą responsyviame dizaine. Štai palyginimas, padėsiantis nuspręsti, kuris įrankis geriausiai tinka skirtingoms situacijoms:

Savybė Konteinerių užklausos Medijos užklausos
Taikinys Konteinerio dydis Peržiūros lango dydis
Responsyvumas Komponentais pagrįstas Puslapiu pagrįstas
Lankstumas Aukštas Vidutinis
Kodo dubliavimas Mažesnis Didesnis
Naudojimo atvejai Daugkartinio naudojimo komponentai, sudėtingi maketai Visuotiniai maketo koregavimai, pagrindinis responsyvumas

Apskritai, naudokite konteinerių užklausas, kai reikia pritaikyti komponento stilių pagal jo konteinerio dydį, ir naudokite medijos užklausas, kai reikia atlikti visuotinius maketo pakeitimus pagal peržiūros lango dydį. Dažnai geriausias metodas yra abiejų technikų derinys.

Responsinio dizaino ateitis su konteinerių užklausomis

Konteinerių užklausos yra reikšmingas žingsnis į priekį responsyviame dizaine, siūlančios didesnį lankstumą ir kontrolę, kaip elementai prisitaiko prie skirtingų kontekstų. Kadangi naršyklių palaikymas ir toliau gerėja, tikėtina, kad konteinerių užklausos taps vis svarbesniu įrankiu interneto kūrėjams. Jos suteikia dizaineriams ir programuotojams galimybę kurti tikrai prisitaikančias ir patogias vartotojui svetaines, kurios užtikrina vientisą patirtį visuose įrenginiuose ir ekrano dydžiuose.

Išvada

CSS konteinerių užklausos yra galingas responsyvaus dizaino įrankių rinkinio papildymas. Leisdamos elementams reaguoti į juos talpinančio elemento dydį, jos įgalina tikrą komponentais pagrįstą responsyvumą ir atveria naujus lankstumo bei tikslumo lygius interneto dizaine. Suprasdami, kaip efektyviai įgyvendinti ir naudoti konteinerių užklausas, galite kurti lengviau pritaikomas, prižiūrimas ir patogesnes vartotojui svetaines, kurios suteikia geresnę patirtį visiems.

Ištekliai