Tidiga dagar med frågor om containerstil

Vi är fortfarande i suuuuuper tidiga dagar med containerfrågor. För tidigt för brett webbläsarstöd, men Chromium stöder det redan, Safari började stödja det i version 16, och Firefox är förmodligen inte långt efter.

De flesta tidiga konversationer som kretsar kring containerfrågor jämför vanligtvis syntaxen med mediafrågor.

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

Båda dessa ställer frågor om min-width: 600. Skillnaden är att mediefrågan tittar på visningsportens bredd för att utlösa dessa stiländringar medan behållarfrågan tittar på den beräknade bredden av .posts element. Ljuv!

Men efter att ha lyssnat på CSS Podcast avsnitt 59, Una och Adam pekade på framtiden för containerfrågor: stilfrågor! Det aktuella arbetsutkastet av CSS Containment Module Level 3 spec definierar behållarstilsfrågor:

A fråga om behållarstil gör det möjligt att fråga efter beräknade värden av frågebehållare. Det är en boolesk kombination av individ stilfunktioner () att varje fråga efterfrågar en enskild, specifik egenskap för frågebehållaren.

Men inga exempel på syntax ännu - bara en kort beskrivning:

Syntaxen för a  är samma som för a deklarationen, och dess fråga är sann om det beräknade värdet för den givna egenskapen på frågebehållaren matchar det givna värdet (som också beräknas med avseende på frågebehållaren), okänt om egenskapen eller dess värde är ogiltigt eller inte stöds, och falskt annars . Kombinationen av boolesk syntax och logik stilfunktioner in en stilfråga är samma som för CSS-funktionsfrågor. (Se @stödjer.)

Så, ja, givet tid bör vi förvänta oss att åstadkomma något i stil med detta:

.posts {
  container-name: posts;
}

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

Det är ett ganska dumt exempel. En sak att notera är att container-type är inte längre baserat på containerns inline-size men av style. Vi skulle kunna ta hand om det så här:

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

…men alla containerförfrågningar är style frågor som standard. Väl. åtminstone som det ser ut idag. Miriam Suzanne har en trevlig översikt över möjliga problem som kan dyka upp med det.

Var kan det vara praktiskt att fråga efter en behållares stilar? Jag vet inte än! Men mina tankar går till ett par ställen:

• Anpassade egendomsvärden: Vi har sett anpassade egenskaper som används som tillståndsindikatorer, till exempel DRY-switching-metod Ana dök upp för ett tag sedan. Värdet ändras, och det gör stilar också.
• Alternativ mörkt läge: Istället för att basera allt på en kroppsklassändring som omtilldelar anpassade egenskapsvärden, kanske vi kan ändra en hel färgpalett om, säg, kroppsbakgrunden ändrar färg.
• Mer komplexa frågevillkor: Som, säg, vi vill tillämpa stilar när size och style villkoren för en container är uppfyllda.

Una nämnde också i CSS-podden att frågor i containerstil kan hjälpa till att förhindra vissa besvärliga stilsituationer, som om vi råkar ha kursiverad text i en redan kursiverad blockquote:

blockquote {
  container-name: quote;
}

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