Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CR (document proposé pour 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 (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) l'adresse du document sert de base pour déterminer l'adresse relative.

  • <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.
1
url()
content
2
url()
cursor
Estimation de la prise en charge en pourcentage du parc actuel.
97%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que url().

Les spécifications CSS éditées par le W3C sont organisées en modules. url() fait partie du Module CSS - Valeurs et unités (CSS Values and Units Module). Les définitions suivantes sont également décrites dans ce même module.

Fonctions.

Calcule la valeur absolue d'un nombre.
Calcule l'angle dont le cosinus vaut la valeur indiquée.
Calcule l'angle dont le sinus vaut la valeur indiquée.
Calcule l'angle dont la tangente vaut la valeur indiquée.
Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.
Renvoie la valeur d'un attribut.
Calcule une valeur pour une propriété.
Calcule une valeur entre deux valeurs extrêmes.
Calcul le cosinus d'un angle.
Calcule l'exponentielle d'un nombre.
Calcule la racine carrée d'une somme de carrés de nombres.
Calcule le logarithme d'un nombre.
Détermine la valeur la plus petite parmi une série de valeurs.
Détermine la valeur la plus grande parmi une série de valeurs.
Calcule le reste de la division entière entre deux nombres.
Calcule une mise à l'exposant
Calcule le reste de la division entière de deux nombres.
Calcule l'arrondi d'un nombre.
Calcule le signe d'un nombre.
Calcule le sinus d'un angle.
Calcule la racine carrée d'un nombre.
Calcule la tangente d'un angle.