Reka Bentuk Intrinsik: Penetapan Saiz Dipacu Kandungan

Reka bentuk intrinsik, istilah yang diperkenalkan oleh Jen Simmons, bermaksud membenarkan kandungan menentukan saiznya sendiri dan bukannya mengenakan dimensi piksel yang ditetapkan. CSS menyediakan kata kunci pensaizan intrinsik yang menjadikan reka letak responsif secara semula jadi tanpa penggantian yang didorong oleh titik henti.

min-content: saiz terkecil yang memuatkan kandungan tanpa limpahan (teks dilipat pada setiap sempadan perkataan). max-content: saiz yang diperlukan untuk memaparkan kandungan pada satu baris tanpa lipatan. Kedua-duanya mencerminkan dimensi sebenar kandungan.

fit-content bersamaan dengan min(max-content, max(min-content, available)). Saiznya berkembang mengikut kandungan sehingga ruang yang tersedia dipenuhi, kemudian kandungan dilipat. Sesuai untuk butang dan label yang sepatutnya selebar teksnya, tetapi tidak lebih lebar daripada bekasnya.

minmax(min, max) dalam grid-template-columns menetapkan saiz minimum dan maksimum sesuatu trek. minmax(200px, 1fr) menghasilkan lajur yang sekurang-kurangnya 200px lebarnya tetapi boleh berkembang. Apabila digabungkan dengan auto-fill, ciri ini menghasilkan grid responsif secara intrinsik.

Kedua-duanya mengisi baris dengan sebanyak mungkin trek. auto-fill mengekalkan trek kosong (lalu mengekalkan bilangan lajur). auto-fit meruntuhkan trek kosong supaya trek yang berisi berkembang untuk memenuhi ruang. Gunakan auto-fit untuk reka letak yang dipacu oleh kandungan dan patut berkembang memenuhi lebar yang tersedia.

clamp(min, preferred, max) mengehadkan nilai antara had yang ditetapkan. font-size: clamp(1rem, 2.5vw, 1.5rem) mengubah skala antara 1rem dan 1.5rem berdasarkan lebar ruang pandang — tipografi bendalir tanpa pertanyaan media.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) menghasilkan grid responsif yang menjadi satu lajur pada ruang pandang yang sangat sempit dan menambah lajur secara automatik apabila ruang mengizinkan. Tiada pertanyaan media atau JavaScript diperlukan.

aspect-ratio: 16/9 memastikan sesuatu elemen mengekalkan perkadarannya apabila lebarnya berubah. Apabila digabungkan dengan width: 100%, bekas video memenuhi induknya dan sentiasa mengekalkan nisbah 16:9 tanpa JavaScript atau helah pelapik berasaskan peratusan.

Reka bentuk intrinsik digabungkan dengan sifat logik CSS (inline-size, block-size, margin-inline) untuk reka letak yang berfungsi dalam mod penulisan mendatar dan menegak. Pensaizan intrinsik menyesuaikan diri dengan arah penulisan secara automatik.

Tetap: width: 300px — sentiasa 300px tanpa mengira kandungan. Intrinsik: width: fit-content — selebar kandungan sehingga had tertentu. Reka letak tetap memerlukan titik henti untuk membuat pelarasan; reka letak intrinsik melaraskan dirinya berdasarkan kandungan dan konteks.

Reka bentuk intrinsik paling berkesan apabila saiz kandungan berubah secara semula jadi. Memaksa penggunaan pensaizan intrinsik apabila kandungan sudah diketahui dan seragam hanya menambah kerumitan tanpa manfaat. Gunakan saiz eksplisit untuk unsur antara muka pengguna yang tetap (navigasi, bar alat); gunakan pensaizan intrinsik untuk kawasan kandungan.

Reka bentuk intrinsik menggunakan kata kunci pensaizan CSS (kandungan minimum, kandungan maksimum, kandungan sepadan), minmax() dengan auto-fit, clamp() untuk penskalaan bendalir, serta aspect-ratio untuk menghasilkan reka letak yang dipacu oleh dimensi kandungan dan bukannya titik henti ruang pandang. Hasilnya ialah reka letak yang responsif secara semula jadi dengan CSS yang lebih sedikit dan pertanyaan media yang lebih sedikit.