Все, что вам нужно знать о пробеле после маркера списка

я читал «Креативное оформление списка» в блоге Google web.dev и заметил что-то странное в одном из примеров кода в ::marker раздел статьи. Встроенные маркеры списка — это маркеры, порядковые номера и буквы. ::marker псевдоэлемент позволяет нам стилизовать эти маркеры или заменить их пользовательским символом или изображением.

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

В примере, который привлек мое внимание, значок SVG используется в качестве пользовательского маркера для элементов списка. Но есть еще один пробел (" ") в значении CSS рядом с url() функция. Цель этого пробела, по-видимому, состоит в том, чтобы вставить пробел после пользовательского маркера.

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

Во-первых, я попытался заменить символ пробела правильным полем:

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

Это не сработало. Как выясняется из, ::marker поддерживает только небольшой набор свойств 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 сам по себе, но это не работает, как мы установили выше.

Кроме того, есть ошибка в хроме что вызывает пробел после маркера тройной после перехода на inside позиционирование. По умолчанию длина пробела составляет около одной трети размера текста. Так что по умолчанию font-size of 16px, разрыв примерно 5.5px. После перехода на inside, разрыв увеличивается до полного 16px в Хроме. Эта ошибка влияет на disc, circleкачества square маркеры, но не порядковые номера маркеров.

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

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

Наконец, давайте посмотрим, что произойдет, если мы заменим маркер списка по умолчанию пользовательским маркером.

Переключение на пользовательский маркер

Существует два способа определить пользовательский маркер:

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

Ассоциация content собственность сильнее. Например, это позволяет нам использовать counter() для доступа к порядковому номеру элемента списка (т. безоговорочно list-item противодействие) и украсьте его пользовательскими строками.

К сожалению, Safari не поддерживает content собственность на ::marker все же (Ошибка WebKit). По этой причине я собираюсь использовать list-style-type свойство для определения пользовательского маркера. Вы по-прежнему можете использовать ::marker селектор для стилизации пользовательского маркера, объявленного через list-style-type. Этот аспект ::marker поддерживается в Safari.

Любой символ Unicode потенциально может служить пользовательским маркером списка, но только небольшой набор символов действительно имеет «пулю» в своем официальном названии, поэтому я решил собрать их здесь для справки.

Характер	Фамилия	Кодовая точка	ключевое слово CSS
•	Bullet	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 ключевое слово не имеет соответствующего символа «пуля» в Юникоде. Ближайший символ — это эмодзи Черный маленький квадрат (▪️) (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. Длину зазора можно увеличить, добавив padding-left в <ul>, но только если маркер расположен за пределами элемента списка (режим по умолчанию).
4. Пользовательские строковые маркеры имеют меньший размер по умолчанию, чем встроенные маркеры. Изменение font-family on ::marker может увеличить их размер.

Заключение

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

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

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