Mempertimbangkan kembali perencanaan CSS multi -kolom

Terus terang, sulit bagi saya untuk beradaptasi dengan masalah ini, tetapi hampir 20 tahun telah berlalu sejak saya menulis buku pertama saya, <>Menyeberang. Saya menjelaskan bagaimana dan mengapa unit perencanaan multi -kolom yang muncul digunakan.

petunjuk: Saya telah menerbitkan versi yang diperbarui,<> CSS melintasi pertimbangan ulangGratis untuk membaca di internet.

Mungkin karena, sebelum menggunakan web, saya bekerja di bidang pencetakan, saya sangat senang dengan gagasan membagi konten menjadi kolom tanpa hanya pengkodean tambahan tampilan. Saya telah menggunakan perencanaan multi -kolom secara teratur sejak saat itu. Namun, pilar CSS tetap menjadi salah satu alat tata letak CSS yang paling jarang digunakan. Dan saya bertanya -tanya mengapa ini?

Lubang dalam spesifikasi

Untuk waktu yang lama, ada, dan masih, banyak celah dalam perencanaan multi -kolom. Seperti Rachel Andrew, yang sekarang menjadi editor spesifikasi, ditunjukkan dalam artikelnya lima tahun yang lalu:

“Kotak konstruksi kolom tidak dapat ditargetkan saat menggunakan salah satu properti kolom Kotak kolom akan menjadi ukuran yang sama.

Itu benar. Ini <>Tetap BENAR. Anda tidak dapat merancang kolom, misalnya, dengan mengganti warna latar belakang dengan tipe :nth-column() Lapisan palsu ditentukan. Anda dapat menambahkan column-rule Antara kolom menggunakan border-style Nilai seperti dashed,, dottedDan solidDan siapa yang bisa melupakannya adalah Evergreen groove Dan ridge Pola? Tapi Anda tidak bisa melamar border-image Nilai ke a column-ruleDan tampaknya aneh karena mereka disajikan hampir pada waktu yang sama. Perencanaan multi -kolom tidak lengkap, dan ada banyak yang saya harap akan lakukan di masa depan, tetapi ini tidak menjelaskan alasan bagi kebanyakan orang mengabaikan apa yang dapat dilakukan hari ini.

Implementasi browser penting untuk waktu yang lama

Browser lama mengabaikan sifat -sifat kolom yang tidak bisa Anda perlakukan. Namun, ketika tata letak multi-kolom diluncurkan untuk pertama kalinya, sebagian besar desainer dan pengembang belum sepakat bahwa situs web tidak boleh terlihat serupa di setiap browser.

Awalnya, dukungan perencanaan multi -kolom tidak lengkap. Namun, browser telah berevolusi dari waktu ke waktu, dan terlepas dari kontradiksi yang berkelanjutan – terutama dalam mengendalikan pemisahan konten – perencanaan multi -kolom kini telah diterapkan secara luas. Namun, untuk beberapa alasan, banyak desainer dan pengembang merasa bagi mereka merasa bahwa kolom CSS masih rusak. Ya, ada banyak hal yang harus dilakukan browser untuk meningkatkan aplikasi mereka, tetapi ini seharusnya tidak mencegah orang menggunakan suku cadang yang solid saat ini.

Kemudahan membaca dan kemudahan penggunaan dengan menggulir

Alasan utama mengapa desainer dan pengembang mungkin tidak mengadopsi perencanaan multi -kolom karena mereka memiliki CSS Grid dan Flexbox tidak dalam spesifikasi atau implementasinya tetapi dalam kemudahan penggunaan. Rachel menunjukkan ini dalam artikelnya:

“Salah satu alasan mengapa kita tidak melihat banyak warna di web adalah karena akan sangat mudah untuk berakhir dengan pengalaman membaca yang membuat pembaca menggulir di dimensi massa. Ini berarti menggulir ke atas dan ke atas dan Down secara vertikal bagi mereka yang menggunakan bahasa Inggris atau mode penulisan vertikal lainnya ini bukan pengalaman membaca yang baik!

Ini benar. Tidak ada yang akan menikmati menggulir ke atas dan ke bawah sering untuk membaca klip panjang dari konten spesifik di kolom. Dan dia melanjutkan:

“Tak satu pun dari dua hal ini yang sempurna, dan penggunaan banyak baris di web adalah sesuatu yang perlu kita pikirkan dengan sangat hati -hati sehubungan dengan jumlah konten yang mungkin kita bertujuan untuk mengalir ke kolom kita.”

Namun, mari kita hadapi itu, pikirkan dengan sangat hati -hati adalah apa yang selalu dilakukan oleh para desainer dan pengembang.

