Url() - Fonction CSS

url()

Résumé des caractéristiques de la fonction `url()`

Description rapide

Spécifie l'adresse d'un élément tel qu'une image par exemple.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

🡇

🡅

CSS Values and Units Module Level 4

Statut du document: WD (document de travail)

CSS Values and Units Module Level 3

Statut du document: CR (document candidat à la recommandation)

Description de la fonction `url()`.

La fonction url() permet de spécifier l'adresse d'une ressource externe, telle qu'une image, un son, une police de caractères, etc.

Fragments d'image.

Lorsque le fichier désigné par url() est une image, la syntaxe prévoit qu'il soit possible de ne récupérer qu'une partie de cette image. Attention ! Peu de navigateurs prennent en charge la fonctionnalité de traiter un fragment d'image.

La fonction url() peut être utilisée avec :

@font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
@import : Importation d'une feuille de styles.
background-image : Image d'arrière-plan.
border-image-source : Définit l'image utilisée pour construire la bordure.
content : Ajoute du contenu dans le document.
cursor : Définit la forme du curseur de la souris.
list-style-image : Définit une image à utiliser à la place des puces.
mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
src : Définit la source d'un fichier de police de caractères à télécharger.

Syntaxe de la fonction `url()`.

<propriété>: url('chemin/fichier');

u est l'adresse d'une ressource externe. Si cette dernière comporte des espaces, des parenthèses, des guillemets ou des apostrophes, il sera nécessaire d'échapper ces caractères avec un antislash (\) ou d'insérer l'adresse entre des apostrophes ou des guillemets.

Voici des syntaxes valides :

`url(img/logo.png)`	Pas de caractères interdits dans l'adresse.
`url(img/petit\ logo.png)`	Espace échappé avec antislash `\`.
`url('img/petit logo.png')`	Adresse spécifiée entre apostrophes.
`url("img/petit logo.png")`	Adresse spécifiée entre guillemets.

A cause du fait que les caractères de délimitation (guillemets ou apostrophes) ne sont pas obligatoires, il n'est pas possible d'utiliser les fonctions calc() ou var() avec la fonction url().

L'adresse u peut être relative ou absolue :

`url(img/logo.png)`	Une adresse relative, évaluée par rapport à l'emplacement de la feuille de styles ⁽¹⁾.
`url(http://domaine/img/logo.png)`	Une adresse absolue pouvant désigner une ressource disponible éventuellement sur un autre domaine.
`url(/img/logo.png)`	Une adresse absolue par rapport à la racine du site courant.

(1) Si le style est inscrit directement dans le document (HTML), c'est l'adresse de ce document qui sert de base pour déterminer l'adresse absolue.

<propriété>: url('chemin/fichier.png#xywh=100,100,300,200'); ⚠ x y l h

Lorsque la fonction url() est utilisée pour désigner une image, il est possible de ne récupérer qu'une partie seulement de cette image.

La paramètre xywh (abréviation pour x, y, width, height) est traité comme un signet désignant une partie de l'image. Quatre nombres sont à indiquer, séparés par des virgules. Ces nombres correspondent par défaut à des pixels.

Attention à l'absence d'unités, et au signe égal, inhabituels en CSS.
1. x et y sont les coordonnées du point en haut à gauche de la zone à traiter.
2. w et h sont respectivement la largeur et la hauteur de la zone à traiter.
<propriété>: url('chemin/fichier' m);

Le paramètre m est présenté comme un "url-modifer" mais curieusement aucune définition plus précise n'existe dans la norme.

Si un paramètre url-modifier est spécifié, l'adresse doit obligatoirement être entourée d'apostrophes ou de guillemets.

Exemples d'utilisation de `url()`.

Adresse relative.

L'image d'arrière-plan est enregistrée sur le même site. L'adresse relative se résout par rapport à l'emplacement du fichier où se trouve écrite le style. Ici il s'agit de la page HTML actuelle, mais dans la plupart des cas ce sera une feuille de styles séparée.

Adresse absolue vers un autre domaine.

Dans cet exemple l'image d'arrière-plan peut être enregistrée sur un autre site (ici le site du W3C).

Adresse absolue sur le même domaine.

Il suffit de commencer l'adresse par le caractère slash (/) qui indique la racine du site. Ici url() est utilisée pour spécifier l'image de bordure.

Prise en charge par les navigateurs (compatibilité).

La fonction url() est très bien reconnue par tous les navigateurs. Elle peut être utilisée dans de nombreux cas de figure : définition d'un curseur, d'une puce, d'une police de caractères, etc. Reportez-vous à la propriété correspondante pour savoir si une fonctionnalité est prise en charge. Le tableau ci-dessous ne reprend que les deux propriétés avec lesquelles des problèmes de compatibilité ont longtemps subsisté.

Colonne 1

Utilisation de la fonction url() avec la propriété content.

Colonne 2

Utilisation de la fonction url() avec la propriété cursor.

Fonction url()
avec content

Fonction url()
avec cursor

Estimation de la prise en charge globale.

97%

95%