2025 m. rugpjūčio 21 d.Lietuvių

Ištirkite CSS konteinerių užklausas – kitą reagavimo dizaino evoliuciją. Sužinokite, kaip sukurti prisitaikančius komponentus pagal konteinerio dydį, o ne tik peržiūros lango dydį.

CSS konteinerių užklausos: revoliucingas elementais pagrįstas reagavimo dizainas

Reagavimo dizainas yra pagrindinis tinklalapių kūrimo akmuo jau daugiau nei dešimtmetį. Tradiciškai rėmėmės media užklausomis, kad pritaikytume savo išdėstymus pagal peržiūros lango dydį. Tačiau šis metodas kartais gali atrodyti ribojantis, ypač kai reikia dirbti su sudėtingais, komponentais pagrįstais dizainais. Atėjo CSS konteinerių užklausos – galinga nauja funkcija, leidžianti komponentams prisitaikyti pagal jų konteinerio elemento dydį, o ne tik peržiūros lango dydį.

Kas yra CSS konteinerių užklausos?

Konteinerių užklausos keičia žaidimą, nes jos įgalina elementais pagrįstą reagavimo dizainą. Užuot klausę „Koks yra ekrano dydis?“, galite paklausti „Kiek vietos turi šis komponentas?“. Tai atveria daugybę galimybių kurti tikrai pakartotinai naudojamus ir prisitaikančius komponentus.

Pagalvokite apie kortelės komponentą, kuris gali pasirodyti įvairiuose kontekstuose: siauras šoninis skydelis, plati hero dalis arba kelių stulpelių tinklelis. Naudodami media užklausas, turėtumėte parašyti konkrečias taisykles kiekvienam iš šių scenarijų, atsižvelgdami į peržiūros lango plotį. Naudodama konteinerių užklausas, kortelė gali protingai reguliuoti savo išdėstymą ir stilių, atsižvelgdama į savo pagrindinio konteinerio matmenis, nepaisant bendro ekrano dydžio.

Kodėl naudoti konteinerių užklausas?

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

Patobulintas komponentų pakartotinis naudojimas: Kurkite komponentus, kurie sklandžiai prisitaiko prie skirtingų išdėstymų, nereikalaujant sudėtingos media užklausos logikos.
Supaprastintas kodas: Sumažinkite CSS kiekį, kurio reikia, į kapsuliuodami reagavimo elgseną pačiame komponente.
Patobulintas prižiūrimumas: Palengvinkite savo kodų bazės atnaujinimą ir priežiūrą, izoliuodami reagavimo logiką į atskirus komponentus.
Intuityvesnis dizainas: Kurkite komponentus, kurie reaguoja į jų tiesioginę aplinką, todėl naudotojo patirtis tampa natūralesnė ir nuspėjamesnė.
Didesnis lankstumas: Pasiekite sudėtingesnį ir niuansuotesnį reagavimo dizainą, kurį sunku arba neįmanoma pasiekti tik naudojant media užklausas.

Kaip įdiegti CSS konteinerių užklausas

Panagrinėkime praktinius konteinerių užklausų naudojimo aspektus. Pirmas žingsnis – deklaruoti konteinerį. Tai galite padaryti naudodami ypatybę container-type pagrindiniame elemente:

1. Konteinerio apibrėžimas

Ypatybė container-type priima keletą reikšmių:

size: Konteinerių užklausos reaguos į abiejų konteinerio linijinius ir bloko matmenis.
inline-size: Konteinerių užklausos reaguos tik į linijinį (plotis horizontaliais rašymo režimais) konteinerio matmenį. Tai yra dažniausias ir dažnai naudingiausias variantas.
block-size: Konteinerių užklausos reaguos tik į bloko (aukštis horizontaliais rašymo režimais) konteinerio matmenį.
normal: Elementas nėra užklausos konteineris. Tai yra numatytoji reikšmė.
style: Konteinerių užklausos reaguos į stiliaus užklausas ir konteinerio pavadinimo užklausas (aptariamas vėliau), todėl galėsite užklausti pasirinktines ypatybes, nustatytas konteineryje.

