В статье представлено несколько способов, которые позволяют установить определенный маркер для ненумерованного списка, а также указаны их достоинства и недостатки

Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег ol, а за маркированный — ul.

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

Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style:

CSS

ol, ul {
	list-style: none;
}

С этого начинается формирование списка с уникальными маркерами и значками. Ниже представлены наиболее распространенные способы представления уникальных и одинаковых для всех браузеров значков элементов списка.

Маркеры через картинки

Наиболее распространенный и простой способ указать для списка маркер — это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:

CSS

ul {
	list-style: none;
}
li{
	background: url(путь-к-картинке) no-repeat;
	padding-left:20px;
}

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

Сиблагуна.

Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки — это дополнительное обращение к серверу.

Маркеры с помощью before

Существует вариант, когда можно обойтись без картинки, если дизайнерские условия позволяют это. Такое очень часто допускается при оформлении основного контента, когда список маркируется простейшими элементами, типа квадратик (•) или стрелочка (→). Таким образом, мы подошли к тому, что в качестве маркера может выступать какой-либо подходящий спецсимвол.

Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before, применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression.

Ниже представлен пример кода, который формирует маркированный список с коротким тире:

CSS

li{
	//z-index: expression(runtimeStyle.zIndex = 1,
 this.innerHTML = "–" + this.innerHTML) /*хак для IE*/
}
 
li:before{
	content: "\2013";
}

На практике получим такую картину:

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

При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content, то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.

Использование insertAdjacentHTML

Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML, ниже представлен код этого метода:

CSS

li{
	//z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML('afterBegin', '–')); 
}

Маркеры, нарисованные CSS-свойствами

Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color, а квадратик в виде рамки — border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:

li{
	//z-index: expression(runtimeStyle.zIndex = 1,
 this.innerHTML = "<div class='listMarkerBackColor'></div>"
 + this.innerHTML) /* хак для ие6 и 7 */
}
 
li:before,
.listMarkerBackColor{
	background-color:#539127;
	width:7px;
	height:7px;
	content:"";
	float:left;
	margin:6px 6px 0 0;
	overflow:hidden;
}
html .listMarkerBackColor{
	margin-right:1px; /* исправляем маленткий косяк в IE6 */
}

Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:

Использование before и first-child в комплексе

Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже

В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child, который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так

HTML

<ul>
    <li><a href="#"> Главная </a></li>
    <li><a href="#"> Блог </a></li>
    <li><a href="#"> CSS </a></li>
    <li>Валидный код при использовании target="_blank"</li>
</ul>

CSS

li:before{
	content: "\2192";
}
li:first-child:before{
	content:"";
}

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

В каких браузерах работает?

Выводы

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