Url() et src(), fonctions CSS.

url()
src()

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

Description rapide
Spécifie l'adresse d'une ressource telle qu'une image par exemple.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Valeurs et unités
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Description des fonctions url() et src().

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. L'adresse peut être indiquée entre guillemets, entre apostrophes, ou sans rien du tout.

Exemple. Les trois syntaxe ci-dessous sont équivalentes :

background-image:url("chemin/bg-paysage.jpg"); background-image:url('chemin/bg-paysage.jpg'); background-image:url(chemin/bg-paysage.jpg);

La fonction src() a exactement le même rôle, mais l'adresse de la ressource doit obligatoirement être incluse entre guillemets ou apostrophes. Ceci permet d'utiliser des fonctions à la place de l'adresse. Mais la fonction src() est encore mal reconnue par les navigateurs actuels (2024).

--bkg:'chemin/bkg-paysage.jpg'; Ne fonctionne pas avec url() : background-image:url(var(--bkg)); Fonctionne avec src() : background-image:src(var(--bkg));

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 valeur url() peut être utilisée avec les propriétés suivantes :

  • @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 : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
  • border-image-source : Définit l'image utilisée pour construire la bordure.
  • content : Ajoute du contenu dans le document, principalement avec les sélecteurs ::before et ::after.
  • cursor : Définit la forme du curseur de la souris.
  • list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
  • 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, ou d'une image à afficher.

Syntaxe des fonctions url() et src().

  • <propriété>: url('chemin/fichier'); <propriété>: src('chemin/fichier'); ⚠ u

    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.

    Exemples :

    url(img/logo.png)Pas de caractères interdits dans l'adresse.
    url(img/petit logo.png)Caractère espace interdit.
    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().

    La fonction src() exige que l'adresse u soit indiquée entre guillemets ou apostrophes. Ce qui permet d'indiquer une expression de calcul à la place de l'adresse.

    src(img/logo.png)Invalide.
    src("img/logo.png")Correct.
    src('img/logo.png')Correct.
    src(var(--adr))Correct.

    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 (1).
    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 la fonction 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.

Support de la fonction url().

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é.

Par contre, la fonction src() est très mal prise en charge même par les navigateurs, même modernes (2024).

Colonne 1
Support par les navigateurs de la fonction url() qui donne l'accès à une ressource externe (image, son, police de caractères, etc.).
Colonne 2
Support par les navigateurs de la fonction url() dans le contexte de la propriété cursor, pour désigner une image à utiliser comme curseur.
1
Fonction url()
avec content
2
Fonction url()
avec cursor
Estimation de la prise en charge globale.
96%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction url().

Voir aussi : autres fonctions de calcul.

Les fonctions suivantes sont également décrites dans la même spécification du W3C, dénommée CSS Values and Units Module.

Fonctions :

abs()
Calcule la valeur absolue d'un nombre.
acos()
Calcule l'angle dont le cosinus vaut la valeur indiquée.
asin()
Calcule l'angle dont le sinus vaut la valeur indiquée.
atan()
Calcule l'angle dont la tangente vaut la valeur indiquée.
atan2()
Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.
attr()
Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.
calc()
Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.
clamp()
Calcule une valeur entre deux valeurs extrêmes.
cos()
Calcul le cosinus d'un angle.
exp()
Calcule l'exponentielle d'un nombre.
hypot()
Calcule la racine carrée d'une somme de carrés de nombres.
log()
Calcule le logarithme d'un nombre.
max()
Détermine la valeur la plus grande parmi une série de valeurs.
min()
Détermine la valeur la plus petite parmi une série de valeurs.
mod()
Calcule le reste de la division entière entre deux nombres.
pow()
Calcule une mise à l'exposant.
rem()
Calcule le reste de la division entière de deux nombres.
round()
Calcule l'arrondi d'un nombre.
sign()
Détermine le signe d'un nombre.
sin()
Calcule le sinus d'un angle.
sqrt()
Calcule la racine carrée d'un nombre.
⚠
src()
Spécifie l'adresse d'une ressource telle qu'une image par exemple. Synonyme de la fonction url().
tan()
Calcule la tangente d'un angle.

Valeurs:

e
Valeur prédéfinie du nombre e (base des logarithmes naturels), soit environ 2,7182818284590452354.
infinity
Valeur d'erreur indiquant que le résultat d'un calcul est une valeur infinie.
⚠
NaN
Valeur d'erreur indiquant qu'un calcul n'a pas pu être effectué à cause d'une paramètre non numérique.
pi
Valeur prédéfinie du nombre pi (environ 3,1415926535897932).