Является ли изображение в стиле list (эффективно) устаревшим стилем?

Question

Недавно я попытался выровнять list-style-image в соответствии с текстом элемента списка, но обнаружил, что это практически невозможно, и что все рекомендуют использовать background-image вместо этого.

Это заставило меня задуматься: есть ли какая-то причина для того, чтобы этот стиль больше существовал, так как все, кажется, вместо этого используют background-image? Есть ли что-нибудь, что вы можете сделать с list-style-image, что нельзя сделать каким-либо другим способом (или это можно сделать проще)? Или этот тег для всех намерений и целей устарел сейчас?

Answer 1

Это определенно не устарело. Но хорошее управление компоновкой зависит от браузеров, реализующих псевдоэлемент ::marker, который, похоже, еще далек от этого.

См. https://drafts.csswg.org/css-lists-3/#markers

Answer 2

Чтобы ответить на мой собственный вопрос, похоже, нет действительного варианта использования для list-style-image. В то время как есть несколько обходных путей для получения аналогичного эффекта (background-image или ::before / ::after изображения), ни один из них на самом деле не использует list-style-image, и все они превосходят (например, они дают больше контроля) list-style-image.

Существует также предложение рабочей группы CSS для ::marker, которое может когда-нибудь, если оно когда-либо будет фактически одобрено, заставить list-style-image иметь причину снова существовать.

Но на данный момент нет причины (или, по крайней мере, причины, приведенной в ответе здесь), почему любой разработчик должен когда-либо использовать list-style-image. Хотя это технически не считается устаревшим, для всех намерений и целей оно, по-видимому, фактически устарело.

Answer 3

Я думаю, что лучший способ - это использовать before pseudo, как показано ниже:

ul {
  list-style: none;
  margin: 0;
}
li {
  position: relative;
  padding: 10px 5px;
}
li::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  background-image: url(https://cdn.shopify.com/s/files/1/1061/1924/products/Sunglasses_Emoji_be26cc0a-eef9-49e5-8da2-169bb417cc0b_large.png?v=1480481057);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<ul>
  <li>red</li>
  <li>blue</li>
  <li>green</li>
  <li>yellow</li>
</ul>