initial-letter є властивістю CSS, яка виділяє першу літеру елемента, де вона застосована, і визначає кількість рядків, яку займає буква.
Можливо, ви бачили щось подібне на сайтах новин, де перша буква провідного абзацу більша за решту вмісту.
Фокус зі стилізацією першої літери змісту використовував невеликий хак, коли ви загортаєте лист у 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-letterpsuedo-селектора:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )Ти це бачив? initial-letterВластивість автоматично обчислює і розмір шрифту і кількість ліній , необхідних для створення нашої стилізованої літери! Хочете, щоб він займав рівно 2, 3, 4 або більше рядків? Скажіть власнику, і це зробить важкий підйом.
Синтаксис та значення
initial-letter: normal | ( );initial-letter приймає такі значення:
normal: Не застосовує ефект масштабування до першої літери. Це може бути корисно для скидання значення, яке може бути успадковане від каскаду.: Скільки рядків повинна займати буква, де заборонені від’ємні значення.: Скільки рядків повинна заглибитися буква там, де заборонені від’ємні значення. Це зручно, якщо вам потрібно розташувати літеру нижче, щоб вирішити складні проблеми з інтервалами, але якщо не вказано, воно приймає значення
Приклади
Стилізація початкової літери може бути використана для досягнення деяких химерних методів друкарського дизайну. Зверніть увагу, що наведені нижче приклади лише зараз підтримуються Safari.
Drop Caps - це, мабуть, найбільш звичний варіант використання:
Дивіться початкову букву Pen: Drop Cap від Geoff Graham (@geoffgraham) на CodePen.
Ще один приклад: Raised Caps .
Див. Початкову букву «Перо: піднята шапка» від Джеффа Грема (@geoffgraham) на CodePen.
Block Caps повертаються до старих казок:
Дивіться початковий лист Pen: Block Cap від Geoff Graham (@geoffgraham) на CodePen.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| Ні | Ні | Ні | Ні | TP * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ні | Ні | Ні | 14,0-14,4 * |
Пов’язані
::first-letter- Фрагмент Drop Caps
Більше інформації
- Модуль вбудованого макета CSS Рівень 3: офіційні специфікації
- Лабораторії Джен Сіммонс: Демонстраційні програми та приклади випадків використання
- Квиток Firefox: відкритий квиток на підтримку функції
- Квиток в Internet Explorer: відкритий квиток на підтримку функції