Главная » Языки программирования

Как сделать маркеры css

Содержание
  1. : : marker
  2. Кратко
  3. Пример
  4. Как пишется
  5. Как понять
  6. Элемент списка
  7. Маркеры
  8. Свойства применяемые к маркерному полю
  9. Свойства, применяемые к содержимому маркерного поля
  10. Генерация содержимого маркера
  11. На практике
  12. Алексей Степанов советует
  13. Пользовательские маркеры с помощью CSS ::marker
  14. Совместимость с браузерами #
  15. Псевдоэлементы #
  16. Создание маркера #
  17. Стилизация маркера #
  18. Допустимые свойства CSS для ::marker #
  19. Будущие стили псевдоэлементов #

: : marker

Псевдоэлемент для работы с маркерами элементов списка.

Время чтения: меньше 5 мин

Обновлено 28 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

: : marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

Пример

Скопировать ссылку «Пример» Скопировано

 li::marker  color: #2e9aff;> li::marker  color: #2e9aff; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 li::marker  color: #2e9aff;> li::marker  color: #2e9aff; >

Псевдоэлемент : : marker работает только на элементах списка.

💡 Для обратной совместимости с CSS 2 браузеры позволяют писать некоторые псевдоэлементы с одним двоеточием, например: : : before , : : after , : : first — letter , : : first — line . Однако псевдоэлемент : : marker необходимо указывать с двумя двоеточиями.

Как понять

Скопировать ссылку «Как понять» Скопировано

Элемент списка

Скопировать ссылку «Элемент списка» Скопировано

Маркеры

Скопировать ссылку «Маркеры» Скопировано

Псевдоэлемент : : marker — это маркерное поле в котором находится маркер. Маркер может представлять из себя символ или порядковый номер.

    каждый элемент
    по умолчанию нумеруется в порядке возрастания. А в ненумерованном списке
    каждый элемент
    помечается маркером в виде точки.

Элементы списка автоматически создают псевдоэлемент : : marker , никакие другие элементы этого не делают.

Содержимым этого маркерного поля можно управлять с помощью свойств:

Также есть шорткат list — style , который даёт возможность задать значения для всех этих свойств одновременно.

Свойства применяемые к маркерному полю

Скопировать ссылку «Свойства применяемые к маркерному полю» Скопировано

Только следующие CSS-свойства применяются к маркерному полю:

  • свойства text — combine — upright , unicode — bidi и direction ;
  • свойство content ;
  • все свойства анимации и переходов.

Ожидается, что в будущих спецификациях этот маленький список свойств будет расширен. А пока обходимся тем, что есть.

Свойства, применяемые к содержимому маркерного поля

Скопировать ссылку «Свойства, применяемые к содержимому маркерного поля» Скопировано

Наследуемые свойства, которые применяются к тексту, могут быть установлены на псевдоэлемент : : marker , текстовое содержимое псевдоэлемента будет наследовать значения:

В Safari на данный момент псевдоэлемент : : marker поддерживается не полностью. Нормально работает только свойство color и свойства для работы с текстом. Точно не работают свойства content и direction . А также отсутствует поддержка анимаций и переходов.

Помимо Safari, анимации и переходы не поддерживаются в Firefox на Android.

Генерация содержимого маркера

Скопировать ссылку «Генерация содержимого маркера» Скопировано

Если вы попробуете создать и стилизовать псевдоэлемент : : marker для элемента, у которого свойство display не равно display : list — item , то ничего не выйдет, маркерное поле не создастся.

Воссоздадим искусственный ненумерованный список и попробуем стилизовать псевдоэлемент : : marker элементов :

   
первый элемент псевдосписка
 
второй элемент псевдосписка
 
третий элемент псевдосписка
  div class="unordered-list"> p class="list-item">первый элемент псевдоспискаp> p class="list-item">второй элемент псевдоспискаp> p class="list-item">третий элемент псевдоспискаp> div>      
 .list-item::marker  content: "🌵";> .list-item::marker  content: "🌵"; >

Как видно, маркеры в виде кактусов не появились.

Однако, если указать элементам

значение display : list — item :

 .list-item  display: list-item;> .list-item  display: list-item; >

Псевдоэлемент : : marker элемента списка встаёт перед псевдоэлементом : : before , если он существует в элементе.

Возьмём демку, которая демонстрировалась выше, но немного изменим её CSS:

 .list-item::marker  content: "🌚";> .list-item::before  content: "🌝 ";> .list-item::marker  content: "🌚"; > .list-item::before  content: "🌝 "; >

Браузер решает как в итоге будет выглядеть : : marker по порядку проверяя следующие условия:

  1. Будет отображаться указанное значение если свойство content на псевдоэлементе : : marker отличается от значения по умолчанию ( normal ).
  2. Будет отображаться указанное изображение если применено свойство list — style — image на элементе списка.
  3. Будет отображаться маркер в виде строки если применено свойство list — style — type на элементе списка.
  4. Если ничего из выше перечисленного не выполняется, псевдоэлемент : : marker не создаст поле.

На практике

Скопировать ссылку «На практике» Скопировано

