Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

<url>

Le type de donnée CSS <url> représente un pointeur vers une ressource. Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle url().

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.

De nombreuses propriétés CSS utilisent une URL comme valeur, on peut entre autres citer :

La notation fonctionnelle url()

L'URL peut être indiquée telle quelle ou encadrée 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).

Syntaxe

 <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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (3.5) (Oui) (Oui) 1.0

Étiquettes et contributeurs liés au document

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