Используем псевдоэлемент :first-letter
Во многих старых книгах в начале главы можно увидеть стилизованное изображение первой буквы — буквицу.
Чтобы создать такой эффект на HTML странице, существует псевдоэлемент :first-letter.
Определение
Спецификация CSS2.1 гласит:
псевдоэлемент :first-letter определяет первую букву первой строки блочного элемента, если перед ней нет никакого другого контента, например картинки или строчной таблицы.
Наглядный демо-пример.
Особенность синтаксиса CSS
В селекторе правила псевдоэлемент :first-letter всегда записывается последним. Например, правильно будет записать p.firstParagraph:first-letter, а p:first-letter.firstParagraph — неправильно.
Свойства, применяющиеся для псевдоэлемента :first-letter
Учти, что кроссбраузерно к :first-letter применить любое свойство не получиться! Согласно спецификации CSS2.1, допустимый для этого псевдоэлемента набор свойств ограничен:
- font и его составляющие
- background и его составляющие
- border и его составляющие
- margin и его составляющие
- padding и его составляющие
- color
- text-decoration
- float
- vertical-align (сработает только если float:none)
- text-transform
- clear
Перечисленных свойств вполне достаточно, для реализации большинства возможных задумок дизайнера (демо-пример).
Отдельные браузеры могут поддерживать для псевдоэлемента :first-letter и другие свойства, не входящие в перечень от W3C. Но использовать их, пожалуй, не стоит — тебе ведь важна кроссбраузенность, не так ли?
Тонкости и нюансы
Спецификация CSS2.1 регламентирует поведение псевдоэлемента :first-letter в разнообразных ситуациях. Примеры таких ситуаций в теории и на практике рассмотрены ниже.
-
Согласно спецификации, если контент начинается с многозначных чисел, включается в псевдоэлемент :first-letter только первое из них.
Такое поведение поддерживают все распространенные браузеры, включая IE6.
-
Согласно спецификации, символы пунктуации, которые идут перед или после заглавной буквы, должны включаться в псевдоэлемент :first-letter.
Кроссбраузерно перед буквой выводятся только следующие символы:
Числовой код Символьный код Символ клавиатуры Описание ' кроссбраузерно не реализуется (IE6-7 не поддерживают мнемонику ') ' апостроф " " " двойная кавычка – apl quote   нет неразрывный пробел Знаки препинания после заглавной буквы стилизуются только в новых версиях браузеров (IE8+, Firefox 3.6.12+, Opera 10.63+, Safari 5+, Сhrome 4+).
-
В спецификации CSS2.1 описано, что у элементов списка псевдоэлемент :first-letter следует после маркера. В случае, если для элемента списка прописано правило list-style-position: inside, правила для :first-letter игнорируются.
На практике на list-style-position:inside все браузеры реагируют по-разному, но не так, как описано в спецификации.
Вообще одновременно делать списку и маркеры и стилизованную первую букву не стоит. Нужно выбрать что-то одно. Если ты выбрал :first-letter, смело пиши list-style:none и будь уверен, что все распространенные браузеры будут вести себя одинаково.
-
Спецификация указывает, что если к элементу применяется псевдоэлемент :before, то псевдоэлемент :first-letter действует на него.
Все браузеры, поддерживающие псевдоэлемент :before (а IE6-7 его не поддерживают), так и поступают.
-
Согласно спецификации псевдоэлемент :first-letter, заданный родителю, может стать как бы общим и для родителя и для потомка. Это происходит в случае, если потомок блочный, его контент начинается с текста, а у родителя перед этим потомком своего текста нет.
Если в такой ситуации потомок не блочный, то правила для :first-letter игнорируются.
Поддерживается IE8, Opera 10.63, Safari 4, Chrome.
Строчный и плавающий :first-leter
Спецификация CSS2.1 декларирует два случая применения псевдоэлемента :first-letter:
псевдоэлемент :first-letter может быть использован как строчный элемент и как плавающий.
В обоих случаях практическая реализация имеет достаточно нюансов. Подробнее эти вопросы рассмотрены в статьях:
P.S.
Материал подготовлен по просьбе пользователя сайта Дмитрия.
Материалы:
- w3schools :: CSS :first-letter pseudo-element
- W3C:: CSS2.1 Selectors