Semua yang Perlu Anda Ketahui Tentang Celah Setelah Penanda Daftar

saya sedang membaca “Penggayaan Daftar Kreatif” di blog web.dev Google dan melihat sesuatu yang aneh di salah satu contoh kode di ::marker bagian artikel. Penanda daftar bawaan adalah peluru, nomor urut, dan huruf. Itu ::marker pseudo-element memungkinkan kita untuk menata penanda ini atau menggantinya dengan karakter atau gambar khusus.

::marker { content: url('/marker.svg') ' ';
}

Contoh yang menarik perhatian saya menggunakan ikon SVG sebagai penanda khusus untuk daftar item. Tapi ada juga satu karakter spasi (" ") dalam nilai CSS di sebelah url() fungsi. Tujuan dari ruang ini sepertinya adalah untuk menyisipkan celah setelah custom marker.

Ketika saya melihat kode ini, saya langsung bertanya-tanya apakah ada cara yang lebih baik untuk membuat celah. Menambahkan spasi ke content terasa lebih seperti solusi daripada solusi optimal. CSS menyediakan margin dan padding dan cara standar lainnya untuk memberi spasi pada elemen di halaman. Bisakah tidak satu pun dari properti ini digunakan dalam situasi ini?

Pertama, saya mencoba mengganti karakter spasi dengan margin yang tepat:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

Ini tidak berhasil. Ternyata, ::marker hanya mendukung a sekumpulan kecil properti CSS yang sebagian besar terkait teks. Misalnya, Anda dapat mengubah font-size dan color penanda, dan tentukan penanda kustom dengan pengaturan content ke string atau URL, seperti yang ditunjukkan di atas. Tetapi margin dan padding properti adalah tidak didukung, jadi menyetelnya tidak berpengaruh. Sangat mengecewakan.

Mungkinkah karakter spasi adalah satu-satunya cara untuk menyisipkan celah setelah penanda khusus? Saya perlu mencari tahu. Saat saya meneliti topik ini, saya membuat beberapa penemuan menarik yang ingin saya bagikan dalam artikel ini.

Menambahkan padding dan margin

Pertama, mari kita konfirmasi apa margin dan padding lakukan pada <ul> dan <li> elemen. Saya telah membuat halaman pengujian untuk tujuan ini. Seret penggeser yang relevan dan amati efek pada spasi di setiap sisi penanda daftar. Tip: Gunakan tombol Atur Ulang secara bebas untuk mengatur ulang semua kontrol ke nilai awalnya.

Catatan: Browser menerapkan default padding-inline-left of 40px untuk <ol> dan <ul> elemen. Yang logis padding-inline-left properti setara dengan fisik padding-left properti dalam sistem penulisan dengan arah inline kiri-ke-kanan. Pada artikel ini, saya akan menggunakan properti fisik demi kesederhanaan.

Seperti yang Anda lihat, padding-left on <li> meningkatkan celah setelah penanda daftar. Tiga properti lainnya mengontrol spasi di sebelah kiri penanda, dengan kata lain, lekukan item daftar.

Perhatikan bahwa bahkan ketika daftar item padding-left is 0px, masih ada celah minimum setelah penanda. Kesenjangan ini tidak dapat dikurangi dengan margin or padding. Panjang celah minimum yang tepat tergantung pada browser.

Singkatnya, konten item daftar diposisikan pada jarak minimum khusus browser dari penanda, dan celah ini dapat ditingkatkan lebih lanjut dengan menambahkan padding-left untuk <li>.

Selanjutnya, mari kita lihat apa yang terjadi saat kita memosisikan penanda dalam item daftar.

Memindahkan penanda di dalam item daftar

Grafik list-style-position properti menerima dua kata kunci: outside, yang merupakan default, dan inside, yang memindahkan penanda di dalam item daftar. Yang terakhir berguna untuk membuat desain dengan item daftar lebar penuh.