Алексей Степанов советует

Скопировать ссылку «Алексей Степанов советует» Скопировано

🛠 К сожалению, из-за того, что на данный момент свойств для изменения маркерного поля достаточно мало, его не получится как-то по-особому стилизовать. Например, в первой демке в начале доки фактически не используется псевдоэлемент : : marker . Синие маркеры в виде квадратиков сделаны в псевдоэлементе : : before через position : absolute с указанием свойств width и heigth и свойства background — color , данные свойства псевдоэлемент : : marker не поддерживает.

 li  color: #2e9aff;> li::marker  color: #f498ad; font-weight: bold;> li  color: #2e9aff; > li::marker  color: #f498ad; font-weight: bold; >

Или вы можете стилизовать маркер конкретного элемента списка, например, комбинируя псевдоэлемент : : marker с псевдоклассом last — of — type :

 li::marker  color: aquamarine;> li:last-of-type::marker  color: tomato;> li::marker  color: aquamarine; > li:last-of-type::marker  color: tomato; >

    . Также можно влиять и на элементы списка
    при помощи счётчиков в CSS.

Источник

Пользовательские маркеры с помощью CSS ::marker

Теперь можно легко настроить цвет, размер и тип пункта или маркера при использовании &LTul> или &LTol>.

Adam Argyle

Oriol Brufau

Благодаря Igalia при поддержке Bloomberg мы наконец-то можем избавиться от костылей для стилей списков. Посмотрите!

Благодаря селектору CSS ::marker мы можем изменять содержимое и некоторые стили маркеров и чисел.

Совместимость с браузерами #

::marker поддерживается в Firefox для настольных компьютеров и Android, Safari для настольных компьютеров и iOS (только свойства color и font-* , см. ошибку 204163), а также в браузерах для настольных компьютеров и Android на базе Chromium. См. обновления в таблице совместимости с браузерами MDN.

Псевдоэлементы #

Рассмотрим следующий базовый маркированный список HTML:

ul> 
li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li> 
li>Dolores quaerat illo totam porro</li> 
li>Quidem aliquid perferendis voluptates</li> 
li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li> 
li>Fuga</li>
</ul>

В результате получается такой ожидаемый рендеринг:

Точка в начале каждого элемента &LTli> является произвольной! Браузер рисует и создает за вас сгенерированную рамку маркера.

Сегодня мы рады поговорить о псевдоэлементе ::marker , который дает возможность стилизовать элемент маркера, который браузер создает за вас.

Ключевой термин

Псевдоэлемент представляет элемент в документе, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца с помощью псевдоэлемента p::first-line , даже если нет HTML-элемента, обертывающего эту строку текста.

Создание маркера #

Блок псевдоэлемента маркера ::marker автоматически создается внутри каждого элемента списка перед фактическим содержимым и псевдоэлементом ::before .

li::before  
content: "::before"; 
background: lightgray; 
border-radius: 1ch; 
padding-inline: 1ch; 
margin-inline-end: 1ch;
>

Обычно элементы списка являются элементами HTML &LTli> , но другие элементы также могут стать элементами списка с помощью display: list-item .

dl> 
dt>Lorem</dt> 
dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd> 
dd>Dolores quaerat illo totam porro</dd>
 
dt>Ipsum</dt> 
dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd 
 display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
>

Стилизация маркера #

До ::marker списки можно было стилизовать с помощью list-style-type и list-style-image , чтобы изменить символ элемента списка с помощью одной строки CSS:

li  
list-style-image: url(/right-arrow.svg); 
/* ИЛИ */ 
list-style-type: '👉'; 
padding-inline-start: 1ch;
>

Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д. Вот где на помощь приходит ::marker . Он позволяет индивидуально и глобально выбирать эти псевдоэлементы из CSS:

li::marker  
color: hotpink;
>

li:first-child::marker  
font-size: 5rem;
>

Если в приведенном выше списке нет розовых маркеров, значит, ::marker не поддерживается вашим браузером.

Свойство list-style-type дает очень ограниченные возможности для стилизации. Псевдоэлемент ::marker означает, что можно настроить таргетинг самого маркера и применить стили непосредственно к нему. Это дает гораздо больший контроль.

Тем не менее, вы не можете использовать все свойства CSS для ::marker . Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы экспериментируете с этим псевдоэлементом, а результата нет, ознакомьтесь с приведенным ниже списком — он описывает, что можно и что нельзя сделать с помощью CSS:

Допустимые свойства CSS для ::marker #

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Изменение содержимого ::marker выполняется с помощью content вместо list-style-type . В следующем примере для первого элемента используется стиль list-style-type , а для второго — ::marker .Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, что означает, что текст анимируется так же, как и маркер. При использовании ::marker мы можем выбирать только блок маркера, а не текст.

Также обратите внимание на то, что отключенное свойство background не действует.

DevTools открыты и показывают стили из пользовательского агента и пользовательских стилей

Будущие стили псевдоэлементов #

Вы можете узнать больше о :: marker здесь:

Источник

Читайте также:  Python редактирование файла txt
Оцените статью
© 2024 Программирование