Стилизуем маркированный список
Как известно дизайнеры — творческие люди, и верстальщики им не указ, как нарисуют, так и приходится делать, а это далеко не всегда выполнимая задача. Один из распространенных дизайнерских приемов — это украшение каждой позиции списка каким-нибудь замысловатым маркером.
Верстать такой список проще простого — картинка задается через css-свойсво list-style-image, и ваш список выглядит точно как в макете. Но пару раз мне попадались макеты, где в качестве маркера списка использовались различные типографские знаки, типа длинного тире, решетки и кавычки. В принципе можно и их сохранить как картинку, но не так давно я узнала другой, более изящный способ.
Все очень просто, подобно псевдо-классу :hover, имеется псевдо-элемент :before, который то и определяет что именно должно отображаться перед заданным элементом. Применительно к спискам, это можно записать следующим образом:
li:before{
content: "# ";
color: #005070;
}
Здесь content, как нетрудно догадаться и есть свойство, определяющее что же именно за содержимое должно отображаться перед позицией списка. Следует заметить, типографские символы записываются в шестнадцатеричном коде.
В результате у нас получится вот такой список, с нужным символом маркера, без использования картинок.
И все бы хорошо, но имеется проблема с всеми любимым браузером. Internet Explorer, вплоть до 8 версии, не поддерживает before. Однако это проблема разрешима, спасибо статье Владимир Токмакова, на сайте студии Артемия Лебедева. Оказалось, что в IE, можно эмулировать before, через expression, следующим образом:
li{
list-style: none;
behavior: expression( !this.before
? this.before = this.innerHTML = '# ' + this.innerHTML : '' );
color: #005070;
line-height: 20px;
}
Вот и все, благодаря этим нехитрым действиям, у нас есть списки, корректно работающие во всех браузерах.
У меня несколько вопросов:
1) Что значит «типографские символы записываются в шестнадцатеричном коде»? Или имеются в виду мнемонические коды, как следует из примера ниже?
2)Иконку RSS сами рисовали?
Рад, что наконец-то на главной появилась ссылка на RSS-поток. переподписался.
1) Мнемонические коды записываются для IE, в expression, поскольку свойство content, IE игнорирует. А для остальных, нормальных браузеров, типографские знаки действительно записываются в шестнадцатеричном коде, начиная с косой черты. Например, для того чтобы вставить перед позицией списка длинное тире, нужно написать следующее:
li:before{
content: «\2014″
}
2) Иконка для RSS из бесплатных, к сожалению я пока так рисовать не умею)
О, хорошо, пригодится.
Большое спасибо за информацию, буду юзать. :)
А где можно посмотреть шестнадцатеричные коды различных знаков?
в интернете можно найти множество ссылок, вот например здесь, или здесь
У меня ие8 норамально переварил :before, может все-таки «вплоть до 7 версии» ;)
Ну, вообще, во фразе «вплоть до 8 версии», я имела в виду, ДО 8 версии, а с восьмеркой все в порядке)
спаисбо за интересную информацию! очень пригодилось!