Буквица - CSS-хитрости

Anonim

initial-letter - это свойство CSS, которое выбирает первую букву элемента, к которому она применяется, и определяет количество строк, которые занимает буква.

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

Сайт New Yorker стилизует начальную букву

Уловка со стилизацией первой буквы контента, используемая для небольшого взлома, когда вы оборачиваете букву в a и применяете класс для ее стилизации :

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Это работает, но это больше разметки HTML, чем мы хотим, и разбивает наш контент. Кроме того, больно применять этот класс вручную каждый раз, когда вы хотите его использовать.

Вот где initial-letterвходит:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Это чище! Другой подход - применить его ::first-letterвместо псевдо-селектора:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Ты это видел? initial-letterСвойство автоматически вычисляет и размер шрифта и количество линий , необходимых для создания нашей стилизованной буквицы! Хотите, чтобы он занимал ровно 2, 3, 4 или более строк? Сообщите администрации, и она сделает всю тяжелую работу.

Изменение свойства на 1, 2 и 4 строки

Синтаксис и значения

initial-letter: normal | ( );

initial-letter принимает следующие значения:

  • normal: Эффект масштабирования не применяется к первой букве. Это может быть полезно для сброса значения, которое может быть унаследовано от каскада.
  • : Сколько строк должна занимать буква, если отрицательные значения не допускаются.
  • : Сколько строк должно утонуть буква, если отрицательные значения не допускаются. Это удобно, если вам нужно расположить букву ниже, чтобы учесть сложные проблемы с интервалом, но, если не указано, принимает значение

Примеры

Буквица, повышенная крышка и блок-крышка с использованием начальной буквы

Стилизация начальной буквы может быть использована для создания необычных методов типографского дизайна. Обратите внимание, что следующие примеры в настоящее время поддерживаются только Safari.

Буквицы , вероятно, являются наиболее знакомым вариантом использования:

См. Начальную букву ручки: буквица Джеффа Грэма (@geoffgraham) на CodePen.

Еще один пример - повышенные шапки :

См. Начальную букву ручки: Raised Cap Джеффа Грэма (@geoffgraham) на CodePen.

Block Caps возвращаются к старым сказкам:

См. Начальную букву ручки: Block Cap Джеффа Грэма (@geoffgraham) на CodePen.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
Нет Нет Нет Нет TP *

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
Нет Нет Нет 14,0–14,4 *

Связанный

  • ::first-letter
  • Фрагмент буквицы

Дополнительная информация

  • Модуль встроенного макета CSS, уровень 3: официальные спецификации
  • Jen Simmons Labs: демонстрации и примеры использования
  • Firefox Ticket: Открытый билет для поддержки функции
  • Билет Internet Explorer: Открытый билет для поддержки функции