Войти
RSS-подписка
Читать в ЖЖ
Яndex-Лента
В Google Reader
Уже довольно давно использую псевдокласс :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 нужен для того, чтобы фоновое изображение было больше по высоте чем шрифт и чтобы не быть под самим текстом.
(проголосовали: 9, рейтинг: 4.56 из 5)
Загрузка ...
Я уже упоминал об этой теме здесь, но эта тема мне показалась достойной отдельного поста.
Комментарий by neutrino — Декабрь 20, 2007 @ 1:39 pm | Цитировать
Отличный прием. Хотя давно верстаю - его не использовал.
Спасибо.
А есть еще известные вам глюки ie6 из-за отсутствия пробела, и вообще как лучше оформлять для него свой ства эллементов в css файле?
Комментарий by Владимир — Декабрь 20, 2007 @ 2:50 pm | Цитировать
Владимир, я всегда ставлю пробел перед фигурной скобкой, не только в этом случае. Есть еще что-то связанное с :first-line, не помню точно. Если найду у себя - напишу.
Комментарий by neutrino — Декабрь 20, 2007 @ 2:53 pm | Цитировать
IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158, XHTML 1.0 Strict — работает и с пробелом и без
Комментарий by Pashka R. — Декабрь 20, 2007 @ 3:01 pm | Цитировать
Pashka R., хм, спасибо. Потестим. Но это редкость, я думаю.
Комментарий by neutrino — Декабрь 20, 2007 @ 3:08 pm | Цитировать
Может это зависит от док-тайпа?… сейчас посмотреть нет времени…
Комментарий by Pashka R. — Декабрь 20, 2007 @ 3:11 pm | Цитировать
Pashka R., я потестирую позже.
Комментарий by neutrino — Декабрь 20, 2007 @ 3:33 pm | Цитировать
Вау! Почему же я об этом раньше не знал? neutrino, спасибо тебе, что просветил!
Теперь буду использовать. Это ж позволить избавляться от лишних контейнеров. Классно.
Комментарий by Dimox — Декабрь 20, 2007 @ 3:49 pm | Цитировать
Dimox, рад что пригодилось )
Комментарий by neutrino — Декабрь 20, 2007 @ 3:59 pm | Цитировать
А я-то как рад. Респект тебе!
Комментарий by Dimox — Декабрь 20, 2007 @ 4:04 pm | Цитировать
Это супер!
Комментарий by Максим Покровский — Декабрь 20, 2007 @ 8:05 pm | Цитировать
Отлично. Спасибо за статью
Комментарий by Alex — Декабрь 20, 2007 @ 9:57 pm | Цитировать
Погорячился я, ой погорячился. У метода всплыла куча разногласий с IE. По разному воспринимают padding у элемента и :first-letter. FF естественно прибавляет padding родителя и :first-line. При включенном hasLayout тоже разногласия. С line-height тоже траблы. Вообщем достаточно попробовать сэмулировать sliding doors и все будет ясно. Годится только для простых примеров вроде тех, что ты привел. А жаль. Ой как жаль ((
Комментарий by Максим Покровский — Декабрь 21, 2007 @ 1:49 am | Цитировать