Tentu saja, jika Anda cukup bodoh untuk mengosongkan sejumlah besar konten di kolom tanpa memikirkan desain mereka, Anda akhirnya akan memberikan pengalaman buruk bagi pembaca. Tetapi mengapa Anda melakukannya ketika judul, foto, dan kutipan dapat meluas ke seluruh kolom dan mengatur ulang aliran kolom, yang meningkatkan kemungkinan membaca segera? Tambahkan ke wadah ini intelijen dan nilai -nilai unit baru untuk mengubah ukuran teks, dan tidak akan ada alasan untuk menghindari penggunaan tata letak multi -kolom lagi.

Ringkasan singkat tentang karakteristik dan nilai

Mari kita lakukan proses pembaruan informasi. Ada dua cara untuk mengalirkan konten ke beberapa kolom; Pertama, dengan memilih jumlah kolom yang perlu Anda gunakan column-count kepemilikan:

Kedua, seringkali yang terbaik, adalah untuk menentukan lebar kolom, meninggalkan browser untuk memutuskan jumlah kolom yang akan cocok di sepanjang sumbu domain. Misalnya, saya menggunakan column-width Untuk menentukan bahwa pilar saya telah berakhir 18rem. Browser menciptakan banyak 18rem Kolom sebanyak mungkin agar sesuai dengan mereka, lalu bagikan ruang yang tersisa di antara mereka.

Lalu ada bagian bawah (atau column-gap) Antara kolom, yang dapat Anda definisikan menggunakan unit panjang apa pun. Penggunaan terbaik unit REM untuk mempertahankan hubungan selokan dengan ukuran teks, tetapi jika tamu Anda membutuhkan ini 1emAnda dapat mengecualikannya, karena ini adalah celah hipotetis dari browser.

Fitur kolom terakhir adalah divisi itu (atau column-rule) Ke talang, yang menambahkan bab yang terlihat antara kolom. Sekali lagi, Anda dapat mengatur ketebalan dan menggunakan border-style Nilai seperti dashed,, dottedDan solid.

Contoh-contoh ini akan muncul setiap kali Anda menghadapi program perencanaan multi-kolom, termasuk kalender CSS-Tricks. Konstruksi tata letak multi-kolom adalah salah satu aturan paling sederhana dalam set CSS, alasan lain karena kurangnya beberapa alasan untuk tidak menggunakannya.

Perencanaan multi -kolom menjadi lebih penting saat ini

Saat saya menulis <>Menyeberang Saya pertama kali menjelaskan perencanaan multi -kolom yang muncul, dan tidak ada unit REM atau bingkai tampilan, tidak :has() Atau penentu canggih lainnya, tidak ada informasi kontainer, dan tidak ada penggunaan rutin komputer media karena desainnya cepat merespons.

Kami tidak calc() atau clamp() Untuk menyesuaikan ukuran teks, tidak ada jaringan CSS atau perencanaan kotak yang fleksibel untuk kontrol kontrol yang tepat. Sekarang kami melakukan ini, dan semua karakteristik ini membantu membuat perencanaan multi -kolom lebih penting hari ini.

Sekarang, Anda dapat menggunakan unit REM atau viewport yang terintegrasi dengan calc() Dan clamp() Untuk mengadaptasi ukuran teks dalam kolom CSS. Anda bisa menggunakannya :has() Untuk menentukan waktu untuk membuat kolom, tergantung pada jenis konten yang dikandungnya. Atau Anda dapat menggunakan informasi wadah untuk mengimplementasikan hanya beberapa kolom saat wadah cukup besar untuk menampilkannya. Tentu saja, Anda juga dapat menggabungkan perencanaan multi -kolom dengan CSS atau perencanaan kotak fleksibel untuk desain perencanaan yang lebih kreatif.

Menggunakan Multi -Column Layout hari ini

Tantangan yang saya hadapi adalah menerapkan tata letak artikel yang fleksibel tanpa informasi media yang tidak hanya beradaptasi dengan ukuran layar, tetapi juga apakah itu <figure> yang ada. Untuk meningkatkan kemampuan membaca teks yang dioperasikan dalam baris yang sangat panjang, itu harus diatur dalam kolom untuk mempersempit ruang lingkup pengukuran. Sebagai sentuhan terakhir, ukuran teks harus beradaptasi dengan lebar wadah, bukan dengan bingkai tampilan.

