CSS light-dark() — как работает
CSS light-dark(): принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Когда применять
«light-dark()» рассматривается не как изолированный синтаксис, а как часть области «CSS-функции». Функция light-dark() вычисляет CSS-значение из переданных аргументов. Практический контекст для «light-dark()» — на странице при увеличении текста до 200%; во время проверки не добавляйте новую обёртку до объяснения её роли.
Перед применением «light-dark()» сформулируйте ожидаемое поведение, затем проверяйте единицы, диапазоны аргументов и запасное значение. Для «light-dark()» такое сравнение показывает реальную причину изменения.
Синтаксис light-dark()
Минимальная запись «light-dark()» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
width: light-dark(…);
}Как работает light-dark()
Браузер обрабатывает «light-dark()» в контексте области «CSS-функции»: возвращает значение, тип которого должен подходить выбранному свойству. Для «light-dark()» наблюдения через перестроение при смене writing-mode и изменение при prefers-reduced-motion отделяют исходное условие от результата.
Проверка в проекте
- Проверяйте единицы, диапазоны аргументов и запасное значение; результат относится непосредственно к «light-dark()».
- Сопоставить DOM-порядок с визуальным порядком после раскладки при разборе «light-dark()».
- Проверьте «light-dark()» на странице при увеличении текста до 200% через перестроение при смене writing-mode и запишите наблюдаемое изменение.
Критерий выбора «light-dark()» — предсказуемая работа в заявленном контексте. Для «light-dark()» подтвердите её через перестроение при смене writing-mode и соблюдите ограничение: не добавляйте новую обёртку до объяснения её роли.
Практика с light-dark()
Проверьте «light-dark()» в минимальном компоненте с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «light-dark()»: проверяйте единицы, диапазоны аргументов и запасное значение.
Сценарий: на странице при увеличении текста до 200%.
Ошибки при работе с light-dark()
Доступность
Результат light-dark() должен соответствовать типу значения свойства, где используется функция — это предметный риск для «light-dark()».
Каскад
Отсутствие запасного поведения при неподдерживаемой возможности при использовании «light-dark()».
Поддержка
Отсутствие запасного поведения при неподдерживаемой возможности; для «light-dark()» проверьте это отдельно.
Поддержка light-dark()
Для «light-dark()» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «light-dark()»; окончательное решение принимайте по аудитории конкретного проекта.
Вопросы о light-dark()
Как понять, что «light-dark()» выбрано правильно?
«light-dark()» выбрано правильно, когда оно решает задачу «вычислить значение из аргументов внутри CSS-декларации», сохраняет результат на странице при увеличении текста до 200% и проходит предметную проверку: проверяйте единицы, диапазоны аргументов и запасное значение.
Нужен ли запасной вариант для «light-dark()»?
Запасной вариант для «light-dark()» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «light-dark()» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.