Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать.
К делу. Как сказано выше, HTML элемент у нас один. Пусть это будет заголовок первого уровня.
<h1>About us</h1>Задаем ему базовые стили, фоновый цвет и фоновое изображение (звездочки справа):
h1{
border-top: 1px solid #094eaa;
border-bottom: 1px solid #094eaa;
background: #002261 url(/images/stars.jpg) right center no-repeat;
}Все как обычно. Но теперь нам надо добавить звездочку слева. Делается это так:
h1:first-letter {
background: url(/images/star.jpg) left center no-repeat;
padding: 7px 0 6px 30px;
}Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой, иначе псевдокласс не отработает в IE6.
h1:first-letter{ /*Не сработает*/
property: value;
}
h1:first-letter { /*Сработает, так как есть пробел перед фигурной скобкой*/
property: value;
}Есть еще один момент. Если нужно указать одни и те же стили для нескольких элементов и один из них псевдокласс :first-letter, то нужно обязательно вставить пробел при перечислении элементов, перед запятой. То есть:
h1:first-letter, .someclass { /*Не сработает*/
property: value;
}
h1:first-letter , .someclass { /*Сработает, так как есть пробел перед запятой*/
property: value;
}Вот в принципе и все. Padding нужен для того, чтобы фоновое изображение было больше по высоте чем шрифт и чтобы не быть под самим текстом.
Я уже упоминал об этой теме здесь, но эта тема мне показалась достойной отдельного поста.
Отличный прием. Хотя давно верстаю – его не использовал.
Спасибо.
А есть еще известные вам глюки ie6 из-за отсутствия пробела, и вообще как лучше оформлять для него свой ства эллементов в css файле?
Владимир, я всегда ставлю пробел перед фигурной скобкой, не только в этом случае. Есть еще что-то связанное с :first-line, не помню точно. Если найду у себя – напишу.
IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158, XHTML 1.0 Strict — работает и с пробелом и без
Pashka R., хм, спасибо. Потестим. Но это редкость, я думаю.
[quote comment="3149"]Pashka R., хм, спасибо. Потестим. Но это редкость, я думаю.[/quote]
Может это зависит от док-тайпа?… сейчас посмотреть нет времени…
Pashka R., я потестирую позже.
Вау! Почему же я об этом раньше не знал? neutrino, спасибо тебе, что просветил! ;) Теперь буду использовать. Это ж позволить избавляться от лишних контейнеров. Классно.
Dimox, рад что пригодилось )
А я-то как рад. Респект тебе! ;)
Это супер!
Отлично. Спасибо за статью
Погорячился я, ой погорячился. У метода всплыла куча разногласий с IE. По разному воспринимают padding у элемента и :first-letter. FF естественно прибавляет padding родителя и :first-line. При включенном hasLayout тоже разногласия. С line-height тоже траблы. Вообщем достаточно попробовать сэмулировать sliding doors и все будет ясно. Годится только для простых примеров вроде тех, что ты привел. А жаль. Ой как жаль ((
Похоже, что есть ещё один неприятный нюанс: работает только в block-level элементах.
Nikita Seleckis, да, похоже это так.