Jika penanda sekarang dalam item daftar, apakah ini berarti bahwa padding-left on <li> tidak lagi menambah celah setelah penanda? Ayo cari tahu. Di halaman pengujian saya, aktifkan list-style-position: inside melalui kotak centang. Bagaimana keempatnya padding dan margin properti yang terpengaruh oleh perubahan ini?

Seperti yang Anda lihat, padding-left on <li> sekarang meningkatkan jarak ke meninggalkan dari penanda. Ini berarti kita kehilangan kemampuan untuk menambah jarak setelah penanda. Dalam situasi ini, akan berguna untuk dapat menambahkan margin-right ke ::marker itu sendiri, tetapi itu tidak berhasil, seperti yang telah kami buat di atas.

Selain itu, ada a bug di Chromium yang menyebabkan celah setelah penanda rangkap tiga setelah beralih ke inside penentuan posisi. Secara default, panjang celah sekitar sepertiga dari ukuran teks. Jadi secara default font-size of 16px, kesenjangan adalah tentang 5.5px. Setelah beralih ke inside, celah tumbuh hingga penuh 16px di Chrome. Bug ini mempengaruhi disc, circle, dan square penanda, tapi bukan penanda nomor urut.

Gambar berikut menampilkan rendering default penanda daftar yang diposisikan di luar dan di dalam di tiga browser utama di macOS. Demi kenyamanan Anda, saya telah meratakan semua item daftar secara horizontal pada penandanya agar lebih mudah membandingkan perbedaan ukuran celah.

Singkatnya, beralih ke list-style-position: inside memperkenalkan dua masalah. Kami tidak dapat lagi meningkatkan celah via padding-left on <li>, dan ukuran celah tidak konsisten di antara browser.

Terakhir, mari kita lihat apa yang terjadi saat kita mengganti penanda daftar default dengan penanda khusus.

Beralih ke penanda kustom

Ada dua cara untuk mendefinisikan a penanda kustom:

• list-style-type dan list-style-image properties
• content properti di ::marker elemen semu

Grafik content properti lebih kuat. Misalnya, memungkinkan kita untuk menggunakan counter() berfungsi untuk mengakses nomor urut item daftar (file implisit list-item melawan) dan hiasi dengan string khusus.

Sayangnya, Safari tidak mendukung content properti di ::marker belum (Bug WebKit). Untuk alasan ini, saya akan menggunakan list-style-type properti untuk menentukan penanda kustom. Anda masih dapat menggunakan ::marker pemilih untuk menata penanda khusus yang dideklarasikan melalui list-style-type. Aspek itu ::marker didukung di Safari.

Karakter Unicode apa pun berpotensi berfungsi sebagai penanda daftar kustom, tetapi hanya sekelompok kecil karakter yang benar-benar memiliki "Bullet" dalam nama resminya, jadi saya pikir saya akan mengompilasinya di sini untuk referensi.

Karakter	Nama	Titik kode	kata kunci CSS
•	Peluru	U+2022	disc
‣	Peluru Segitiga	U+2023
⁃	Peluru tanda hubung	U+2043
⁌	Peluru Kiri Hitam	U+204C
⁍	Peluru Hitam ke Kanan	U+204D
◘	Peluru Terbalik	U+25D8
◦	Peluru Putih	U+25E6	circle
☙	Peluru Jantung Bunga Diputar Terbalik	U+2619
❥	Peluru Hati Hitam Berat Berputar	U+2765
❧	Peluru Jantung Bunga Berputar	U+2767
⦾	Peluru Putih yang Dilingkari	U+29BE
⦿	Peluru Dilingkari	U+29BF

Catatan: CSS square kata kunci tidak memiliki karakter “Bullet” yang sesuai di Unicode. Karakter yang paling dekat adalah emoji Black Small Square (▪️) (U+25AA).

Sekarang mari kita lihat apa yang terjadi ketika kita mengganti penanda daftar default dengan list-style-type: "•" (U+2022 Peluru). Ini adalah karakter yang sama dengan peluru default, jadi seharusnya tidak ada perbedaan rendering yang besar. Di halaman pengujian saya, aktifkan list-style-type opsi dan amati setiap perubahan pada penanda.

