Container Style Queries Overview

Size query menanyakan seberapa besar wadah, sementara kebutuhan lain juga sering muncul: mengubah gaya komponen berdasarkan nilai yang diwariskan wadahnya — misalnya sebuah area menetapkan --tema: gelap dan semua kartu di dalamnya ikut berganti tema tanpa selector tambahan. Kebutuhan tersebut dijawab oleh style query dengan sintaks @container style(...). Fitur ini berada di rel Baseline yang belum tuntas: style query didukung penuh pada browser Chromium sejak 2023, lalu Firefox dan Safari menambahkannya pada 2025–2026. Karena belum merupakan Baseline penuh, style query wajib dibungkus pola progressive enhancement agar halaman tetap berfungsi baik di browser yang mendukung maupun yang belum.

Menanyakan Nilai Custom Property #

Style query mengevaluasi nilai computed dari custom property pada elemen container. Bentuknya:

@container style(--tema: gelap) {
  .kartu { border-color: rgb(51, 65, 85); }
}

Kondisi style(--tema: gelap) bernilai benar bila custom property --tema pada container terdekat bernilai gelap. Berbeda dari size query, style query tidak menuntut container-type tertentu — meski dalam praktik kita tetap menandai container secara eksplisit agar niatnya terbaca dan konsisten dengan container lain. Perlu dicatat pula batasannya saat ini: style query untuk custom property inilah yang paling luas didukung; kondisi berbasis properti biasa seperti style(color: red) masih berbeda dukungannya antarbrowser, sehingga custom property adalah pilihan yang paling aman.

Pola Progressive Enhancement dengan @supports #

Strategi yang kita pakai terdiri dari dua lapis. Lapis pertama adalah gaya dasar (tema terang) yang ditulis di luar semua blok bersyarat — gaya inilah yang tampil di browser tanpa dukungan style query. Lapis kedua adalah peningkatan: deklarasi container-type dijaga @supports, dan style query hanya menambah warna tema gelap. Demo di akhir chapter memakai pola yang sama:

.kartu {
  background-color: rgb(255, 255, 255);
  color: rgb(15, 23, 42);
}

@supports (container-type: inline-size) {
  .area {
    container-type: inline-size;
  }
  @container style(--tema: gelap) {
    .kartu {
      background-color: rgb(15, 23, 42);
      color: rgb(241, 245, 249);
    }
  }
}

Mari kita telaah pola tersebut baris demi baris:

1. Baris 1–4 (.kartu): tema terang dinyatakan sebagai gaya dasar di luar blok bersyarat. Browser mana pun — termasuk yang tidak mengenal container query — dapat menerapkan deklarasi ini, sehingga kartu tetap tampil benar.
2. Baris 6 (@supports): blok ini hanya dievaluasi bila browser mengenal container-type, yaitu prasyarat semua container query. Browser lama melompati seluruh blok tanpa galat.
3. Baris 7–9 (.area): elemen area dinyatakan sebagai container inline-size; custom property --tema akan dinilai pada elemen ini.
4. Baris 10–14 (@container style(...)): bila --tema bernilai gelap pada area, kartu di dalamnya berganti latar gelap dan teks terang. Di browser yang mendukung container-type tetapi belum mendukung style query, kondisi ini diperlakukan tidak terpenuhi — kartu tetap memakai gaya dasar.

Hasil di Browser:

Kartu di area bertema gelap (--tema: gelap): latar rgb(15, 23, 42),
teks rgb(241, 245, 249) — style query aktif di browser pendukung.
Kartu di area tanpa --tema: latar tetap rgb(255, 255, 255) —
gaya dasar (fallback) yang dijamin tampil di semua browser.

Kapan Style Query Tepat Dipakai #

Style query paling berharga ketika tema dikendalikan lewat custom properties . Karena custom property mewarisi ke seluruh keturunan (lihat Chapter Inheritance ), satu deklarasi --tema pada area induk cukup untuk mengubah seluruh komponen di dalamnya — tanpa menulis ulang selector seperti .area-gelap .kartu, .area-gelap .tombol, dan seterusnya.

Untuk halaman produksi saat ini, gunakan style query sebagai peningkatan kosmetik — penguatan tema, variasi badge, penyesuaian warna — dan biarkan size query mengurus adaptasi layout, karena size query telah aman di seluruh browser utama.