Semua yang Perlu Anda Ketahui Tentang Celah Setelah Penanda Daftar | Trik CSS – Beragampengetahuan

Saya sedang membaca “Creative List Styling” di blog web.dev Google dan melihat sesuatu yang aneh tentang salah satu contoh kode ::marker bagian dari artikel. Penanda daftar bawaan adalah poin, angka, dan huruf.ini ::marker Pseudo-elements memungkinkan kita untuk menata tag 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 item daftar. Namun ada juga 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.tambahkan spasi content Terasa lebih seperti solusi daripada solusi terbaik. CSS menyediakan margin Dan padding dan cara standar lainnya untuk memisahkan elemen pada halaman. Tidak bisakah properti ini digunakan dalam kasus ini?

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

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

Itu tidak berhasil. Ternyata itu ::marker Hanya sekumpulan kecil properti CSS yang terutama terkait dengan teks yang didukung.Misalnya, Anda bisa berubah font-size Dan color tag, dan tentukan tag khusus berdasarkan pengaturan content ke string atau URL, seperti di atas.Tetapi margin Dan padding Properti tidak didukung, jadi menyetelnya tidak berpengaruh. Sungguh mengecewakan.

Apakah karakter spasi benar-benar satu-satunya cara untuk menyisipkan celah setelah tag khusus? Saya perlu mencari tahu. Saat meneliti topik ini, saya membuat beberapa penemuan menarik yang ingin saya bagikan dengan Anda di artikel ini.

Tambahkan padding dan margin

Pertama, mari kita pastikan margin Dan padding dibuat <ul> Dan <li> elemen. Untuk ini, saya membuat halaman pengujian. Seret penggeser yang relevan dan amati efek pada spasi di setiap sisi penanda daftar. Tip: Jangan ragu untuk menggunakan tombol Atur Ulang untuk mengatur ulang semua kontrol ke nilai awalnya.

catatan: Default Aplikasi Browser padding-inline-left dari 40px tiba <ol> Dan <ul> elemen.Logis padding-inline-left properti setara dengan fisik padding-left Atribut dalam sistem penulisan dengan arah inline kiri ke kanan. Pada artikel ini, saya akan menggunakan sifat fisik untuk kesederhanaan.

seperti yang Anda lihat, padding-left ada <li> Tambahkan spasi setelah penanda daftar. Tiga properti lainnya mengontrol spasi di sebelah kiri markup, dengan kata lain, lekukan item daftar.

Perhatikan bahwa meskipun item daftar adalah padding-left Ya 0px, masih ada celah minimum setelah tanda tersebut.Kesenjangan ini tidak dapat dikurangi margin atau padding. Panjang celah minimum yang tepat tergantung pada browser.

Singkatnya, konten item daftar diposisikan pada jarak minimum khusus browser dari markup, dan dapat disesuaikan dengan menambahkan padding-left tiba <li>.

Selanjutnya, mari kita lihat apa yang terjadi saat kita memosisikan penanda di dalam Daftar barang.

Pindahkan penanda di dalam item daftar

ini list-style-position Atribut menerima dua kata kunci: outsideyang merupakan default, dan inside, yang memindahkan markup di dalam item daftar. Yang terakhir berguna untuk membuat desain dengan item daftar lebar penuh.

jika menandai sekarang di dalam daftar item, apakah ini artinya padding-left ada <li> Tidak ada lagi celah setelah penanda? Ayo cari tahu.Di halaman pengujian saya, buka list-style-position: inside Lewati kotak centang.bagaimana dengan empat padding Dan margin Properti yang terpengaruh oleh perubahan ini?

seperti yang Anda lihat, padding-left ada <li> Sekarang tingkatkan jarak menjadi kiri markup. Ini berarti kami kehilangan kemampuan untuk menambahkan celah setelah penanda.Dalam hal ini, dimungkinkan untuk menambahkan margin-right tiba ::marker itu sendiri, tetapi itu tidak berhasil, seperti yang telah kami buat di atas.

Selain itu, ada bug di Chromium yang menyebabkan spasi kosong setelah tag tiga kali setelah beralih ke inside posisi. Secara default, panjang celah sekitar sepertiga ukuran teks.jadi secara default font-size dari 16pxKesenjangan adalah tentang 5.5px.Setelah beralih ke insideKesenjangan tumbuh menjadi penuh 16px di krom.Kesalahan ini mempengaruhi disc, circleDan square menandai, tapi bukan tanda ordinal.

Gambar di bawah menunjukkan rendering default tag daftar jangkar eksternal dan internal di tiga browser utama di macOS. Untuk kenyamanan, saya telah menyelaraskan semua item daftar secara horizontal pada penandanya untuk memudahkan membandingkan perbedaan ukuran celah.

