1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: <url>
slug: Web/CSS/url
tags:
- CSS
- Reference
- Type
translation_of: Web/CSS/url()
translation_of_original: Web/CSS/url
---
<div>{{CSSRef}}</div>
<p>Le type de donnée CSS <strong><code><url></code></strong> 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 <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p>
<div class="note"><strong>Note : URI ou URL ?</strong><br>
<br>
Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. 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 <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br>
<br>
Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code><url></code> bien qu'il n'était pas défini explicitement).<br>
<br>
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 <code>url()</code> était utilisée pour créer une valeur de type <code><uri></code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br>
<br>
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 <code>url()</code> représente donc une valeur de type <code><url></code> et plus une valeur de type <code><uri></code>.<br>
<br>
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.</div>
<h2 id="Syntaxe">Syntaxe</h2>
<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>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).</p>
<pre class="syntaxbox"> <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)
</pre>
<div class="note">
<p><strong>Note :</strong> 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.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">ul {
list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>Aucune modification significative.</td>
</tr>
<tr>
<td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Aucune modification significative.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#url', '<url>')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.types.url")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("url()", "url()")}}</li>
<li>{{cssxref("<gradient>")}}</li>
<li>{{cssxref("element()")}}</li>
<li>{{cssxref("_image","image()")}}</li>
<li>{{cssxref("image-set","image-set()")}}</li>
<li>{{cssxref("cross-fade")}}</li>
</ul>
|
