CSS caret-animation — синтаксис и примеры
CSS-свойство caret-animation: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
«caret-animation» отмечено как экспериментальное в MDN Browser Compatibility Data. Предусмотрите базовый вариант и протестируйте целевые браузеры.
Суть темы
У темы «caret-animation» есть конкретная роль в области «движение и преобразования». Свойство caret-animation относится к области «движение и преобразования» и обычно работает после раскладки и требует учёта prefers-reduced-motion. Для «caret-animation» на странице при увеличении текста до 200% используйте изменение при prefers-reduced-motion и меняйте только одно условие за запуск.
Для «caret-animation» сначала проверьте вычисленное значение caret-animation, наследование и контекст родителя. После этого сравните исходное и изменённое состояние «caret-animation» на одном и том же содержимом.
Синтаксис caret-animation
Пример «caret-animation» оставляет только контекст, необходимый для области «движение и преобразования». Измените одно значение и проследите результат в браузере.
.demo {
caret-animation: pulse 1s ease-in-out infinite alternate;
}Как работает caret-animation
Браузер обрабатывает «caret-animation» в контексте области «движение и преобразования»: свойство caret-animation относится к области «движение и преобразования» и обычно работает после раскладки и требует учёта prefers-reduced-motion. Для «caret-animation» наблюдения через изменение при prefers-reduced-motion и результат при системной тёмной теме отделяют исходное условие от результата.
Проверка в проекте
- Проверьте вычисленное значение caret-animation, наследование и контекст родителя; результат относится непосредственно к «caret-animation».
- Проверить длинный текст, пустое значение и отсутствие необязательного ресурса при разборе «caret-animation».
- Проверьте «caret-animation» на странице при увеличении текста до 200% через изменение при prefers-reduced-motion и запишите наблюдаемое изменение.
Выбор «caret-animation» оправдан, если задача относится к области «движение и преобразования», а риск «изолированная декларация caret-animation без связанных ограничений может дать другой результат в реальном компоненте» исключён проверкой. Для «caret-animation» сравнивайте не внешний вид, а результат для пользователя.
Практика с caret-animation
Перенесите «caret-animation» на контрольной странице и испытайте его на странице при увеличении текста до 200%. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «caret-animation»: изолированная декларация caret-animation без связанных ограничений может дать другой результат в реальном компоненте.
Сценарий: на странице при увеличении текста до 200%.
Ошибки при работе с caret-animation
Доступность
Изолированная декларация caret-animation без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «caret-animation».
Каскад
Скрытие фокуса без равноценной заметной замены при использовании «caret-animation».
Поддержка
Отсутствие запасного поведения при неподдерживаемой возможности; для «caret-animation» проверьте это отдельно.
Поддержка caret-animation
Для «caret-animation» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «caret-animation»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о caret-animation
Как понять, что «caret-animation» выбрано правильно?
«caret-animation» выбрано правильно, когда оно решает задачу «изменять визуальное положение или переход между состояниями интерфейса», сохраняет результат на странице при увеличении текста до 200% и проходит предметную проверку: проверьте вычисленное значение caret-animation, наследование и контекст родителя.
Нужен ли запасной вариант для «caret-animation»?
Для «caret-animation» запасной вариант обязателен: возможность отмечена как экспериментальная. Сначала реализуйте базовое поведение «caret-animation», затем подключайте улучшение после проверки поддержки.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.