Mengkaji semula susun atur multi-lajur CSS

Hampir dua dekad telah berlalu sejak buku pertama saya,

melampaui CSS , meneroka modul susun atur multi-novel kemudian. Versi dalam talian yang diperbaharui, bebas yang boleh didapati, melampaui CSS Revisited , menawarkan perspektif kontemporari. Latar belakang saya dalam cetakan mungkin mendorong semangat awal saya untuk ciri CSS ini, membolehkan kandungan kolumnar tanpa markup yang berlebihan. Walaupun penggunaannya yang konsisten dalam kerja saya, lajur CSS tetap mengejutkan. Kenapa?

Jurang Spesifikasi

susun atur multi-lajur telah lama menderita, dan terus mempunyai, batasan yang ketara. Sebagai Rachel Andrew (kini editor spesifikasi) diserlahkan lima tahun yang lalu: gaya langsung kotak lajur individu tidak mungkin; Manipulasi atau pelarasan JavaScript ke latar belakang, padding, dan margin tidak tersedia; dan semua lajur kekal bersaiz seragam. Hanya peraturan lajur yang menawarkan pilihan gaya.

Ini tetap benar. Gaya selektif, seperti warna latar belakang yang menggunakan

, adalah mustahil. Walaupun peraturan lajur membenarkan variasi :nth-column() (putus-putus, putus-putus, pepejal, alur, rabung), ketiadaan sokongan border-style membingungkan, memandangkan pengenalan hampir serentak mereka. Ketidaksempurnaan ini wujud, tetapi mereka tidak sepenuhnya menjelaskan pengabaian yang meluas dari alat berharga ini. border-image

Inkonsistensi penyemak imbas bersejarah

Pelayar yang lebih tua sering diabaikan sifat lajur yang tidak disokong. Walau bagaimanapun, penggunaan susun atur multi-kolumn yang awal bertepatan dengan tempoh di mana konsistensi silang pelayar bukanlah kebimbangan utama bagi banyak pemaju. Walaupun sokongan penyemak imbas awal tidak konsisten, terutamanya mengenai rehat kandungan, pelayar moden kini menawarkan keserasian yang meluas. Namun, persepsi lajur CSS sebagai "patah" berterusan di kalangan pemaju yang saya bicarakan. Walaupun penambahbaikan diperlukan, ini tidak boleh menghalang penggunaan aspek berfungsi sekarang.

kebolehbacaan dan kebimbangan menatal

Pengurangan susun atur multi-kolumn mungkin tidak berasal dari kelemahan spesifikasi atau isu pelaksanaan, tetapi dari cabaran kebolehgunaan. Rachel Andrew dengan betul menunjukkan potensi untuk kebolehbacaan yang lemah kerana menatal menegak yang berlebihan dalam kandungan bentuk panjang. Ini tidak dapat dinafikan pengalaman membaca negatif.

pertimbangan yang teliti adalah penting, tetapi ini tidak seharusnya menjadi penghalang. Pilihan reka bentuk yang lemah, seperti tidak sesuai memohon lajur untuk sejumlah besar teks tanpa unsur -unsur struktur, adalah penyebab sebenar. Tajuk, imej, dan sebut harga boleh menjangkau lajur, meningkatkan kebolehbacaan. Digabungkan dengan pertanyaan kontena dan unit saiz teks moden, ada sedikit alasan untuk mengelakkan susun atur pelbagai kolumn.

Kajian cepat sifat dan nilai

Dua kaedah utama wujud untuk membuat lajur: Menentukan column-count atau menentukan column-width, membiarkan penyemak imbas menentukan kiraan lajur. Saya lebih suka column-width, menetapkan lebar (mis., 18rem) dan membiarkan penyemak imbas mengoptimumkan bilangan lajur.

column-gap (longkang) mengawal jarak di antara lajur, dengan idealnya menggunakan unit rem untuk saiz teks yang berkadar. column-rule menambah pemisahan visual dengan ketebalan yang disesuaikan dan border-style. Sintaks mudah ini menyumbang kepada kemudahan penggunaannya.

Relevan yang dipertingkatkan dalam CSS moden

Pada masa transcending CSS , banyak ciri CSS moden tidak hadir: rem dan unit Viewport, pemilih canggih seperti :has(), pertanyaan kontena, pertanyaan media untuk reka bentuk responsif, calc(), clamp(), css grid, dan flexbox. Kemajuan ini meningkatkan keupayaan susun atur pelbagai lajur.

rem dan unit viewport, ditambah dengan calc() dan clamp(), membolehkan saiz teks responsif dalam lajur. :has() membolehkan penciptaan lajur bersyarat berdasarkan kandungan. Pertanyaan kontena membolehkan pelaksanaan lajur hanya apabila ruang kontena yang mencukupi tersedia. Integrasi dengan grid CSS atau Flexbox membuka lebih banyak susun atur kreatif.

Aplikasi Praktikal: Susun atur artikel responsif

Cabaran saya adalah mewujudkan susun atur artikel yang fleksibel dan bebas daripada media yang menyesuaikan diri dengan saiz skrin dan kehadiran/ketiadaan <figure></figure>. Teks kolumnar meningkatkan kebolehbacaan, dengan saiz teks menyesuaikan diri dengan lebar kontena, bukan lebar viewport.

HTML adalah mudah: a

yang mengandungi tajuk dan perenggan, dan secara pilihan <figure></figure>.

<main><h1>About Patty</h1>
<p>…</p></main><img  alt="Mengkaji semula susun atur multi-lajur CSS" >

Gaya susun atur multi-lajur digunakan untuk <main></main> menggunakan column-width (40ch), max-width (100ch), dan margin automatik untuk berpusat:

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

flexbox digunakan untuk <section></section> hanya jika ia mengandungi <figure></figure>:

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

min-width: min(100%, 30rem) memastikan respons untuk kedua -dua <main></main> dan <figure></figure>:

section:has(> figure) main {
  flex: 1;
  margin-inline: 0;
  min-width: min(100%, 30rem);
}

section:has(> figure) figure {
  flex: 4;
  min-width: min(100%, 30rem);
}

Ini menghapuskan keperluan untuk pertanyaan media. Saiz teks menyesuaikan diri dengan menggunakan pertanyaan kontena () dan container-type: inline-size; untuk skala responsif: clamp()

h1 { font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem); }
h2 { font-size: clamp(1.9994rem, 1.9125rem + 0.4347cqi, 2.2493rem); }
p { font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem); }

Hasilnya adalah susun atur yang fleksibel menyesuaikan diri dengan saiz skrin dan kandungan, menggunakan susun atur multi-lajur dengan berkesan.

Menangani batasan masa lalu

Banyak artikel menyerlahkan kelemahan susun atur multi-lajur, terutamanya isu-isu menatal. Harta column-span (untuk tajuk, imej, petikan ke lajur span) dengan ketara mengurangkan ini, bersama -sama dengan reka bentuk kandungan yang teliti untuk meminimumkan menatal yang berlebihan.

Tajuk dan angka yatim ditangani menggunakan break-after: column;.

Perspektif yang diperbaharui pada susun atur berbilang lajur

Walaupun umur dan batasan masa lalu, susun atur pelbagai lajur masih kurang dimanfaatkan. Walaupun cabaran wujud, nilai dan keupayaannya untuk meningkatkan reka bentuk kekal. Sudah tiba masanya untuk melihat baru alat CSS yang kuat ini.

Atas ialah kandungan terperinci Mengkaji semula susun atur multi-lajur CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!