Tidlige dager med spørsmål om containerstil

Vi er fortsatt i suuuuuper tidlige dager med containerforespørsler. For tidlig for bred nettleserstøtte, men Chromium støtter det allerede, Safari begynte å støtte det i versjon 16, og Firefox er antagelig ikke langt bak.

De fleste tidlige samtaler som dreier seg om containerspørringer sammenligner vanligvis syntaksen med mediespørringer.

/* 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;
  }
}

Begge disse spør etter min-width: 600. Forskjellen er at mediespørringen ser på visningsportens bredde for å utløse disse stilendringene mens beholderspørringen ser på den beregnede bredden til .posts element. Søt!

Men etter å ha hørt på CSS Podcast Episode 59Una og Adam kikket på fremtiden for containerspørsmål: stilspørsmål! Det gjeldende arbeidsutkastet til CSS Containment Module Level 3-spesifikasjonen definerer beholderstilspørringer:

A beholderstilsøk gjør det mulig å spørre etter beregnede verdier av spørringsbeholder. Det er en boolsk kombinasjon av individ stilfunksjoner () som hver spør etter en enkelt, spesifikk egenskap for spørringsbeholderen.

Men ingen eksempler på syntaks ennå - bare en kort beskrivelse:

Syntaksen til en  er det samme som for a erklæring, og søket er sant hvis den beregnede verdien til den gitte egenskapen på spørringsbeholderen samsvarer med den gitte verdien (som også beregnes med hensyn til spørringsbeholderen), ukjent om egenskapen eller dens verdi er ugyldig eller ikke støttet, og falsk ellers . Den boolske syntaksen og logikken kombinerer stilfunksjoner inn i en stilsøk er det samme som for Spørringer om CSS-funksjoner. (Se @støtter.)

Så, ja, gitt tid bør vi forvente å få til noe som dette:

.posts {
  container-name: posts;
}

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

Det er et ganske dumt eksempel. En ting å merke seg er at container-type er ikke lenger basert på containerens inline-size men av style. Vi kunne avsløre det slik:

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

…men alle beholderforespørsler er style spørringer som standard. Vi vil. i hvert fall slik det er i dag. Miriam Suzanne har en fin oversikt over mulige problemer som kan dukke opp med det.

Hvor kan det være nyttig å spørre etter en beholders stiler? Jeg vet ikke ennå! Men tankene mine går til et par steder:

• Egenskapsverdier: Vi har sett tilpassede egenskaper brukt som tilstandsindikatorer, for eksempel DRY-switching metode Ana dekket for en stund tilbake. Verdien endres, og det samme gjør stiler.
• Alternativ tilnærming til mørk modus: I stedet for å basere det hele på en kroppsklasseendring som tilordner egendefinerte egenskapsverdier på nytt, kan vi kanskje endre en hel fargepalett hvis for eksempel kroppsbakgrunnen endrer farge.
• Mer komplekse søkebetingelser: Som for eksempel ønsker vi å bruke stiler når size og style vilkårene for en container er oppfylt.

Una nevnte også i CSS-podcasten at beholderstilspørringer kan bidra til å forhindre noen vanskelige stilsituasjoner, som hvis vi tilfeldigvis har kursiv tekst i en allerede kursiv blockquote:

blockquote {
  container-name: quote;
}

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