Type CSS <url>

Syntaxe

<url> = url()

Valeurs

La valeur peut être une URL absolue ou relative.

url()

La fonction url() accepte une URL, qui peut être écrite sous forme de chaîne de caractères entre guillemets ou sous forme de jeton URL sans guillemets.

Description

Le type de données <url>, écrit avec la fonction url(), représente une URL, qui est un pointeur vers une ressource interne ou externe. La ressource peut être une image, une vidéo, un fichier CSS, un fichier de police, une fonctionnalité SVG, etc. L'URL peut être absolue ou relative.

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

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

/* URL de données */
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...")

Ressources externes et CORS

La capacité d'importer des ressources externes avec la valeur <url> est définie par l'implémentation et souvent restreinte pour des raisons de sécurité.

Selon la propriété CSS sur laquelle une <url> faisant référence à des ressources externes est appliquée, la ressource peut être soumise à des restrictions de Partage de ressources entre origines (CORS).

Certaines propriétés CSS, y compris mask-image, filter, ainsi que clip-path et quelques autres lorsqu'elles font référence à des éléments d'image <svg>, peuvent nécessiter une validation CORS réussie lorsqu'elles provoquent la récupération de ressources externes et inter-origines en mode CORS. Si la validation CORS échoue, la ressource peut être bloquée et donc non utilisée pour le rendu.

Notez que le type de valeur <url> n'impose pas lui-même la validation CORS, mais les propriétés CSS individuelles le font.

Lors de l'ouverture d'un fichier HTML directement avec file://, les ressources peuvent échouer car les règles CORS s'appliquent localement. Les navigateurs modernes traitent file:// comme une origine unique, ce qui signifie que les ressources croisées peuvent être bloquées. Dans ce cas, un serveur HTTP peut être hébergé pour éviter les erreurs CORS. Le comportement de sécurité des URL file:// varie également en fonction du navigateur et des permissions de fichiers du système d'exploitation.

Exemples

URL relative

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

URL absolue

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

Spécifications

Voir aussi

• La fonction url()