Desain Intrinsik: Ukuran Berbasis Konten

Desain intrinsik, istilah yang dicetuskan oleh Jen Simmons, berarti membiarkan konten menentukan ukurannya sendiri alih-alih memberlakukan dimensi piksel eksplisit. CSS menyediakan kata kunci pengukuran intrinsik yang membuat tata letak responsif secara alami tanpa penimpaan yang digerakkan oleh titik henti.

min-content: ukuran terkecil yang memuat konten tanpa luapan (untuk teks, teks terbungkus di setiap batas kata). max-content: ukuran yang diperlukan untuk menampilkan konten dalam satu baris tanpa pembungkusan. Keduanya mencerminkan dimensi konten sebenarnya.

fit-content setara dengan min(max-content, max(min-content, available)). Ukuran ini bertambah mengikuti konten hingga mencapai ruang yang tersedia, lalu membungkus teks. Sangat cocok untuk tombol dan label yang lebarnya harus sesuai teksnya, tetapi tidak melebihi wadahnya.

minmax(min, max) dalam grid-template-columns menetapkan ukuran minimum dan maksimum suatu jalur. minmax(200px, 1fr) membuat kolom yang berukuran sedikitnya 200px, tetapi dapat melebar. Jika dikombinasikan dengan auto-fill, fitur ini membuat kisi yang responsif secara intrinsik.

Keduanya mengisi baris dengan jalur sebanyak mungkin. auto-fill mempertahankan jalur kosong (sehingga jumlah kolom tetap). auto-fit menciutkan jalur kosong sehingga jalur yang terisi melebar untuk memenuhi ruang. Gunakan auto-fit untuk tata letak berbasis konten yang harus melebar memenuhi lebar yang tersedia.

clamp(min, preferred, max) membatasi suatu nilai di antara batas-batas tertentu. font-size: clamp(1rem, 2.5vw, 1.5rem) menskalakan ukuran antara 1rem dan 1.5rem berdasarkan lebar area pandang — tipografi cair tanpa kueri media.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) membuat kisi responsif yang menjadi satu kolom pada area pandang yang sangat sempit dan otomatis menambahkan kolom saat ruang memungkinkan. Tanpa kueri media dan tanpa JavaScript.

aspect-ratio: 16/9 membuat elemen mempertahankan proporsinya saat lebarnya berubah. Jika dikombinasikan dengan width: 100%, wadah video memenuhi elemen induknya dan selalu mempertahankan rasio 16:9 tanpa JavaScript atau trik padding berbasis persentase.

Desain intrinsik berpadu dengan properti logis CSS (inline-size, block-size, margin-inline) untuk tata letak yang berfungsi dalam mode penulisan horizontal maupun vertikal. Pengukuran intrinsik beradaptasi dengan arah penulisan secara otomatis.

Tetap: width: 300px — selalu 300px terlepas dari konten. Intrinsik: width: fit-content — selebar konten hingga batasan yang berlaku. Tata letak tetap memerlukan titik henti untuk menyesuaikan diri; tata letak intrinsik menyesuaikan diri berdasarkan konten dan konteksnya.

Desain intrinsik paling bermanfaat saat ukuran konten berubah secara alami. Memaksakan pengukuran intrinsik pada konten yang ukurannya sudah diketahui dan seragam akan menambah kerumitan tanpa manfaat. Gunakan ukuran eksplisit untuk elemen antarmuka pengguna yang tetap (navigasi, bilah alat); gunakan pengukuran intrinsik untuk area konten.

Desain intrinsik menggunakan kata kunci pengukuran CSS (min-content, max-content, fit-content), minmax() dengan auto-fit, clamp() untuk penskalaan cair, dan aspect-ratio untuk membuat tata letak yang digerakkan oleh dimensi konten, bukan titik henti area pandang. Hasilnya adalah tata letak yang responsif secara alami dengan CSS yang lebih sedikit dan lebih sedikit kueri media.