Используем псевдоэлемент :first-letter

Автор: Татьяна Шкабко, Александр Головко Дата публикации: 20.12.2010

Во многих старых книгах в начале главы можно увидеть стилизованное изображение первой буквы — буквицу.

примеры буквицы

Чтобы создать такой эффект на HTML странице, существует псевдоэлемент :first-letter.

Определение

Спецификация CSS2.1 гласит:

псевдоэлемент :first-letter определяет первую букву первой строки блочного элемента, если перед ней нет никакого другого контента, например картинки или строчной таблицы.

Наглядный демо-пример.

Особенность синтаксиса CSS

В селекторе правила псевдоэлемент :first-letter всегда записывается последним. Например, правильно будет записать p.firstParagraph:first-letter, а p:first-letter.firstParagraph — неправильно.

Свойства, применяющиеся для псевдоэлемента :first-letter

Учти, что кроссбраузерно к :first-letter применить любое свойство не получиться! Согласно спецификации CSS2.1, допустимый для этого псевдоэлемента набор свойств ограничен:

Перечисленных свойств вполне достаточно, для реализации большинства возможных задумок дизайнера (демо-пример).

Отдельные браузеры могут поддерживать для псевдоэлемента :first-letter и другие свойства, не входящие в перечень от W3C. Но использовать их, пожалуй, не стоит — тебе ведь важна кроссбраузенность, не так ли?

Тонкости и нюансы

Спецификация CSS2.1 регламентирует поведение псевдоэлемента :first-letter в разнообразных ситуациях. Примеры таких ситуаций в теории и на практике рассмотрены ниже.

  1. Согласно спецификации, если контент начинается с многозначных чисел, включается в псевдоэлемент :first-letter только первое из них.

    внутрь :first-letter включается только первая цифра

    Такое поведение поддерживают все распространенные браузеры, включая IE6.

    Демо-пример

  2. Согласно спецификации, символы пунктуации, которые идут перед или после заглавной буквы, должны включаться в псевдоэлемент :first-letter.

    знаки пунктуации должны включаться внутрь :first-letter

    Кроссбраузерно перед буквой выводятся только следующие символы:

    Числовой код Символьный код Символ клавиатуры Описание
    ' кроссбраузерно не реализуется (IE6-7 не поддерживают мнемонику ') ' апостроф
    " " " двойная кавычка – apl quote
        нет неразрывный пробел

    Знаки препинания после заглавной буквы стилизуются только в новых версиях браузеров (IE8+, Firefox 3.6.12+, Opera 10.63+, Safari 5+, Сhrome 4+).

    Демо-пример

  3. В спецификации CSS2.1 описано, что у элементов списка псевдоэлемент :first-letter следует после маркера. В случае, если для элемента списка прописано правило list-style-position: inside, правила для :first-letter игнорируются.

    На практике на list-style-position:inside все браузеры реагируют по-разному, но не так, как описано в спецификации.

    Демо-пример

    Вообще одновременно делать списку и маркеры и стилизованную первую букву не стоит. Нужно выбрать что-то одно. Если ты выбрал :first-letter, смело пиши list-style:none и будь уверен, что все распространенные браузеры будут вести себя одинаково.

    Демо-пример

  4. Спецификация указывает, что если к элементу применяется псевдоэлемент :before, то псевдоэлемент :first-letter действует на него.

    Все браузеры, поддерживающие псевдоэлемент :before (а IE6-7 его не поддерживают), так и поступают.

    Демо-пример

  5. Согласно спецификации псевдоэлемент :first-letter, заданный родителю, может стать как бы общим и для родителя и для потомка. Это происходит в случае, если потомок блочный, его контент начинается с текста, а у родителя перед этим потомком своего текста нет.

    Если в такой ситуации потомок не блочный, то правила для :first-letter игнорируются.

    Поддерживается IE8, Opera 10.63, Safari 4, Chrome.

    Демо-пример.

Строчный и плавающий :first-leter

Спецификация CSS2.1 декларирует два случая применения псевдоэлемента :first-letter:

псевдоэлемент :first-letter может быть использован как строчный элемент и как плавающий.

В обоих случаях практическая реализация имеет достаточно нюансов. Подробнее эти вопросы рассмотрены в статьях:

P.S.

Материал подготовлен по просьбе пользователя сайта Дмитрия.

Материалы:

По теме: