Усе, що вам потрібно знати про розрив після маркера списку

я читав «Креативний стиль списку» у блозі Google web.dev і помітив щось дивне в одному з прикладів коду в ::marker розділ статті. Вбудованими маркерами списку є маркери, порядкові номери та літери. The ::marker pseudo-element дозволяє нам стилізувати ці маркери або замінювати їх власним символом чи зображенням.

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

Приклад, який привернув мою увагу, використовує піктограму SVG як спеціальний маркер для елементів списку. Але також є один пробіл (" ") у значенні CSS поруч із url() функція. Здається, призначення цього простору полягає в тому, щоб вставити проміжок після спеціального маркера.

Коли я побачив цей код, я одразу задумався, чи є кращий спосіб створити розрив. Додавання пробілу до content більше схоже на обхідний шлях, ніж на оптимальне рішення. CSS забезпечує margin та padding та інші стандартні способи розподілу елементів на сторінці. Чи жодна з цих властивостей не може бути використана в цій ситуації?

По-перше, я спробував замінити пробіл належним полем:

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

Це не спрацювало. Як виявляється, ::marker підтримує лише a невеликий набір властивостей CSS, пов’язаних переважно з текстом. Наприклад, ви можете змінити font-size та color маркера та визначте спеціальний маркер, налаштувавши content до рядка або URL-адреси, як показано вище. Але margin та padding властивості є Не підтримується, тому їх встановлення не має ефекту. Яке розчарування.

Чи справді пробіл є єдиним способом вставити пробіл після спеціального маркера? Мені потрібно було дізнатися. Досліджуючи цю тему, я зробив кілька цікавих відкриттів, якими хотів би поділитися в цій статті.

Додавання відступів і полів

Спочатку давайте підтвердимо, що margin та padding зробити на <ul> та <li> елементів. Для цього я створив тестову сторінку. Перетягніть відповідні повзунки та спостерігайте за ефектом інтервалів з кожного боку маркера списку. Порада: використовуйте кнопку «Скинути», щоб скинути всі елементи керування до початкових значень.

Примітка: Браузери застосовують стандартні налаштування padding-inline-left of 40px до <ol> та <ul> елементів. Логічне padding-inline-left властивість еквівалентна фіз padding-left властивість у системах письма з напрямком рядка зліва направо. У цій статті я буду використовувати фізичні властивості заради простоти.

Як ви можете бачити, padding-left on <li> збільшує проміжок після маркера списку. Інші три властивості керують інтервалом ліворуч від маркера, іншими словами, відступом елемента списку.

Зверніть увагу, що навіть якщо елемент списку padding-left is 0px, після маркера залишається мінімальний проміжок. Цей розрив неможливо зменшити за допомогою margin or padding. Точна довжина мінімального проміжку залежить від браузера.

Підводячи підсумок, вміст елемента списку розташовується на певній для браузера мінімальній відстані від маркера, і цей проміжок можна додатково збільшити, додавши padding-left до <li>.

Далі подивимося, що станеться, коли ми розташуємо маркер всередині елемент списку.

Переміщення маркера всередині елемента списку

Команда list-style-position властивість приймає два ключові слова: outside, який є типовим, і inside, який переміщує маркер всередині елемента списку. Останнє корисно для створення дизайнів із елементами списку повної ширини.

Якщо маркер зараз всередині пункт списку, це означає, що padding-left on <li> більше не збільшує розрив після маркера? Давай дізнаємось. На моїй тестовій сторінці увімкніть list-style-position: inside за допомогою прапорця. Як четверо padding та margin властивості, на які впливає ця зміна?

Як ви можете бачити, padding-left on <li> тепер збільшує інтервал до залишити маркера. Це означає, що ми втратили можливість збільшувати розрив після маркера. У цій ситуації було б корисно мати можливість додавати margin-right до ::marker сам, але це не працює, як ми встановили вище.

Крім того, є помилка в Chromium що призводить до розриву після маркера потрійний після переходу на inside позиціонування. За замовчуванням довжина проміжку становить приблизно одну третину розміру тексту. Так за замовчуванням font-size of 16px, розрив близько 5.5px. Після переходу на inside, розрив зростає на повну 16px у Chrome. Ця помилка впливає на disc, circle та square маркери, але не маркери порядкової цифри.

На наступному зображенні показано стандартне відтворення зовнішніх і внутрішніх маркерів списку в трьох основних браузерах у macOS. Для вашої зручності я горизонтально вирівняв усі елементи списку за їхніми маркерами, щоб полегшити порівняння відмінностей у розмірах проміжків.

Підводячи підсумок, переходячи на list-style-position: inside створює дві проблеми. Ми більше не можемо збільшити розрив через padding-left on <li>, і розмір проміжку не узгоджується між браузерами.

Нарешті, давайте подивимося, що станеться, якщо ми замінимо маркер списку за замовчуванням на спеціальний маркер.

Перехід на спеціальний маркер

Є два способи визначення a користувацький маркер:

• list-style-type та list-style-image властивості
• content майно на ::marker псевдоелемент

Команда content властивість потужніша. Наприклад, це дозволяє нам використовувати counter() функція доступу до порядкового номера елемента списку (the неявний list-item протидія) і прикрасьте його власними рядками.

