Тип CSS `<url>`

<url> — это CSS тип данных, представляющий собой указатель на ресурс.

Синтаксис

<url> = url()

Значения

Значение может быть абсолютным или относительным URL.

<url()>

Функция url() принимает URL, который может быть записан в виде строки в кавычках или токена URL без кавычек.

Описание

Тип данных <url>, записываемый с помощью функции url(), представляет собой URL — указатель на внутренний или внешний ресурс. Ресурсом может быть изображение, видео, файл CSS, файл шрифта, элемент SVG и т. д. URL может быть абсолютным или относительным.

/* Relative URL */
url("styles.css")
url("assets/icon.svg")
url("../assets/image.png")

/* Absolute URL */
url("http://example.com/fonts/myFont.woff2")
url("https://example.com/images/background.jpg")

/* Data URL */
url("data:image/svg+xml,%3Csvg'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3C/svg%3E")
url("data:image/png;base64,iVBORw0KGgoAAA...")

Внешние ресурсы и CORS

Возможность импорта внешних ресурсов с помощью значения <url> зависит от реализации и часто ограничивается по соображениям безопасности.

В зависимости от CSS-свойства, к которому применяется <url>, ссылающееся на внешние ресурсы, на ресурс могут распространяться ограничения междоменного обмена ресурсами (CORS).

Для некоторых CSS-свойств, в том числе mask-image, filter, а также clip-path и некоторых других, при обращении к элементам изображения <svg> может потребоваться успешная проверка CORS, если они вызывают загрузку внешних ресурсов из другого источника в режиме CORS. Если проверка CORS завершается неудачно, ресурс может быть заблокирован и, следовательно, не использоваться при отображении.

Обратите внимание, что тип значения <url> сам по себе не требует проверки CORS, но её требуют отдельные CSS-свойства.

При прямом открытии HTML-файла с помощью file:// загрузка ресурсов может завершиться неудачно из-за применения правил CORS к локальным файлам. Современные браузеры считают file:// уникальным источником, поэтому ресурсы из других файлов могут быть заблокированы. В этом случае можно запустить HTTP-сервер, чтобы избежать ошибок CORS. Поведение безопасности URL file:// также различается в зависимости от браузера и прав доступа к файлам в операционной системе.

Примеры

Относительный URL

body {
  background-image: url("images/background.jpg");
}

Абсолютный URL

body {
  background-image: url("https://example.com/images/background.jpg");
}

Спецификации

См. также

• url()