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