Tidlige dage med forespørgsler om containerstil

Vi er stadig i suuuuuper tidlige dage med containerforespørgsler. For tidligt for bred browserunderstøttelse, men Chromium understøtter det allerede, Safari begyndte at understøtte det i version 16, og Firefox er formentlig ikke langt tilbage.

De fleste tidlige dages samtaler, der drejer sig om containerforespørgsler, sammenligner normalt syntaksen med medieforespørgsler.

/* 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 stiller spørgsmål til min-width: 600. Forskellen er, at medieforespørgslen kigger på visningsportens bredde for at udløse disse stilændringer, mens containerforespørgslen ser på den beregnede bredde af .posts element. Sød!

Men efter at have lyttet til CSS Podcast afsnit 59, Una og Adam kiggede på fremtiden for containerforespørgsler: stilforespørgsler! Det aktuelle arbejdsudkast til CSS Containment Module Level 3 spec definerer containerstilforespørgsler:

A containerstil forespørgsel gør det muligt at forespørge om beregnede værdier af forespørgselsbeholder. Det er en boolsk kombination af individ stiltræk (), at hver forespørgsel efter en enkelt, specifik egenskab for forespørgselscontaineren.

Men ingen eksempler på syntaks endnu - kun en kort beskrivelse:

Syntaksen af ​​en  er det samme som for en erklæring, og dens forespørgsel er sand, hvis den beregnede værdi af den givne egenskab på forespørgselscontaineren matcher den givne værdi (som også beregnes med hensyn til forespørgselscontaineren), ukendt om egenskaben eller dens værdi er ugyldig eller ikke understøttet, og ellers falsk . Den boolske syntaks og logik kombinerer stiltræk i en stilforespørgsel er det samme som for CSS-funktionsforespørgsler. (Se @bakker op.)

Så ja, givet tid bør vi forvente at udføre noget 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 ret dumt eksempel. En ting at bemærke er, at container-type er ikke længere baseret på containerens inline-size men af style. Det kunne vi godt uddybe sådan:

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

…men alle containerforespørgsler er style forespørgsler som standard. Godt. i hvert fald som det ser ud i dag. Miriam Suzanne har en dejlig en oversigt over de mulige problemer, der kan dukke op med det.

Hvor kan det være nyttigt at forespørge på en containers typografier? Jeg ved det ikke endnu! Men mit sind går til et par steder:

• Tilpassede ejendomsværdier: Vi har set brugerdefinerede egenskaber brugt som tilstandsindikatorer, såsom DRY-switching metode Ana dækkede et stykke tid tilbage. Værdien ændrer sig, og det samme gør stilarter.
• Alternativ mørk tilstandstilgang: I stedet for at basere det hele på en kropsklasseændring, der gentildeler brugerdefinerede egenskabsværdier, kan vi måske ændre en hel farvepalet, hvis f.eks. kropsbaggrunden ændrer farve.
• Mere komplekse forespørgselsbetingelser: Som f.eks. ønsker vi at anvende stilarter, når size , style betingelserne for en container er opfyldt.

Una nævnte også i CSS-podcasten, at forespørgsler i containerstil kunne hjælpe med at forhindre nogle akavede stylingssituationer, som hvis vi tilfældigvis har kursiveret tekst i en allerede kursiv blockquote:

blockquote {
  container-name: quote;
}

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