Bukan Aturan Horisontal Tipikal Anda

Gaya browser default untuk <hr> sangat aneh . Pada dasarnya:

 border-style: inset; border-width: 1px;

Warna border-color default adalah black , tetapi bingkai tidak benar-benar terlihat hitam, karena bingkai sisipan "menambahkan nada terpisah ke garis yang membuat elemen tampak sedikit tertekan".

Jika saya menaikkan border-width menjadi 40 40px Anda dapat melihatnya dengan lebih jelas:

Saya sering mengatur ulang <hr> menjadi "hanya satu baris" dan itu selalu membuat saya karena saya akan mencoba sesuatu, seperti height: 1px dengan latar belakang pada awalnya, tetapi itu tidak benar. Cara yang lebih mudah untuk membersihkannya adalah dengan mematikan semua border kemudian hanya menggunakan border-top atau border-bottom . Atau, matikan semua perbatasan, setel ketinggian, dan gunakan latar belakang.

Annnyway… Sara memiliki beberapa aturan horizontal terbaik di kota pada desain situsnya saat ini, dan dia menulis semuanya. Tebak apa? Mereka bahkan bukan elemen <hr> Ternyata satu-satunya pengait gaya yang Anda miliki adalah CSS, yang tidak adaptif seperti yang dibutuhkan Sara, jadi dia berakhir dengan <div role="separator"> ( TIL !) Dan SVG inline.

Cara terbaik untuk mendapatkan fleksibilitas penuh dari SVG adalah dengan menyebariskannya. Tetapi elemen <hr> memiliki konten – tidak memiliki tag pembuka dan penutup di mana Anda dapat menempatkan elemen lainnya.

Satu-satunya cara untuk mengatasi batasan <hr> sambil mempertahankan semantik untuk pengguna pembaca layar adalah dengan menggunakan div dan menyediakan semantik hr menggunakan ARIA.

Tautan Langsung ke ArtikelTautan permanen


Postingan Not Your Typical Horizontal Rules muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *