Media queries membaca ukuran layar, sedangkan komponen sering dipakai di ruang yang berbeda-beda. Container queries memungkinkan komponen menyesuaikan diri berdasarkan wadahnya, membuka cara baru membangun UI berbasis komponen yang benar-benar portabel.

# Container Types

Kenali properti container-type dengan nilai inline-size dan size beserta implikasi containment-nya, plus container-name untuk menandai container tertentu.

Buka → # Container Size Queries

Gunakan aturan @container dengan kondisi ukuran untuk mengubah gaya komponen berdasarkan lebar wadahnya, bukan lebar viewport.

Buka → # Container Style Queries Overview

Pelajari style query @container style() yang menyesuaikan komponen berdasarkan nilai custom property pada wadahnya, lengkap dengan pola progressive enhancement.

Buka → # Container Query Units

Gunakan enam satuan container query (cqw, cqi, cqh, cqb, cqmin, cqmax) agar ukuran elemen mengikuti container terdekatnya, dengan pemahaman atas fallback viewport-nya.

Buka → # Component-based Responsive Design

Bangun komponen yang responsif terhadap ruangnya sendiri dengan membandingkan pendekatan media query dan container query, lalu praktikkan pola kartu portabel.

Buka →