На жаль, Safari не підтримує content власність на ::marker ще (Помилка WebKit). З цієї причини я збираюся використовувати list-style-type властивість для визначення власного маркера. Ви все ще можете використовувати ::marker селектор для стилізації власного маркера, оголошеного через list-style-type. Цей аспект ::marker підтримується в Safari.

Будь-який символ Юнікоду потенційно може служити маркером спеціального списку, але лише невеликий набір символів насправді має «Bullet» у своїй офіційній назві, тому я подумав зібрати їх тут для довідки.

Характер	ІМ'Я	Кодовий пункт	Ключове слово CSS
•	куля	U+2022	disc
‣	Трикутна куля	U+2023
⁃	Маркер дефіса	U+2043
⁌	Чорна куля ліворуч	U+204C
⁍	Чорна куля вправо	U+204D
◘	Інверсна куля	U+25D8
◦	Біла куля	U+25E6	circle
☙	Перевернута куля з квітковим сердечком	U+2619
❥	Обернена важка куля з чорним серцем	U+2765
❧	Обернена куля з квітковим сердечком	U+2767
⦾	Обведена біла куля	U+29BE
⦿	Обведена куля	U+29BF

Примітка: CSS square Ключове слово не має відповідного символу «Маркер» в Unicode. Персонаж, який підходить ближче всього, це емодзі Чорного квадрата (▪️)U+25AA).

Тепер давайте подивимося, що станеться, якщо ми замінимо стандартний маркер списку на list-style-type: "•" (U+2022 Куля). Це той самий символ, що й маркер за замовчуванням, тому не повинно бути суттєвих відмінностей у візуалізації. На моїй тестовій сторінці увімкніть list-style-type і спостерігайте за змінами маркера.

Як бачите, є дві суттєві зміни:

1. Після маркера більше немає мінімального проміжку.
2. Куля стала меншою, ніби її зменшили font-size.

За оцінками Стилі лічильників CSS, рівень 3, стандартний маркер списку (disc) має бути «схожим на • U+2022 КУЛЯ». Здається, браузери збільшують розмір маркера за замовчуванням, щоб зробити його більш читабельним. Firefox навіть використовує спеціальний шрифт, -moz-bullet-font, для маркера.

Чи можна вирішити проблему з малим розміром за допомогою CSS? На моїй тестовій сторінці увімкніть стиль маркера та спостерігайте, що відбувається, коли ви змінюєте font-size, line-height та font-family маркера.

Як бачите, збільшення font-size призводить до того, що настроюваний маркер зміщується по вертикалі, і це не можна виправити, зменшивши line-height, vertical-align властивість, яка може легко вирішити цю проблему, не підтримується на ::marker.

Але чи помітили ви, що зміна font-family може стати причиною збільшення маркера? Спробуйте встановити його Tahoma. Потенційно це може бути досить хорошим вирішенням проблеми з малим розміром, хоча я не тестував, який шрифт найкраще працює в основних браузерах і операційних системах.

Можливо, ви також помітили, що помилка Chromium більше не виникає, коли ви розташовуєте маркер усередині елемента списку. Це означає, що спеціальний маркер може служити обхідним шляхом для цієї помилки. І це підводить мене до головної проблеми та причини, чому я почав досліджувати цю тему. Якщо ви визначаєте настроюваний маркер і розташовуєте його всередині елемента списку, після маркера не буде проміжків і неможливо вставити проміжки стандартними засобами.

1. Немає мінімального проміжку після настроюваних маркерів.
2. ::marker не підтримує padding or margin.
3. padding-left on <li> не збільшує проміжок, оскільки маркер розташований inside.

Підсумки

Ось короткий виклад усіх ключових фактів, які я згадав у статті:

1. Браузери застосовують стандартні налаштування padding-inline-start of 40px до <ul> та <ol> елементи.
2. Мінімальний проміжок після вбудованих маркерів списку (disc, decimalтощо). Немає мінімального проміжку після спеціальних маркерів (рядок або URL).
3. Довжину розриву можна збільшити, додавши a padding-left до <ul>, але лише якщо маркер розташований за межами елемента списку (режим за замовчуванням).
4. Настроювані рядкові маркери мають менший розмір за замовчуванням, ніж вбудовані маркери. Зміна font-family on ::marker може збільшити їх розмір.

Висновок

Озираючись на приклад коду з початку статті, мені здається, тепер я розумію, чому в content значення. Просто немає кращого способу вставити пробіл після маркера SVG. Це обхідний шлях, який потрібен, оскільки жодна кількість margin та padding може створити проміжок після спеціального маркера, який розміщено всередині елемента списку. А margin-right on ::marker міг легко це зробити, але це не підтримується.

До ::marker додає підтримку для більшої кількості властивостей, веб-розробники часто не мають іншого вибору, окрім як приховати маркер і емулювати його за допомогою ::before псевдоелемент. Мені довелося зробити це нещодавно, тому що я не міг змінити маркер background-color. Сподіваюся, нам не доведеться надто довго чекати на більш потужний ::marker псевдоелемент.

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/