Seperti yang Anda lihat, ada dua perubahan signifikan:

1. Tidak ada lagi celah minimum setelah penanda.
2. Peluru menjadi lebih kecil, seolah-olah dibuat lebih kecil font-size.

Menurut Gaya Penghitung CSS Tingkat 3, penanda daftar default (disc) harus “mirip dengan • U+2022 PELURU". Tampaknya browser menambah ukuran peluru default agar lebih mudah dibaca. Firefox bahkan menggunakan font khusus, -moz-bullet-font, untuk penanda.

Bisakah masalah ukuran kecil diperbaiki dengan CSS? Di halaman pengujian saya, aktifkan gaya penanda dan amati apa yang terjadi saat Anda mengubah font-size, line-height, dan font-family dari penanda.

Seperti yang Anda lihat, meningkatkan font-size menyebabkan penanda ubahsuaian menjadi tidak sejajar secara vertikal, dan ini tidak dapat diperbaiki dengan mengurangi line-height. itu vertical-align properti, yang dapat dengan mudah memperbaiki masalah ini, tidak didukung di ::marker.

Tapi apakah Anda memperhatikan bahwa mengubah font-family dapat menyebabkan penanda menjadi lebih besar? Coba atur ke Tahoma. Ini berpotensi menjadi solusi yang cukup baik untuk masalah ukuran kecil, meskipun saya belum menguji font mana yang bekerja paling baik di browser utama dan sistem operasi.

Anda juga mungkin memperhatikan bahwa bug Chromium tidak terjadi lagi saat Anda menempatkan penanda di dalam item daftar. Artinya, penanda khusus dapat berfungsi sebagai solusi untuk bug ini. Dan ini membawa saya ke masalah utama, dan alasan mengapa saya mulai meneliti topik ini. Jika Anda menentukan penanda khusus dan memposisikannya di dalam item daftar, tidak ada celah setelah penanda dan tidak ada cara untuk menyisipkan celah dengan cara standar.

1. Tidak ada celah minimum setelah penanda khusus.
2. ::marker tidak mendukung padding or margin.
3. padding-left on <li> tidak menambah celah, karena penanda diposisikan inside.

Kesimpulan

Berikut ringkasan dari semua fakta kunci yang telah saya sebutkan di artikel:

1. Browser menerapkan default padding-inline-start of 40px untuk <ul> dan <ol> elemen.
2. Ada celah minimum setelah penanda daftar bawaan (disc, decimal, dll.). Tidak ada celah minimum setelah penanda khusus (string atau URL).
3. Panjang celah dapat ditambah dengan menambahkan a padding-left untuk <ul>, tetapi hanya jika penanda diposisikan di luar item daftar (mode default).
4. Penanda string khusus memiliki ukuran default yang lebih kecil daripada penanda bawaan. Mengubah font-family on ::marker dapat meningkatkan ukurannya.

Kesimpulan

Melihat kembali contoh kode dari awal artikel, saya rasa sekarang saya mengerti mengapa ada karakter spasi di dalam content nilai. Tidak ada cara yang lebih baik untuk menyisipkan celah setelah penanda SVG. Ini solusi yang diperlukan karena tidak ada jumlah margin dan padding dapat membuat celah setelah penanda khusus yang ditempatkan di dalam item daftar. A margin-right on ::marker bisa dengan mudah melakukannya, tapi itu tidak didukung.

Sampai ::marker menambahkan dukungan untuk lebih banyak properti, pengembang web seringkali tidak punya pilihan selain menyembunyikan penanda dan menirunya dengan a ::before elemen semu. Saya harus melakukannya sendiri baru-baru ini karena saya tidak dapat mengubah penanda background-color. Mudah-mudahan, kita tidak perlu menunggu terlalu lama untuk yang lebih kuat ::marker elemen semu.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/