Hari-hari Awal Kueri Gaya Kontainer

Kami masih di hari-hari awal yang suuuuuper dengan permintaan kontainer. Terlalu dini untuk dukungan browser yang luas, tetapi Chromium sudah mendukungnya, Safari mulai mendukungnya di versi 16, dan Firefox mungkin tidak jauh di belakang.

Sebagian besar percakapan hari-hari awal seputar kueri penampung biasanya membandingkan sintaksis dengan kueri media.

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

Keduanya membuat pertanyaan untuk min-width: 600. Perbedaannya adalah bahwa kueri media melihat lebar viewport untuk memicu perubahan gaya tersebut sementara kueri penampung melihat lebar yang dihitung dari .posts elemen. Manis!

Tapi setelah mendengarkan Podcast CSS Episode 59, Una dan Adam menyodok masa depan kueri kontainer: pertanyaan gaya! Draf kerja saat ini dari spesifikasi CSS Containment Module Level 3 mendefinisikan kueri gaya wadah:

A kueri gaya wadah memungkinkan menanyakan nilai yang dihitung dari wadah kueri. Ini adalah kombinasi boolean dari individu fitur gaya () bahwa setiap kueri satu properti spesifik dari wadah kueri.

Tetapi belum ada contoh tentang sintaks — hanya deskripsi singkat:

Sintaks dari a  sama dengan a pernyataan, dan kuerinya benar jika nilai yang dihitung dari properti yang diberikan pada wadah kueri cocok dengan nilai yang diberikan (yang juga dihitung sehubungan dengan wadah kueri), tidak diketahui apakah properti atau nilainya tidak valid atau tidak didukung, dan salah jika tidak . Sintaks boolean dan logika menggabungkan fitur gaya menjadi permintaan gaya sama seperti untuk Kueri fitur CSS. (Lihat @support.)

Jadi, ya, mengingat waktu yang kita harapkan untuk melakukan sesuatu seperti ini:

.posts {
  container-name: posts;
}

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

Itu contoh yang cukup bodoh. Satu hal yang perlu diperhatikan adalah bahwa container-type tidak lagi berdasarkan wadahnya inline-size tapi oleh style. Kami dapat menghapusnya seperti ini:

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

…tapi semua pertanyaan kontainer adalah style kueri secara default. Sehat. setidaknya seperti yang ada sekarang. Miriam Suzanne memiliki yang bagus garis besar kemungkinan masalah yang mungkin muncul dengan itu.

Di mana menanyakan gaya wadah berguna? Saya belum tahu! Tapi pikiran saya pergi ke beberapa tempat:

• Nilai properti khusus: Kami telah melihat properti khusus yang digunakan seperti indikator status, seperti Metode DRY-switching Ana membahas beberapa waktu lalu. Nilainya berubah, begitu juga gaya.
• Pendekatan mode gelap alternatif: Alih-alih mendasarkan semuanya pada perubahan kelas tubuh yang menetapkan kembali nilai properti khusus, mungkin kita dapat mengubah seluruh palet warna jika, katakanlah, latar belakang tubuh berubah warna.
• Kondisi kueri yang lebih kompleks: Seperti, katakanlah, kami ingin menerapkan gaya ketika size dan style syarat wadah terpenuhi.

Una juga menyebutkan dalam CSS Podcast bahwa kueri gaya kontainer dapat membantu mencegah beberapa situasi penataan gaya yang canggung, seperti jika kita memiliki teks yang dicetak miring dalam teks yang sudah dicetak miring blockquote:

blockquote {
  container-name: quote;
}

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