Каков пример использования <url-modifier> в функции url() CSS?

3.4. Локаторы ресурсов: тип <url> описывает <url-modifier> в

A URL является указателем на ресурс и является функциональной нотацией обозначается <url>. Синтаксисом <url> является:

<url> = url( <string> <url-modifier>* )

В дополнение к синтаксису, определенному выше, иногда может быть написанное другими способами:

  • По старым причинам, <url> может быть записано без кавычек вокруг самого URL. Этот синтаксис специально анализируется и вместо синтаксически выполняет функцию <url-token>, а не функцию. [CSS3SYN]

  • Некоторые CSS-контексты, такие как @import, позволяют <url> быть представлены <string>. Это ведет себя одинаково записывая функцию url(), содержащую эту строку. Потому что эти альтернативные способы записи <url> - это не функциональные обозначения, они не может принять никаких <url-modifier> s.

Примечание. Специальные правила синтаксического анализа для устаревших котировок Синтаксис <url> означает, что круглые скобки, пробельные символы, одиночные цитаты (') и двойные кавычки ( "), отображаемые в URL-адресе, должны быть экранированы с обратной косой чертой, например. url(open\(parens), url(close\)parens). В зависимости от типа URL может также быть возможно записать эти символы в виде URL-экранов (например, url(open%28parens) или url(close%29parens)), как описано в [URL]. (Если написано как нормальная функция, содержащая строку, обычные правила экранирования строки подать выражение; только символы новой строки и символ, используемый для указания строки чтобы сбежать.)

в

3.4.2. Модификаторы URL

Функция url() поддерживает указание дополнительных <url-modifier> s, которые каким-то образом меняют смысл или интерпретацию URL. <url-modifier> является либо <ident>, либо function.

В этой спецификации не определены никакие <url-modifier> s, но другие спецификации могут сделать это.

См. также Значения CSS и единицы измерения Уровень 3 Редакторы проекта, 21 марта 2016 года

  • Каковы примеры использования <ident> и function в url()?

  • Каковы различия между <string>, <ident>, function at url()?

Ответы

Ответ 1

A <url-modifier> является либо <ident>, либо function.

<ident> является идентификатором.

Часть источника CSS, которая имеет тот же синтаксис, что и <ident-token>.

<ident-token> Синтаксис;

Я не мог найти примеров <ident>, используемых в функции url, но как указано в это письмо, возможны некоторые возможные использования в будущем.

  • Выбор параметров для управления CORS/cookies/etc
  • работа с целостностью Subresource

Глядя на синтаксис <ident>, вы не можете использовать пару ключ/значение, поэтому я предполагаю большая часть этого будет реализована с использованием function, который еще не существует., подсказка ресурса может быть реализована с помощью <ident>.

.foo { background-image: url("//aa.com/img.svg" prefetch); }

Однако я нашел "Сборник интересных идей" с function <url-modifier>.

Параметры SVG (не официальная спецификация)

params() function - это <url-modifier>

.foo { background-image: url("//aa.com/img.svg" param(--color var(--primary-color))); }