Untuk meringkas, beralih ke list-style-position: inside Perkenalkan dua masalah.Kami tidak bisa lagi menambah jarak padding-left ada <li>Dan ukuran celah tidak konsisten antar browser.

Terakhir, mari kita lihat apa yang terjadi saat kita mengganti tag daftar default dengan tag kustom.

Beralih ke tag khusus

Ada dua cara untuk menentukan tag khusus:

• list-style-type Dan list-style-image ciri
• content properti aktif ::marker elemen semu

ini content properti lebih kuat.Misalnya, memungkinkan kita untuk menggunakan counter() Fungsi mengakses nomor urut item daftar (secara implisit list-item counter) dan hiasi dengan string khusus.

Sayangnya, Safari tidak mendukung content properti di ::marker Namun (bug WebKit).Untuk alasan ini, saya akan menggunakan list-style-type atribut untuk menentukan tag khusus.Anda masih bisa menggunakan ::marker pemilih untuk menata markup khusus yang dideklarasikan melalui list-style-type.aspek itu ::marker Didukung di Safari.

Karakter Unicode apa pun dapat digunakan sebagai penanda daftar ubahsuaian, tetapi hanya sebagian kecil yang benar-benar memiliki “Bullet” dalam nama resminya, jadi saya ingin mengompilasinya di sini untuk referensi.

catatan: css square Kata kunci tidak memiliki karakter “peluru” yang sesuai di Unicode. Karakter terdekat adalah kotak hitam kecil (▪️) emoji (U+25AA).

Sekarang mari kita lihat apa yang terjadi ketika kita mengganti tag 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, buka list-style-type opsi dan perhatikan setiap perubahan pada bendera.

Seperti yang Anda lihat, ada dua perubahan besar:

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

Menurut CSS Counter Styles Level 3, tag 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-fontuntuk menandai.

Bisakah masalah ukuran kecil diselesaikan dengan CSS?Di halaman pengujian saya, aktifkan gaya markup dan perhatikan saat Anda mengubah font-size, line-heightDan font-family markup.

Seperti yang Anda lihat, meningkat font-size Menyebabkan penanda khusus menjadi tidak sejajar secara vertikal dan tidak dapat dikurangi line-height. ini vertical-align Properti yang dapat dengan mudah memperbaikinya tidak didukung ::marker.

tetapi apakah Anda memperhatikan perubahannya font-family Apakah itu akan menyebabkan penanda menjadi lebih besar?coba atur ke TahomaIni mungkin 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 mungkin juga memperhatikan bahwa bug Chromium tidak lagi terjadi saat Anda menempatkan markup di dalam item daftar. Artinya, tag khusus dapat menjadi solusi untuk bug ini. Ini membawa saya ke pertanyaan utama dan alasan mengapa saya mulai meneliti topik ini. Jika Anda menentukan penanda khusus dan menempatkannya 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 atau margin.
3. padding-left ada <li> Tidak ada celah yang ditambahkan karena penanda sudah diposisikan inside.

meringkaskan

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

1. Default Aplikasi Browser padding-inline-start dari 40px tiba <ul> Dan <ol> elemen.
2. penanda daftar bawaan (disc, decimal, DLL. ). Tidak ada celah minimum setelah tag khusus (string atau URL).
3. Panjang celah dapat ditambah dengan menambahkan a padding-left tiba <ul>tetapi hanya jika penanda berada di luar item daftar (mode default).
4. Ukuran default tag string khusus lebih kecil daripada tag bawaan.Mengubah font-family ada ::marker Dimungkinkan untuk meningkatkan ukurannya.

Kesimpulannya

Melihat kembali contoh kode di awal artikel, saya pikir sekarang saya mengerti mengapa content nilai. Tidak ada cara yang lebih baik selain memasukkan spasi setelah tag SVG.Ini adalah solusi yang diperlukan karena jumlahnya tidak banyak margin Dan padding Kesenjangan dapat dibuat setelah tag khusus ditempatkan di dalam item daftar. A margin-right ada ::marker Ini dapat dilakukan dengan mudah, tetapi tidak didukung.

sampai ::marker Menambahkan dukungan untuk lebih banyak atribut, pengembang web seringkali tidak punya pilihan selain menyembunyikan markup dan penggunaan ::before elemen semu.Saya baru-baru ini harus melakukannya sendiri karena saya tidak dapat mengubah tag background-colorSemoga kita tidak perlu menunggu terlalu lama untuk menjadi lebih kuat ::marker elemen semu.