Zgodnji dnevi poizvedb v slogu vsebnika

Še vedno smo v zelo zgodnjih dneh s poizvedbami o vsebnikih. Prezgodaj je za široko podporo brskalnika, vendar jo Chromium že podpira, Safari začel podpirati v različici 16, Firefox pa verjetno ne zaostaja.

Večina prvih pogovorov, ki se vrtijo okoli vsebniških poizvedb, običajno primerja sintakso z medijskimi poizvedbami.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

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

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Oba postavljata poizvedbe za min-width: 600. Razlika je v tem, da medijska poizvedba gleda na širino vidnega polja, da sproži te spremembe sloga, medtem ko poizvedba vsebnika gleda na izračunano širino .posts element. sladko!

Toda po poslušanju CSS Podcast Epizoda 59, Una in Adam sta razmišljala o prihodnosti poizvedb vsebnikov: stilske poizvedbe! Trenutni delovni osnutek specifikacije CSS Containment Module Level 3 definira poizvedbe v slogu vsebnika:

A poizvedba v slogu vsebnika omogoča poizvedovanje po izračunane vrednosti od vsebnik poizvedbe. Je logična kombinacija posameznika slogovne značilnosti (), da vsaka poizvedba posamezno specifično lastnost vsebnika poizvedbe.

Vendar še ni primerov o sintaksi - le kratek opis:

Sintaksa a  je enako kot za a Izjava, in njena poizvedba je resnična, če se izračunana vrednost dane lastnosti v vsebniku poizvedbe ujema z dano vrednostjo (ki je prav tako izračunana glede na vsebnik poizvedbe), neznana, če je lastnost ali njena vrednost neveljavna ali nepodprta, in napačna v nasprotnem primeru . Kombinacija logične sintakse in logike slogovne značilnosti v slogovna poizvedba je enako kot za Poizvedbe o funkcijah CSS. (Glej @podpira.)

Torej, da, glede na čas bi morali pričakovati, da bomo izvedli nekaj takega:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

To je precej neumen primer. Ena stvar, ki jo je treba opozoriti, je, da container-type ne temelji več na vsebniku inline-size ampak z style. To bi lahko označili takole:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

... ampak vse vsebne poizvedbe so style poizvedbe privzeto. No. vsaj tako, kot je danes. Miriam Suzanne ima lepo oris možnih težav, ki bi se lahko pojavile s tem.

Kje lahko pride prav poizvedovanje po slogih vsebnika? Ne vem še! Ampak moje misli gredo na nekaj mest:

• Vrednosti lastnosti po meri: Videli smo, da se lastnosti po meri uporabljajo kot indikatorji stanja, kot je Metoda DRY-switching Ana je obravnavala že nekaj časa nazaj. Vrednost se spreminja in s tem tudi slogi.
• Nadomestni pristop temnega načina: Namesto da vse temeljimo na spremembi razreda telesa, ki ponovno dodeli vrednosti lastnosti po meri, morda lahko spremenimo celotno barvno paleto, če recimo ozadje telesa spremeni barvo.
• Bolj zapleteni pogoji poizvedbe: Recimo, da želimo uporabiti sloge, ko size in style so izpolnjeni pogoji za zabojnik.

Una je v podcastu CSS omenila tudi, da bi poizvedbe v slogu vsebnika lahko pomagale preprečiti nekatere nerodne situacije oblikovanja, na primer, če imamo poševno besedilo v že poševnem blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}