web-dev-qa-db-fra.com

En utilisant une URL relative dans un fichier CSS, quel est son emplacement?

Lorsque vous définissez quelque chose comme une URL d'image d'arrière-plan dans un fichier CSS, lorsque vous utilisez une URL relative, où est-il relatif? 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 par rapport au document feuille de style in /stylesheets/ ou par rapport au document actuel il est inclus? Chemins possibles comme: 

/item/details.html
/about/index.html
/about/extra/other.html
/index.html
htmlcss
456
anonymous coward

Selon 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, en réponse à votre question, ce sera relatif à /stylesheets/.

Si vous y réfléchissez, cela a du sens, étant donné que le fichier CSS peut être ajouté à des pages de répertoires différents. Par conséquent, sa normalisation sur le fichier CSS signifie que les URL fonctionneront là où les feuilles de style sont liées.

526
Alex Rozanski

C'est relatif au fichier CSS.

63
M4N

C'est relatif à la feuille de style, mais je vous conseillerais de créer les URL relatives à votre URL:

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

De cette façon, vous pouvez déplacer vos fichiers sans avoir besoin de les refactoriser à l'avenir.

45
Codebeef

Pour créer des feuilles de style modulaires ne dépendant pas de l'emplacement absolu d'une ressource, les auteurs peuvent utiliser des URI relatifs. Les URI relatifs (définis dans [RFC3986] ) sont résolus en URI complets à l'aide d'un URI de base. La RFC 3986, section 5, 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") }

est situé dans une feuille de style désignée par l'URI:

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

L'arrière-plan du corps du document source sera en mosaïque, quelle que soit l'image décrite par la ressource désignée par l'URI. 

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

Les agents utilisateurs peuvent différer dans leur traitement des URI non valides ou des URI désignant des ressources indisponibles ou inapplicables.

Tiré de la spécification CSS 2.1 .

29
jrista

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

(Tout le reste serait brisé, IMNSHO)

15
Quentin

Un problème qui peut survenir et qui semble enrayé est l’utilisation de la minimisation automatique des CSS. Le chemin de demande pour le paquet minifié peut avoir un chemin différent de celui du fichier css d'origine. Cela peut se produire automatiquement, ce qui peut créer de la confusion.

Le chemin de requête mappé pour le lot minifié doit être "/ originalcssfolder/minifiedbundlename" et pas seulement "minifiedbundlename".

En d'autres termes, attribuez à vos ensembles le même chemin (avec le /) que la structure de dossiers d'origine. Ainsi, toutes les ressources externes telles que les polices et les images seront mappées pour corriger les URI par le navigateur. L'alternative consiste à utiliser des URL absolues (références dans votre css), mais cela n'est généralement pas souhaitable.

5
mms

Cela a fonctionné pour moi. en ajoutant deux points et une barre oblique.

body{
    background: url(../images/yourimage.png);
}
0
Jakob Sternberg