CSS initial-letter — синтаксис и примеры
CSS-свойство initial-letter: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Назначение и границы
Назначение «initial-letter» раскрывается через задачу «управлять чтением, переносом и визуальными характеристиками текста». Свойство initial-letter относится к области «типографика» и применяется к текстовым фрагментам и часто наследуется дочерними элементами. Для воспроизводимой проверки «initial-letter» используйте пример в каталоге с динамической длиной текста и наблюдайте результат при системной тёмной теме.
Рабочий критерий для «initial-letter»: проверьте вычисленное значение initial-letter, наследование и контекст родителя. Если результат «initial-letter» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис initial-letter
Пример «initial-letter» оставляет только контекст, необходимый для области «типографика». Измените одно значение и проследите результат в браузере.
.demo {
initial-letter: 1.5;
}Как работает initial-letter
Чтобы объяснить работу «initial-letter», проследите путь от структуры и входного значения до отображения или поведения. Свойство initial-letter относится к области «типографика» и применяется к текстовым фрагментам и часто наследуется дочерними элементами. Контрольная точка для «initial-letter» — состояние при пустом содержимом.
Проверка в проекте
- Проверьте вычисленное значение initial-letter, наследование и контекст родителя; результат относится непосредственно к «initial-letter».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «initial-letter».
- Проверьте «initial-letter» в каталоге с динамической длиной текста через результат при системной тёмной теме и запишите наблюдаемое изменение.
Выбор «initial-letter» оправдан, если задача относится к области «типографика», а риск «изолированная декларация initial-letter без связанных ограничений может дать другой результат в реальном компоненте» исключён проверкой. Для «initial-letter» сравнивайте не внешний вид, а результат для пользователя.
Практика с initial-letter
Проверьте «initial-letter» в тестовом шаблоне с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «initial-letter»: проверьте вычисленное значение initial-letter, наследование и контекст родителя.
Сценарий: в каталоге с динамической длиной текста.
Ошибки при работе с initial-letter
Доступность
Изолированная декларация initial-letter без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «initial-letter».
Каскад
Подмена семантики визуально похожим div или span при использовании «initial-letter».
Поддержка
Смешивание данных, оформления и поведения в одной хрупкой конструкции; для «initial-letter» проверьте это отдельно.
Поддержка initial-letter
Для «initial-letter» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «initial-letter»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о initial-letter
Как понять, что «initial-letter» выбрано правильно?
«initial-letter» выбрано правильно, когда оно решает задачу «управлять чтением, переносом и визуальными характеристиками текста», сохраняет результат в каталоге с динамической длиной текста и проходит предметную проверку: проверьте вычисленное значение initial-letter, наследование и контекст родителя.
Нужен ли запасной вариант для «initial-letter»?
Запасной вариант для «initial-letter» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «initial-letter» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.