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