Тип данных CSS <url> обозначает указатели на ресурсы, такие как изображения или шрифты. URL-адреса могут быть использованы в многочисленных свойствах CSS, таких как background-image, cursor или list-style.

URI или URL? Существует разница между URI и URL. URI просто идентифицирует ресурс. URL является типом URI, и описывает месторасположение ресурса.URI может быть либо URL-адресом, либо именем ресурса (URN).

В CSS Уровень 1, фунциональная нотация url()описывала только истинные URL-адреса. В CSS Уровень 2, определение url() было расширено для описания любого URI, будь то URL или URN. Неожиданно, что  url() может быть использовано для создания типа данных CSS <uri>. Это изменение было не только неожиданным, но и ненужным, так как URN почти не используется в реальном CSS. Для избежания путанницы, CSS Уровень 3 вернулся к более узкому, первоначальному определению. Сейчас url() означает только истинное значение <url>.

Синтаксис

Тип данных <url> является указанием к использованию функциональной нотации url(). Он  может быть задан без кавычек или с использованием одинарных или двойных кавычек. Допускаются относительные URL-адреса, относящиеся к URL-адресу страницы стилей (а не к URL-адресу веб-страницы).

<a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url('http://mysite.example.com/mycursor.png')
<a_css_property>: url(http://mysite.example.com/mycursor.png)

Примечание: Контрольные символы выше 0x7e не допустимы в URL-адресах без кавычек, начиная с Firefox 15. Смотри баг 752230 для более детальной информации.

Примеры

.topbanner {
  background: url("topbanner.png") #00D no-repeat fixed;
}
ul {
  list-style: square url(http://www.example.com/redball.png);
}

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

Спецификация Статус Комментарий
CSS Values and Units Module Level 4
Определение '<url>' в этой спецификации.
Редакторский черновик  
CSS Values and Units Module Level 3
Определение '<url>' в этой спецификации.
Кандидат в рекомендации Нет значительных изменений по сравнению с CSS Уровень 2 (Revision 1).
CSS Level 2 (Revision 1)
Определение '<uri>' в этой спецификации.
Рекомендация Нет значительных изменений по сравнению с CSS Уровень 1.
CSS Level 1
Определение '<url>' в этой спецификации.
Рекомендация первое определение.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<url>Chrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva, AliaksandrZahorski
Обновлялась последний раз: opereverzeva,