Adaptasi Komponen Semantik

Gunakan kueri gaya (@container style()) untuk memicu variasi kontekstual tanpa melakukan hardcoding pada apa yang menghasilkan atau bereaksi terhadap setiap konteks. Hal ini mengurangi pengaitan sistem desain serta meningkatkan ekstensibilitas dan enkapsulasi komponen.

Misalnya, aturan section.featured { --surface: featured } dapat menandai konteks, dan halaman landing juga dapat ditetapkan secara default ke konteks tersebut melalui main { --surface: featured }. Komponen kemudian memilih untuk bereaksi terhadap --surface: featured: kartu menampilkan badge promosi, tombol ditetapkan secara default ke varian terisinya, dan seterusnya.

Kueri gaya memungkinkan kedua sisi tetap terpisah: platform unggulan tidak pernah memberi nama elemen yang beradaptasi dengannya, dan komponen tidak pernah memeriksa apa yang menghasilkan konteks. Kedua sisi dapat diperluas secara independen — komponen baru, platform unggulan baru — tanpa menyentuh sisi lainnya. Pemilih turunan (misalnya, .featured .button) memaksa sebaliknya: pemilih harus mengenkode kedua sisi hubungan dan harus berubah setiap kali salah satu sisi berubah.

Kapan harus menggunakan panduan ini

Panduan ini membahas perubahan perilaku: komponen yang memutuskan apa yang akan dirender, cara mengatur dirinya sendiri, atau varian mana yang akan ditampilkan sebagai respons terhadap konteksnya — menyembunyikan atau menampilkan badge, mengubah arah tata letak, atau menukar varian tombol.

Jika Anda memerlukan perubahan tingkat token — mode kepadatan, tema, atau token tingkat lebih tinggi lainnya yang secara seragam mengubah nilai seperti padding dan warna di banyak komponen — lihat Reaktivitas Token Desain.

Memilih alat yang tepat

Gunakan kueri gaya saat kedua sisi hubungan kontekstual dapat berubah secara independen — elemen baru mungkin mulai menghasilkan konteks, atau komponen baru mungkin mulai bereaksi terhadapnya. Indireksi ini memberikan manfaat dalam hal ekstensibilitas dan enkapsulasi, dan kueri gaya melintasi batas shadow DOM yang tidak dapat dilakukan oleh pemilih turunan. Jika fleksibilitas tersebut tidak diperlukan, pilih alat yang lebih sederhana:

• Pemilih turunan (.toolbar .button): hubungan tetap dan sekali pakai yang tidak dapat digunakan kembali atau diperluas. YAGNI berlaku — jangan tambahkan pengalihan yang tidak akan Anda gunakan.
• Kueri ukuran (@container (min-width: …)): perubahan tata letak dan kepadatan yang didorong oleh ruang yang tersedia, bukan status semantik.
• Kueri gaya (@container style(…)): status semantik — apa yang harus dirender, diatur, atau ditampilkan oleh komponen dalam konteks tertentu.

Petunjuk Penerapan

1. Tentukan flag konteks semantik menggunakan properti kustom CSS pada penampung.
2. JANGAN tetapkan container-type untuk kueri gaya; kueri ini mengkueri properti kustom yang diwarisi pada ancestor terdekat dan tidak memerlukan konteks penampungan eksplisit.
3. WAJIB: Gunakan @container style(--property: value) untuk menerapkan gaya bersyarat ke elemen turunan. Kueri gaya tidak dapat mencocokkan elemen yang ditetapkan propertinya, hanya turunannya.
4. LAKUKAN pemilihan kueri gaya daripada pemilih turunan jika hubungan harus tetap dapat diperluas atau melintasi batas komponen/shadow DOM (lihat Memilih alat yang tepat di atas) — tetapi pertahankan pemilih turunan untuk hubungan tetap satu kali yang tidak memerlukan pengalihan.

Contoh Penerapan

/* 1. Set the context on a layout container */
.featured {
  --surface: featured; /* Semantic context flag for children */
}

/* 2. Component reacts to inherited flag */
.button {
  /* Default: Outlined informational style */
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  /* Default: Hidden — only revealed in featured surfaces */
  display: none;
}

@container style(--surface: featured) {
  .button {
    /* Automatic switch to Filled promotional style */
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    /* Reveal decorative elements only in featured context */
    display: block;
  }
}

Strategi Penggantian

Sebelum kueri gaya container tersedia secara luas, lapisi kueri tersebut sebagai progressive enhancement: kirimkan default berbasis pemilih yang berfungsi di mana saja, dan biarkan kueri gaya menggantikannya jika didukung. Gunakan :where() pada pemilih konteks sehingga kueri gaya (kekhususan yang sama, nanti dalam urutan sumber) menang secara otomatis.

/* Default styles — work everywhere */
.button {
  background: transparent;
  border: 1px solid currentColor;
}

.badge {
  display: none;
}

/* Selector-based contextual styles — broad browser support */
:where(.featured) .button {
  background: var(--brand-accent);
  color: white;
  border: none;
}

:where(.featured) .badge {
  display: block;
}

/* Progressive enhancement: style queries override when supported */
@container style(--surface: featured) {
  .button {
    background: var(--brand-accent);
    color: white;
    border: none;
  }

  .badge {
    display: block;
  }
}

Penggantian pemilih mengaitkan gaya kontekstual ke nama class, yang menggabungkan komponen ke penempatan DOM-nya. Setelah kueri gaya didukung secara luas, aturan :where() dapat dihapus.