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

26 апреля 2010 0 Рубрика: HTML&CSS, Важные мелочи

« Предыдущая запись
Рейтинг CMS и статистика CMS на CMSmagazine

Следующая запись »
10 лучших CSS хаков для кроссбраузерности

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

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

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

p:first-letter {
font: bold 14px Tahoma;
color: red;
}

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

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

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

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

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

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

Возможность задать два бэкграунда одному элементу. Например, в один угол одну маленькую картинку, в другой угол - другую.

h1 {
   background: #ff9900 url(img1.jpg) right center no-repeat;
}
h1:first-letter {
   background: url(img2.jpg) left center no-repeat;
   padding: 5px 8px;
}
Не забываем ставить пробелы для IE6. Перед фигурной скобкой - это раз, а два - при указании нескольких классов - перед запятой.

h1:first-letter{ /*Не сработает*/ }
h1:first-letter { /*Сработает*/ }
h1:first-letter, .someclass { /*Не сработает*/ }
h1:first-letter , .someclass { /*Сработает*/}
Закос под старинные книги. Указав 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 на странице должно быть по одной штуке. Такая вот премудрость СЕО.