Štai konteinerio, kuris reaguoja į jo linijinį dydį, apibrėžimo pavyzdys:


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

Taip pat galite naudoti trumpinį container ypatybę, kad vienu deklaravimu nurodytumėte ir container-type, ir container-name (kurį aptarsime vėliau):


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

Šiuo atveju „card“ yra konteinerio pavadinimas.

2. Konteinerių užklausų rašymas

Apibrėžę konteinerį, galite naudoti @container taisyklę, kad parašytumėte savo užklausas. Sintaksė yra panaši į media užklausas, bet vietoj to, kad būtų taikoma peržiūros lango matmenims, taikote konteinerio matmenims:


@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
  .card__content {
    width: 50%;
  }
}

Šiame pavyzdyje taikome „card“ konteineriui ir taikome stilius .card, .card__image ir .card__content elementams, kai konteinerio plotis yra ne mažesnis kaip 400 pikselių. Atkreipkite dėmesį į `card` prieš `(min-width: 400px)`. Tai labai svarbu, kai konteineriui suteikėte pavadinimą naudodami container-name arba trumpinio ypatybę container.

Jei nesuteikėte konteineriui pavadinimo, galite praleisti konteinerio pavadinimą:


@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
  .card__content {
    width: 50%;
  }
}

Galite naudoti tą patį media funkcijų diapazoną, kuris yra prieinamas media užklausose, pvz., min-width, max-width, min-height, max-height ir orientacija.

3. Konteinerių pavadinimai

Konteinerių pavadinimų suteikimas gali būti naudingas, ypač kai reikia dirbti su įdėtais konteineriais ar sudėtingais išdėstymais. Konteineriui galite priskirti pavadinimą naudodami ypatybę container-name:


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

Tada savo konteinerių užklausose galite nukreipti konteinerį pagal jo pavadinimą:


@container card (min-width: 400px) {
  /* Styles for the 'card' container */
}

4. Stiliaus užklausos

Konteinerių stiliaus užklausos leidžia reaguoti į jūsų konteinerio stilių, o ne į jo dydį. Tai ypač galingas derinant su pasirinktinėmis ypatybėmis. Pirmiausia turite apibrėžti konteinerį su container-type: style:


.component-container {
  container-type: style;
}

Tada galite naudoti @container style(--theme: dark), kad užklaustumėte pasirinktinės ypatybės --theme reikšmę:


.component-container {
  --theme: light;
}

@container style(--theme: dark) {
  .component {
    background-color: black;
    color: white;
  }
}

Tai leidžia jūsų komponentams prisitaikyti pagal konfigūraciją, kuri nustatoma naudojant CSS, o ne peržiūros lango dydį. Tai atveria puikias temų ir dinaminio stiliaus galimybes.

Praktiniai konteinerių užklausų pavyzdžiai

Pažvelkime į keletą konkrečių pavyzdžių, kaip konteinerių užklausos gali būti naudojamos realiame pasaulyje:

1 pavyzdys: Kortelės komponentas

Įsivaizduokite kortelės komponentą, kuriame rodoma informacija apie produktą. Siaurame konteineryje galbūt norėsime sukrauti vaizdą ir turinį vertikaliai. Platesniame konteineryje galime juos rodyti vienas šalia kito.

HTML:


<div class="card-container">
  <div class="card">
    <img class="card__image" src="product.jpg" alt="Product Image">
    <div class="card__content">
      <h3 class="card__title">Product Title</h3>
      <p class="card__description">Product description goes here.</p>
      <a href="#" class="card__link">Learn More</a>
    </div>
  </div>
</div>

CSS:


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

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

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__content {
  width: 100%;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
    margin-bottom: 0;
  }
  .card__content {
    width: 50%;
  }
}

Šiame pavyzdyje kortelė iš pradžių rodys vaizdą ir turinį, sukrautus vertikaliai. Kai konteinerio plotis pasieks 400 pikselių, kortelė persijungs į horizontalųjį išdėstymą.

2 pavyzdys: Navigacijos meniu

Apsvarstykite navigacijos meniu, kurį reikia pritaikyti pagal turimą vietą. Siaurame konteineryje (pvz., mobiliajame šoniniame skydelyje) galime norėti rodyti meniu elementus vertikaliame sąraše. Platesniame konteineryje (pvz., darbalaukio antraštėje) galime juos rodyti horizontaliai.

HTML:


<nav class="nav-container">
  <ul class="nav">
    <li class="nav__item"><a href="#">Home</a></li>
    <li class="nav__item"><a href="#">Products</a></li>
    <li class="nav__item"><a href="#">Services</a></li>
    <li class="nav__item"><a href="#">About</a></li>
    <li class="nav__item"><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:


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

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

.nav__item {
  margin-bottom: 8px;
}

.nav__item a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav {
    display: flex;
  }
  .nav__item {
    margin-right: 16px;
    margin-bottom: 0;
  }
  .nav__item a {
    display: inline-block;
  }
}

Šiame pavyzdyje navigacijos meniu iš pradžių rodys elementus vertikaliame sąraše. Kai konteinerio plotis pasieks 600 pikselių, meniu persijungs į horizontalųjį išdėstymą.

3 pavyzdys: Straipsnio išdėstymas su pagrindiniu vaizdu

Įsivaizduokite straipsnio išdėstymą, kurį reikia pritaikyti priklausomai nuo to, kur jis yra. Jei esate mažame peržiūros skyriuje, vaizdas turėtų būti virš teksto. Jei tai pagrindinis straipsnis, vaizdas gali būti šone.

HTML


<article class="article-container">
    <div class="article">
        <img src="article-image.jpg" alt="Article Image" class="article-image">
        <div class="article-content">
            <h2>Article Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
</article>

CSS


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

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

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

.article-content {
    width: 100%;
}

@container (min-width: 768px) {
    .article {
        flex-direction: row;
    }

    .article-image {
        width: 40%;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .article-content {
        width: 60%;
    }
}

Naršyklės palaikymas

Naršyklių palaikymas konteinerių užklausoms dabar yra puikus šiuolaikinėse naršyklėse, įskaitant „Chrome“, „Firefox“, „Safari“ ir „Edge“. Svarbu patikrinti Can I Use naujausią informaciją apie naršyklės palaikymą, nes funkcijos ir diegimo detalės gali keistis.

Apsvarstymai ir geriausia praktika

Veikimas: Nors konteinerių užklausos suteikia didelių pranašumų, svarbu atkreipti dėmesį į veikimą. Pernelyg didelis sudėtingų konteinerių užklausų naudojimas gali turėti įtakos atvaizdavimo veikimui, ypač senesniuose įrenginiuose. Kruopščiai išbandykite ir optimizuokite savo kodą pagal poreikį.
Įdėjimas: Konteinerių užklausos gali būti įdėtos, todėl galite kurti dar sudėtingesnius ir prisitaikančius dizainus. Tačiau būkite atsargūs, kad neperkomplikuotumėte savo išdėstymų, nes tai gali apsunkinti jų supratimą ir priežiūrą.
Specifiškumas: Konteinerių užklausos turi didesnį specifiškumą nei media užklausos, todėl žinokite, kaip jos sąveikauja su kitomis CSS taisyklėmis. Jei susiduriate su netikėtu stiliaus elgesiu, naudokite CSS specifiškumo įrankius.
Progresyvus patobulinimas: Apsvarstykite konteinerių užklausų naudojimą kaip progresyvų patobulinimą. Pateikite pagrindinį išdėstymą, kuris gerai veikia be konteinerių užklausų, o tada naudokite konteinerių užklausas, kad pagerintumėte išdėstymą naršyklėse, kurios jas palaiko.
Dizaino sistemos: Konteinerių užklausos ypač tinka naudoti dizaino sistemose. Jie leidžia kurti pakartotinai naudojamus komponentus, kurie gali būti lengvai pritaikyti skirtingiems kontekstams jūsų programoje.

Konteinerių užklausos ir media užklausos: kada ką naudoti?

Nors konteinerių užklausos siūlo galingą alternatyvą media užklausoms, svarbu suprasti, kada kiekvienas metodas yra tinkamiausias.

Media užklausos: Naudokite media užklausas, kai reikia pritaikyti išdėstymą pagal bendrą ekrano dydį arba įrenginio charakteristikas (pvz., orientaciją, skiriamąją gebą). Media užklausos idealiai tinka atliekant didelius išdėstymo pakeitimus, siekiant užtikrinti, kad jis būtų naudojamas skirtinguose įrenginiuose.
Konteinerių užklausos: Naudokite konteinerių užklausas, kai reikia pritaikyti atskirus komponentus pagal jiems prieinamą vietą. Konteinerių užklausos idealiai tinka kuriant pakartotinai naudojamus komponentus, kurie gali sklandžiai prisitaikyti prie skirtingų kontekstų jūsų programoje.

Daugeliu atvejų greičiausiai naudosite abiejų media užklausų ir konteinerių užklausų derinį. Naudokite media užklausas, kad nustatytumėte bendrą savo programos išdėstymą, o tada naudokite konteinerių užklausas, kad patikslintumėte atskirų komponentų išvaizdą ir elgesį tame išdėstyme.

Reagavimo dizaino ateitis

CSS konteinerių užklausos yra reikšmingas žingsnis į priekį reagavimo dizaino evoliucijoje. Įjungdamos elementais pagrįstą reagavimą, jos suteikia kūrėjams galimybę kurti lankstesnius, pakartotinai naudojamus ir prižiūrimus komponentus. Kadangi naršyklių palaikymas ir toliau gerėja, konteinerių užklausos taps pagrindiniu įrankiu kiekvieno tinklalapių kūrėjo arsenale.

Pasauliniai aspektai

Įgyvendindami konteinerių užklausas pasaulinei auditorijai, apsvarstykite šiuos dalykus:

Teksto kryptis: Užtikrinkite, kad jūsų konteinerių užklausos tinkamai veiktų su teksto kryptimis iš kairės į dešinę (LTR) ir iš dešinės į kairę (RTL). Naudokite logines ypatybes, pvz., inline-start ir inline-end, o ne fizines ypatybes, pvz., left ir right.
Šrifto dydžiai: Skirtingiems kalboms gali prireikti skirtingo šrifto dydžio, kad būtų optimalus įskaitomumas. Naudokite santykinius šrifto dydžius (pvz., em, rem), kad jūsų tekstas būtų atitinkamai skaliamas.
Turinio ilgis: Kai kurioms kalboms gali prireikti daugiau vietos tai pačiai informacijai išreikšti nei anglų kalbai. Būtinai išbandykite savo išdėstymus su skirtingomis kalbomis, kad įsitikintumėte, jog jūsų komponentai gali talpinti įvairų turinio ilgį.
Kultūrinės konvencijos: Kurdami savo komponentus atkreipkite dėmesį į kultūrines konvencijas. Pavyzdžiui, vaizdų ir teksto išdėstymas gali skirtis įvairiose kultūrose.

Išvada

CSS konteinerių užklausos yra galingas įrankis kuriant tikrai reaguojančias ir prisitaikančias žiniatinklio programas. Priimdami elementais pagrįstą reagavimo dizainą, galite kurti komponentus, kurie sklandžiai prisitaiko prie skirtingų kontekstų, supaprastinti savo kodą ir pagerinti bendrą naudotojo patirtį. Kadangi naršyklių palaikymas ir toliau auga, konteinerių užklausos taps pagrindine šiuolaikinio tinklalapių kūrimo dalimi. Pasinaudokite šia technologija, eksperimentuokite su jos galimybėmis ir atskleiskite naują lankstumo lygį savo reagavimo dizaine. Šis metodas leidžia geriau pakartotinai naudoti komponentus, prižiūrėti juos ir intuityvesnį dizaino procesą, todėl tai yra neįkainojamas turtas visame pasaulyje dirbantiems priekinės dalies kūrėjams. Perėjimas prie konteinerių užklausų skatina labiau į komponentus orientuotą dizaino metodą, todėl naudotojai visame pasaulyje gauna patvaresnę ir pritaikomesnę žiniatinklio patirtį.