Le type de donnée CSS <url> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle url(). Il est utilisé avec de nombreuses propriétés telles que background-image, cursor, list-style, etc.

Note : URI ou URL ?

Une URI est différente d'une URL. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une URN d'une ressource.

Pour la spécification CSS de niveau 1, la notation fonctionnelle url() a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <url> bien qu'il n'était pas défini explicitement).

Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car  url() était utilisée pour créer une valeur de type <uri>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.

Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle url() représente donc une valeur de type <url> et plus une valeur de type <uri>.

Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.

Syntaxe

L'URL peut être indiquée telle quelle comme argument de la fonction url()et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).

 <propriété_css>:  url("http://monsite.exemple.com/curseur.png")
 <propriété_css>: url("http://monsite.exemple.com/curseur.png")
 <propriété_css>:  url(http://monsite.exemple.com/curseur.png)

Note : Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir bug 752230 pour plus d'informations.

Exemples

CSS

ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
}

HTML

<ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
</ul>

Résultat

Spécifications

Spécification État Commentaires
CSS Values and Units Module Level 3
La définition de '<url>' dans cette spécification.
Candidat au statut de recommandation Aucune modification significative.
CSS Level 2 (Revision 1)
La définition de '<uri>' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 1
La définition de '<url>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui133.51
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple1 Oui Oui4 Oui1 Oui

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, teoli, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,