“Как сделать буквицу на CSS” или “Всё, что нужно знать про псевдоэлемент first-letter в CSS”

Задумался тут, что не очень-то любят об этом писать в учебниках, в результате чего о first-letter узнают не сразу. Однако тут либо знают, либо нет, третьего не дано. Так что пост специально для тех кто не знает, в первую очередь. Во вторую очередь скажу о некоторых деталях псевдоэлемента first-letter, которые может быть забыты или неизвестны.

Итак, что же такое буквица. Слово многозначное, это и полевой шалфей, и старинное название азубки, и устаревшее название записки, но нас интересует следующее определение: "Буквица, или инициал - крупная, часто выделенная цветом, орнаментированная или иным образом украшенная начальная буква раздела рукописной или печатной книги." (с) Wiki.

В html-текстах роль буквицы играет first-letter в CSS. Синтаксис у неё простой: если нужно, к примеру, задать оформления первым буквам всех параграфов, то нужно прописать:

Самое приятное, что first-letter поддерживается не только всеми современными браузерами, но и старичок IE6 не явился исключением. Именно поэтому на заметку этот элемент взять необходимо.

Ему можно задавать margin и padding для позиционирования. Также можно задавать float:left для того, чтобы буква была не на уровне со строкой, а как бы в тексте. 

Без float'а всё понятно - нужно выделить букву, обычно цветом и размером. А во втором случае - можно использовать очень любопытно, чтобы как в книгах. Но об этом ниже.

Особенности использования

На хабре отмечают некоторые особенности использования, о которых я поведаю здесь (оригинал статьи).

1. Возможность задать два бэкграунда одному элементу. Например, в один угол одну маленькую картинку, в другой угол - другую.
   h1 {
      background: #ff9900 url(img1.jpg) right center no-repeat;
   }
   h1:first-letter {
      background: url(img2.jpg) left center no-repeat;
      padding: 5px 8px;
   }
2. Не забываем ставить пробелы для IE6. Перед фигурной скобкой - это раз, а два - при указании нескольких классов - перед запятой.
   h1:first-letter{ /*Не сработает*/ }
   h1:first-letter { /*Сработает*/ }
   h1:first-letter, .someclass { /*Не сработает*/ }
   h1:first-letter , .someclass { /*Сработает*/}
3. Закос под старинные книги. Указав float:left, можно сделать из первой буквы что-нибудь нестандартное. К примеру вот варианты из одной статьи.

   

   Выбираем бэкграунд, оформляем букву и вуаля! Автор статьи предлагает создать конструкцию, в которой после каждого заголовка h2 для первого элемента p создаётся оформление.

   h2+p:first-letter {
      float:left;
      padding: 10px;
      background: #fff url(img3.jpg) center bottom no-repeat;
      color: #000;
      border: 1px solid #000;
   }

   Однако эта конструкция в IE6 не поддерживается, а в IE7 только частично. Поэтому подобного рода идею стоило бы, вероятно, сделать на jQuery. Но привязывать это к заголовкам h означает, что только одна буква на странице будет такой. Почему? А из-за того, что каждого заголовка h на странице должно быть по одной штуке. Такая вот премудрость СЕО.

Собственно это, наверное, всё, что нужно знать про first-letter. Удачной всем недели!

CSS

(голосов: 4, средний: 4.50 из 5)