Empat tahun yang lalu, saya menulis artikel bertajuk Minding the "Gap", di mana saya bercakap tentang harta CSS GAP, di mana ia digunakan, dan bagaimana ia berfungsi dengan pelbagai susun atur CSS.

Pada masa itu, saya menyifatkan betapa mudahnya item ruang yang sama dalam susun atur, grid, atau pelbagai lajur, dengan menggunakan harta jurang. Tetapi, saya juga mengatakan bahawa gaya kawasan jurang jauh lebih sukar, dan saya berkongsi penyelesaian.

Walau bagaimanapun, penyelesaian seperti menggunakan elemen HTML tambahan, elemen pseudo, atau sempadan untuk menarik garis pemisah cenderung datang dengan kelemahan, terutama yang memberi kesan kepada saiz susun atur anda, mengganggu teknologi bantuan, atau mencemarkan markup anda dengan unsur-unsur gaya sahaja.

Hari ini, i & https: //m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; That & https: //m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; s akan mengubah semuanya. Apa yang anda perlu gunakan untuk menggunakan penyelesaian, anda tidak lama lagi dapat dilakukan dengan hanya beberapa sifat CSS yang mudah yang menjadikannya mudah, namun juga fleksibel, untuk memaparkan pemisah gaya antara item susun atur anda.

Ada & https: //m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; s sudah menjadi draf spesifikasi untuk ciri yang anda boleh tengok. Pada masa saya & https: //m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; m Menulis ini, ia boleh didapati di Chrome dan Edge 139 di belakang bendera. Tetapi saya percaya ia menang & https: //m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; t lama sebelum kita menghidupkan bendera itu. Saya percaya pelayar lain juga sangat menerima dan terlibat.

Memaparkan garis hiasan antara item susun atur boleh membuat perbezaan besar. Apabila digunakan dengan baik, garis -garis ini boleh membawa lebih banyak struktur ke susun atur anda, dan memberi pengguna lebih banyak tentang bagaimana kawasan yang berlainan halaman dianjurkan.

Memperkenalkan hiasan jurang CSS

Jika anda pernah menggunakan susun atur pelbagai lajur, seperti dengan menggunakan harta lajur lebar, maka anda mungkin sudah biasa dengan hiasan jurang. Anda boleh melukis garis menegak di antara lajur susun atur multi-kolumn dengan menggunakan harta peringkat lajur:

 artikel {
  lajur lebar: 20rem;
  Kolum-Peraturan: 1px Pepejal Hitam;
}

Ciri -ciri hiasan CSS Gap membina ini untuk menyediakan sistem yang lebih komprehensif yang memudahkan anda untuk menarik garis pemisah dalam jenis susun atur yang lain.

Sebagai contoh, spesifikasi draf mengatakan bahawa harta peringkat lajur juga berfungsi dalam susun atur flexbox dan grid:

 .my-grid-container {
  paparan: grid;
  Gap: 2px;
  Kolum-Peraturan: 2px Pink pepejal;
}

Tidak perlu elemen tambahan atau sempadan! Manfaat utama di sini adalah bahawa hiasan berlaku di CSS sahaja, di mana ia berada, tanpa kesan kepada markup semantik anda.

Ciri-ciri hiasan CSS Gap juga memperkenalkan harta garis barisan baru untuk melukis garis antara baris:

 .my-flex-container {
  Paparan: Flex;
  Gap: 10px;
  Peraturan baris: 10px limegreen bertitik;
  Kolum-Peraturan: 5px Coral Dashed Coral;
}

Tetapi itu bukan semua, kerana sintaks di atas juga membolehkan anda menentukan nilai gaya berganda, koma, garis, dan menggunakan fungsi ulangan () yang sama yang telah digunakan oleh grid CSS untuk templat baris dan lajur. Ini memungkinkan untuk menentukan gaya hiasan garis yang berbeza dalam susun atur tunggal, dan menyesuaikan diri dengan bilangan jurang yang tidak diketahui:

 .my-container {
  paparan: grid;
  Gap: 2px;
  Peraturan Baris:
    ulangi (2, 1px putus -putus merah),
    2px pepejal hitam,
    ulangi (auto, 1px hijau bertitik);
}

Akhirnya, ciri-ciri hiasan CSS GAP dilengkapi dengan sifat CSS tambahan seperti baris-rule-break, lajur-rule-break, outset-rule-outset, outset-rule-outset, dan perintah-cat-pain-order, yang memungkinkan untuk menyesuaikan dengan tepat cara menyesuaikan cara pemisah ditarik, sama ada mereka bertindih, atau di mana mereka bermula dan akhir.

Dan tentu saja, semua ini berfungsi di Grid, Flexbox, Multi-Lajum, dan tidak lama lagi, Masonry!

Sokongan penyemak imbas

Pada masa ini, ciri hiasan CSS GAP hanya tersedia dalam pelayar berasaskan kromium.

Ciri ini masih awal dalam pembuatan, dan ada masa untuk anda semua untuk mencuba dan memberikan maklum balas yang dapat membantu menjadikan ciri ini lebih baik dan lebih disesuaikan dengan keperluan anda.

Jika anda ingin mencuba ciri hari ini, pastikan anda menggunakan Edge atau Chrome, bermula dengan versi 139 (atau penyemak imbas berasaskan kromium lain yang sepadan dengan versi tersebut), dan membolehkan bendera dengan mengikuti langkah-langkah ini:

1. Dalam krom atau tepi, pergi ke: // bendera.
2. Dalam medan carian, cari untuk membolehkan ciri platform web eksperimen .
3. Dayakan bendera.
4. Mulakan semula penyemak imbas.

Untuk meletakkan semua ini, mari & https: //m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b8217; s melalui contoh bersama -sama yang menggunakan ciri hiasan CSS GAP yang baru. Saya juga mempunyai contoh terakhir yang boleh anda demo.

Menggunakan hiasan jurang CSS

Mari kita bina laman web mudah untuk mengetahui cara menggunakan ciri ini. Inilah yang akan kita bina:

Susun atur di atas mengandungi seksyen header dengan tajuk, menu navigasi dengan beberapa pautan, bahagian utama dengan satu siri perenggan pendek teks dan foto, dan footer.

Kami akan menggunakan markup berikut:

<header>
  <h1>Laman web peribadi saya</h1>
</header>
<nav>
  <ul>
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rumah</a></li>
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Mengenai</a></li>
    <li><a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Pautan</a></li>
  </ul>
</nav>
<main>
  <article>
    <p>…</p>
  </article>
  <article>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175141927923313.jpg" class="lazy" alt="Jurang menyerang kembali: kini boleh digabungkan">
  </article>
  <article>
    <p>…</p>
  </article>
  <article>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175141928053919.jpg" class="lazy" alt="Jurang menyerang kembali: kini boleh digabungkan">
  </article>
  <article>
    <p>…</p>
  </article>
  <article>
    <p>…</p>
  </article>
  <article>
    <p>…</p>
  </article>
  <article>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175141928010441.jpg" class="lazy" alt="Jurang menyerang kembali: kini boleh digabungkan">
  </article>
</main>
<footer>
  <p>? 2025 Patrick Brosset</p>
</footer>

Kami akan mulakan dengan membuat elemen menjadi bekas grid. Dengan cara ini, kita boleh mengosongkannya

 badan {
  paparan: grid;
  Gap: 4Rem;
  Margin: 2rem;
}

Sekarang mari kita gunakan ciri hiasan CSS Gap untuk memaparkan garis pemisah mendatar dalam jurang yang baru saja kita tentukan:

 badan {
  paparan: grid;
  Gap: 4Rem;
  Margin: 2rem;
 
  ROW-RULE: 1REM Solid http://m.miracleart.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BEFEF;
}

Ini memberi kita hasil berikut:

Kita boleh melakukan sedikit lebih baik dengan membuat garis mendatar pertama kelihatan berbeza daripada dua baris yang lain, dan memudahkan nilai baris dengan menggunakan sintaks () sintaks:

 badan {
  paparan: grid;
  Gap: 4Rem;
  Margin: 2rem;
 
  Peraturan Baris:
    1rem pepejal http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befefef,
    Ulang (2, 2px pepejal http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15befeff);
}

Dengan nilai hartanah baris baru ini, kami memberitahu penyemak imbas untuk menarik pemisah mendatar pertama sebagai garis tebal 1rem, dan dua pemisah seterusnya sebagai garis tebal 2px, yang memberikan hasil berikut:

Sekarang, mari kita perhatian kita ke elemen navigasi dan senarai pautannya. Kami akan menggunakan Flexbox untuk memaparkan pautan dalam satu baris, di mana setiap pautan dipisahkan dari pautan lain dengan jurang dan garis menegak:

 nav ul {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  Gap: 2rem;
  Kolum-peraturan: 2px Dashed http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b666;
}

Sangat sama seperti bagaimana kami menggunakan harta garis baris sebelum ini, kami kini menggunakan harta peringkat lajur untuk memaparkan pemisah tebal 2px yang putus-putus di antara pautan.

Contoh laman web kami sekarang kelihatan seperti ini:

Perkara terakhir yang perlu kita ubah ialah

 Utama {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  Gap: 4Rem;
}


utama> * {
  Flex: 1 1 200px;
}


Artikel utama: mempunyai (p) {
  Flex-Basis: 400px;
}

Dalam coretan kod di atas, kami menetapkan

Mari kita gunakan hiasan CSS Gap untuk membawa sedikit struktur ke susun atur kami dengan melukis garis pemisah tebal 2px antara baris dan lajur susun atur:

 Utama {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  Gap: 4Rem;
  Row-rule: 2px pepejal http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b999;
  Kolum-rule: 2px pepejal http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b999;
}

Ini memberi kita hasil berikut, yang sangat dekat dengan reka bentuk yang diharapkan:

Perincian terakhir yang ingin kita ubah berkaitan dengan garis menegak. Kami tidak mahu mereka merentasi seluruh ketinggian garis flex tetapi sebaliknya mula dan berhenti di mana kandungan bermula dan berhenti.

Dengan hiasan jurang CSS, kita dapat dengan mudah mencapai ini dengan menggunakan harta benda out-outset lajur untuk menyempurnakan tepat di mana hiasan bermula dan berakhir, berbanding dengan kawasan jurang:

 Utama {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
  Gap: 4Rem;
  Row-rule: 2px pepejal http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b999;
  Kolum-rule: 2px pepejal http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b999;
  Outset-outset lajur: 0;
}

Property outset-outset lajur di atas menjadikan pemisah lajur menegak merangkumi ketinggian setiap baris, tidak termasuk kawasan jurang, iaitu apa yang kita mahu:

Dan dengan itu, kami selesai dengan contoh kami. Semak contoh langsung, dan kod sumber.

Ketahui lebih lanjut

Terdapat lebih banyak ciri dan saya menyebut beberapa ciri CSS lebih awal

• Gap-rule-paint-order , yang membolehkan anda mengawal mana-mana hiasan, baris atau lajur, muncul di atas yang lain.
• Row-rule-break / column-rule-break , yang menetapkan tingkah laku garis hiasan di persimpangan. Khususnya, sama ada ia diperbuat daripada pelbagai segmen, yang bermula dan berakhir di persimpangan, atau satu, garis berterusan.

Kerana ciri ini baru, belum ada dokumentasi MDN mengenainya. Jadi untuk mengetahui lebih lanjut, lihat:

• CSS Gap Hiasan Modul Tahap 1 (Draf Kerja Awam Pertama)
• Microsoft Edge Penjelasan

Pasukan Edge juga telah membuat taman permainan interaktif di mana anda boleh menggunakan kawalan visual untuk mengkonfigurasi hiasan jurang.

Dan, tentu saja, sebab ini semua dilaksanakan di belakang bendera adalah untuk mendapatkan maklum balas daripada pemaju seperti anda! Sekiranya anda mempunyai maklum balas, soalan, atau pepijat mengenai ciri ini, saya pasti menggalakkan anda membuka tiket baru pada Tracker Isu Chromium.

Atas ialah kandungan terperinci Jurang menyerang kembali: kini boleh digabungkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!