Html untuk perencanaan primitif ini. satu <section>Satu <main>Dan satu <figure> (Pertama 🙂

<section>
  <main>
    <h1>About Patty</h1>
    <p>…</p>
  </main>

  <figure>
    <img>
  </figure>
</section>

Saya mulai menambahkan pola tata letak multi -kolom ke dalam file <main> Elemen menggunakan column-width Properti untuk mengatur lebar setiap kolom 40ch (Karakter). itu max-width Margin yang dijamin spontan mengurangi tampilan konten dan transmisinya sebagai bagian dari presentasi:

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

Setelah itu, saya menerapkan tata letak kotak yang fleksibel <section> Hanya jika itu :has() Keturunan hidup, yaitu a <figure>:

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

Ini berikutnya min-width: min(100%, 30rem) – Ini berlaku untuk semua orang <main> Dan <figure> – Ini adalah campuran min-width Kepemilikan dan min() Fungsi CSS. itu min() Pekerjaan ini memungkinkan Anda untuk menentukan dua atau lebih nilai, dan browser akan memilih nilai terkecil dari mereka. Ini sangat berguna untuk tata letak respons cepat karena Anda ingin mengontrol ukuran elemen berdasarkan kondisi yang berbeda:

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);
}

Hal yang efektif dalam implementasi ini adalah bahwa pola perencanaan multi -kolom diterapkan sepanjang waktu, tanpa perlu pertanyaan media untuk beroperasi atau mati.

Untuk tampilan kolom, menyesuaikan kolom membantu meningkatkan kemungkinan membaca. Implementasi ini menjadi hanya mudah baru -baru ini dengan mengirimkan informasi wadah, termasuk nilai -nilai terkaitnya cqi,, cqw,, cqminDan cqmax. Dan clamp() pekerjaan. Untungnya, Anda tidak perlu menentukan ukuran teks secara manual, karena aplikasi utopia Clearleft akan melakukan tugas ini atas nama Anda.

Alamat dan ukuran vertebra saya dipasang pada ukuran minimum dan maksimum, dan teks di antara mereka cairan tergantung pada ukuran wadahnya:

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); }

Jadi, untuk menentukan <main> Karena wadah di mana ukuran ini bergantung pada, saya telah menerapkan kueri kontainer untuk kontennya:

main {
  container-type: inline-size;
}

Buka hasil akhirnya di browser desktop, ketika Anda berada di depan browser. Ini merencanakan artikel yang fleksibel tanpa sarana media dan beradaptasi dengan ukuran layar dan keberadaan file <figure>. Tata letak multi-kolom mengatur teks di kolom untuk mempersempit skala dan menyesuaikan ukuran teks dengan lebar wadahnya, bukan dengan bingkai tampilan.

CSS modern sedang memecahkan banyak masalah sebelumnya

Semua artikel yang saya baca fokus pada perencanaan multi -kolom pada kesalahannya, terutama kemudahan penggunaan. Bahkan Jeff Graham, dari CSS-Tricks, menyebutkan masalah menggulir ke atas dan ke bawah ketika dia bertanya: “Kapan Anda menggunakan kolom CSS?”

“Tapi artikel yang panjang dan lengkap dibagi menjadi kolom? Saya suka di surat kabar, tapi saya ragu untuk menggulir ke bawah ke halaman web untuk membaca satu kolom, hanya untuk menggulir ke atas untuk melakukannya lagi.

Untung, column-span Properti – yang memungkinkan alamat, foto, dan kutipan untuk memperluas kolom, mengatur ulang aliran kolom, dan meningkatkan kemungkinan membaca segera – sekarang dengan dukungan kuat di browser:

h1, h2, blockquote {
  column-span: all; 
}

Tetapi memecahkan masalah pengguliran ke atas dan ke bawah bukanlah murni teknis. Desain konten juga membutuhkan. Ini berarti bahwa konten dan perancang harus berpikir dengan cermat tentang kekambuhan dan jenis elemen yang diperluas, dan pembagian perencanaan multi -kolom menjadi bagian yang kurang dangkal, yang mengurangi kebutuhan untuk lulus dan meningkatkan pengalaman membaca seseorang.

Masalah lain sebelumnya adalah untuk mencegah berita utama dari memisahkan dari konten dan angka mereka, membagi gambar dan ilustrasi mereka di antara kolom. Untung, break-after Fitur ini sekarang juga dengan dukungan luas, sehingga gambar dan komentar yatim telah menjadi sesuatu dari masa lalu:

figure {
  break-after: column;
}

Buka contoh terakhir ini di browser desktop:

Anda harus melihat tata letak multi -kolom

Perencanaan multi -kolom bukanlah alat baru yang brilian. Bahkan, itu tetap menjadi salah satu alat perencanaan yang paling tidak digunakan di CSS. Dia telah menghadapi, dan masih memiliki banyak masalah, tetapi itu tidak mengurangi manfaat atau kemampuannya untuk menambahkan tingkat peningkatan tambahan pada desain produk atau situs Web. Apakah Anda belum menggunakan perencanaan multi -kolom untuk sementara waktu atau mungkin Anda belum pernah mencoba sebelumnya, inilah saatnya untuk melihat perencanaan multi -kolom.

---

Mempertimbangkan kembali tata letak multi-kolom dari trik CSS, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber

-Advertisement-.