Vroege dagen van containerstijlquery's

We zijn nog steeds in suuuuuper vroege dagen met containervragen. Te vroeg voor brede browserondersteuning, maar Chromium ondersteunt het al, Safari begon het te ondersteunen in versie 16, en Firefox is vermoedelijk niet ver achter.

De meeste vroege gesprekken die draaien om containerquery's, vergelijken de syntaxis meestal met mediaquery's.

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

Beiden stellen vragen voor: min-width: 600. Het verschil is dat de mediaquery kijkt naar de breedte van de viewport om die stijlwijzigingen te activeren, terwijl de containerquery kijkt naar de berekende breedte van de .posts element. Zoet!

Maar na het beluisteren van CSS Podcast Aflevering 59, Una en Adam prikten in de toekomst van containerquery's: stijlquery's! Het huidige werkconcept van de CSS Containment Module Level 3 spec definieert query's in containerstijl:

A query in containerstijl maakt het mogelijk om de berekende waarden van de querycontainer. Het is een booleaanse combinatie van individuele stijlkenmerken () die elk een enkele, specifieke eigenschap van de querycontainer opvragen.

Maar nog geen voorbeelden van syntaxis - slechts een korte beschrijving:

De syntaxis van a  is hetzelfde als voor a verklaring, en de query is waar als de berekende waarde van de opgegeven eigenschap in de querycontainer overeenkomt met de opgegeven waarde (die ook wordt berekend met betrekking tot de querycontainer), onbekend of de eigenschap of de waarde ervan ongeldig of niet-ondersteund is, en anders false . De combinatie van booleaanse syntaxis en logica stijlkenmerken een stijlquery is hetzelfde als voor CSS-functiequery's. (Zie @ondersteunt.)

Dus, ja, gezien de tijd die we zouden moeten verwachten om zoiets als dit voor elkaar te krijgen:

.posts {
  container-name: posts;
}

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

Dat is een nogal dom voorbeeld. Een ding om op te merken is dat de container-type is niet langer gebaseerd op de container inline-size maar bij style. We zouden dat als volgt kunnen aangeven:

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

…maar alle containervragen zijn: style standaard zoekopdrachten. We zullen. tenminste zoals het er nu uitziet. Miriam Suzanne heeft een leuke overzicht van de mogelijke problemen die zich kunnen voordoen met dat.

Waar kan het opvragen van de stijlen van een container van pas komen? Ik weet het nog niet! Maar mijn gedachten gaan naar een paar plaatsen:

• Aangepaste eigenschapswaarden: We hebben gezien dat aangepaste eigenschappen worden gebruikt als statusindicatoren, zoals de DRY-switching-methode die Ana een tijdje terug heeft behandeld. De waarde verandert, evenals stijlen.
• Alternatieve donkere modusbenadering: In plaats van alles te baseren op een wijziging van de lichaamsklasse die aangepaste eigenschapswaarden opnieuw toewijst, kunnen we misschien een heel kleurenpalet veranderen als, laten we zeggen, de achtergrond van het lichaam van kleur verandert.
• Meer complexe queryvoorwaarden: Zoals, laten we zeggen, we willen stijlen toepassen wanneer de size en style voorwaarden voor een container is voldaan.

Una vermeldde ook in de CSS-podcast dat query's in containerstijl kunnen helpen om ongemakkelijke stijlsituaties te voorkomen, bijvoorbeeld als we toevallig cursieve tekst hebben in een al cursieve blockquote:

blockquote {
  container-name: quote;
}

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