Значительный скачок CSS за последнее время привнес немало новых свойств и возможностей. Среди них есть относящиеся к типографике. Рассмотрим в статье одно из самых интересных новых свойств - initial-letter.
Что такое CSS свойство initial-letter
Свойство initial-letter предоставляет нам расширенный контроль над первой буквой текста. Значением свойства можно указать сколько она будет занимать строк и насколько низко будет расположена.
initial-letter применяется к псевдоэлементу ::first-letter, поэтому общая конструкция стиля будет выглядеть приблизительно так:
p::first-letter {
initial-letter: 3;
}что будет означать - высота первой буквы в абзаце равна трем строкам. Вот как это будет выглядеть на примере:
В значении свойства может быть еще второй параметр. Он указывается через пробел и означает - до какой строки должна быть опущена первая буква.
p::first-letter {
initial-letter: 3 4; /* Высота первой буквы будет 3 строки, а положение ее будет на уровне 4й строки */
}Таким образом, всего одним свойством мы избегаем ранее существовавшие проблемы, связанные с дополнительными обертками, ненужными стилями или позиционированием.
Применив несколько дополнительных декоративных стилей, первую букву можно оформить в симпатичном стиле согласно контексту вашего сайта.
Пока поддержка initial-letter частичная и не во всех браузерах. Однако в перспективе нас ожидают другие новые свойства (initial-letter-align и initial-lettter-wrap) и реализация дополнительных функций. Поэтому следите за обновлениями, чтобы быть в курсе самых свежих новинок.
Комментарии (0)