Как известно дизайнеры – творческие люди, и верстальщики им не указ, как нарисуют, так и приходится делать, а это далеко не всегда выполнимая задача. Один из распространенных дизайнерских приемов – это украшение каждой позиции списка каким-нибудь замысловатым маркером.
Верстать такой список проще простого – картинка задается через css-свойсво list-style-image, и ваш список выглядит точно как в макете. Но пару раз мне попадались макеты, где в качестве маркера списка использовались различные типографские знаки, типа длинного тире, решетки и кавычки. В принципе можно и их сохранить как картинку, но не так давно я узнала другой, более изящный способ.
Все очень просто, подобно псевдо-классу :hover, имеется псевдо-элемент :before, который то и определяет что именно должно отображаться перед заданным элементом. Применительно к спискам, это можно записать следующим образом:
[css]
li:before{
content: "# ";
color: #005070;
}
[/css]
Здесь content, как нетрудно догадаться и есть свойство, определяющее что же именно за содержимое должно отображаться перед позицией списка. Следует заметить, типографские символы записываются в шестнадцатеричном коде.
В результате у нас получится вот такой список, с нужным символом маркера, без использования картинок.
И все бы хорошо, но имеется проблема с всеми любимым браузером. Internet Explorer, вплоть до 8 версии, не поддерживает before. Однако это проблема разрешима, спасибо статье Владимир Токмакова, на сайте студии Артемия Лебедева. Оказалось, что в IE, можно эмулировать before, через expression, следующим образом:
[css]
li{
list-style: none;
behavior: expression( !this.before
? this.before = this.innerHTML = ‘# ’ + this.innerHTML : ” );
color: #005070;
line-height: 20px;
}
[/css]
Вот и все, благодаря этим нехитрым действиям, у нас есть списки, корректно работающие во всех браузерах.
Leave a Reply to dreamhelg Cancel reply