CSS color — синтаксис и примеры
CSS-свойство color: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Когда применять
«color» рассматривается не как изолированный синтаксис, а как часть области «цвет и отрисовка». Задаёт цвет текста и значение currentColor для связанных свойств. Практический контекст для «color» — на странице при увеличении текста до 200%; во время проверки измеряйте компонент, а не только весь viewport.
Проверяя «color», соблюдайте правило: проверяйте color вместе с родительским контекстом и соседними правилами. Для «color» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис color
Минимальная запись «color» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
color: #2563eb;
}Как работает color
Чтобы объяснить работу «color», проследите путь от структуры и входного значения до отображения или поведения. Задаёт цвет текста и значение currentColor для связанных свойств. Контрольная точка для «color» — состояние при пустом содержимом.
Проверка в проекте
- Измерьте контраст во всех состояниях и обеих цветовых схемах; результат относится непосредственно к «color».
- Проверить вычисленное значение в DevTools и источник победившего правила при разборе «color».
- Проверьте «color» на странице при увеличении текста до 200% через момент загрузки ресурса в Network и запишите наблюдаемое изменение.
Выбор «color» оправдан, если задача относится к области «цвет и отрисовка», а риск «цвет без достаточного контраста делает текст и фокус плохо различимыми» исключён проверкой. Для «color» сравнивайте не внешний вид, а результат для пользователя.
Практика с color
Создайте два варианта «color» в рабочем фрагменте интерфейса: корректный и с одной типичной ошибкой. Сравните варианты «color» через момент загрузки ресурса в Network и объясните различие.
Сценарий: на странице при увеличении текста до 200%.
Ошибки при работе с color
Поддержка
Цвет без достаточного контраста делает текст и фокус плохо различимыми — это предметный риск для «color».
Контекст
Использование !important вместо разбора каскада при использовании «color».
Устойчивость
Загрузка тяжёлого ресурса до того, как он нужен пользователю; для «color» проверьте это отдельно.
Поддержка color
Для «color» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «color»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2.
Вопросы о color
Как понять, что «color» выбрано правильно?
«color» выбрано правильно, когда оно решает задачу «определять визуальный слой элемента без изменения смысловой структуры документа», сохраняет результат на странице при увеличении текста до 200% и проходит предметную проверку: измерьте контраст во всех состояниях и обеих цветовых схемах.
Нужен ли запасной вариант для «color»?
Запасной вариант для «color» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «color» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.