4eb0da Обо мне

CSS URL Modifiers — что это вообще за зверь?

02.01.2026 • css

Вступление

С выходом Safari 26.2 пару недель назад появились и заметки о выпуске в блоге WebKit. Один из интересных пунктов звучит так:

Safari 26.2 adds support for cross-origin() and referrer-policy() CSS URL modifiers.

В этом месте появилось недоумение — что это вообще такое, откуда взялось, где работает? На момент написания нет ни страницы на MDN, ни на caniuse. Мне также не удалось найти ни одного примера в интернете (или я плохо старался). Но при этом эта возможность зарелижена в стабильном браузере без всяких флагов.

Давайте разбираться.

Немного спецификации

CSS URL Modifiers были в спеке ещё 10 лет назад, но тогда не было ни одного примера модификатора, и в браузерах тоже ничего реализовано не было. Выглядело это так:

<url> = <url()> | <src()>
 
<url()> = url( <string> <url-modifier>* ) | <url-token>
<src()> = src( <string> <url-modifier>* )

src() нигде не реализована и является, по сути, некоторым аналогом url() (насколько мне известно).

В спеке CSS Values and Units Module Level 5 появились виды модификаторов, всего их 3:

  • cross-origin. Позволяет задавать режим CORS для ресурса
  • integrity. Позволяет задать один или несколько хешей для запроса. После загрузки браузер проверит, что хеш от скачанного ресурса равен одному из переданных хешей
  • referrer-policy. В каком виде передавать заголовок Referer для запроса

С релизом 26.2 Сафари начал поддерживать cross-origin() и referrer-policy(), а integrity() за отдельным флагом и выключена на данный момент.

На практике

Использовать модификаторы можно так:

background-image: url('image.png' cross-origin(use-credentials) referrer-policy(origin));

Пара важных нюансов:

  1. Нужно обязательно указывать путь до картинки в кавычках, без кавычек не распарсится.
  2. Значения новых модификаторов нужно указывать без кавычек.
  3. Все модификаторы необязательные и их можно указывать больше одного.

Значения для cross-origin:

anonymous | use-credentials

Для referrer-policy:

no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url

Итого

Ждём поддержку в остальных браузерах, нормальные доки, и, кто знает, новые модификаторы? CSS пополняется поддержкой возможностей из HTML/JS, и лично мне не хватает loading=lazy. Но такое скорее сделают через новое свойство, чем через модификатор урла. А чего вам не хватает в современном CSS? Поделитесь)

Обсудить в Telegram