Utilisation d'une URL relative dans un fichier CSS, à quel emplacement est-elle relative ?

Question

Lors de la définition d'une image d'arrière-plan dans un fichier CSS, l'utilisation d'une URL relative permet de savoir à quoi elle se réfère. Par exemple :

Supposons que le fichier /stylesheets/base-styles.css contient :

div#header { 
    background-image: url('images/header-background.jpg');
}

Si j'inclus cette feuille de style dans différents documents via <link ... /> l'URL relative dans le fichier CSS sera-t-elle par rapport au document de la feuille de style en /stylesheets/ o par rapport au document actuel il est inclus dans ? Les chemins possibles sont les suivants :

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

Answer 1

Selon le W3 :

Les URL partielles sont interprétées par rapport à la source de la feuille de style, et non par rapport au document.

Par conséquent, pour répondre à votre question, il sera relatif à /stylesheets/ .

Si l'on y réfléchit bien, c'est logique, puisque le fichier CSS peut être ajouté à des pages situées dans différents répertoires. Le fait de le standardiser au fichier CSS signifie que les URL fonctionneront quel que soit l'endroit où les feuilles de style sont liées.

Answer 2

Il est relatif au fichier CSS.

Answer 3

Elle est relative à la feuille de style, mais je vous recommande de faire en sorte que les URL soient relatives à votre URL :

div#header { 
  background-image: url(/images/header-background.jpg);
}

De cette manière, vous pouvez déplacer vos fichiers sans avoir à les remanier à l'avenir.

Answer 4

Afin de créer des feuilles de style modulaires qui ne dépendent pas de l'emplacement absolu d'une ressource, les auteurs peuvent utiliser des URI relatifs. Les URI relatifs (tels que définis dans [RFC3986] ) sont résolus en URI complets à l'aide d'un URI de base. La section 5 du RFC 3986 définit l'algorithme normatif pour ce processus. Pour les feuilles de style CSS, l'URI de base est celui de la feuille de style et non celui du document source.

Par exemple, supposons la règle suivante :

body { background: url("yellow") }

se trouve dans une feuille de style désignée par l'URI :

http://www.example.org/style/basic.css

L'arrière-plan du BODY du document source sera recouvert de l'image décrite par la ressource désignée par l'URI.

http://www.example.org/style/yellow

Les agents utilisateurs peuvent traiter différemment les URI non valides ou les URI désignant des ressources indisponibles ou inapplicables.

Tiré de la CSS 2.1 spec .

Answer 5

Pour les feuilles de style CSS, l'URI de base est celui de la feuille de style et non celui du document source.

(Toute autre solution serait une rupture, IMNSHO)