Making url CSS() Par rapport au document

Question

En matière de CSS la règle suivante applique:

Partial URLs are interpreted relative to the source of the style sheet, 
not relative to the document. 

Mais voici mon problème:

J'ai différents sites Web qui utilisent le même fichier CSS. Bien qu'ils utilisent la même mise en page, les images réelles que les références CSS sont différentes pour chacun d'eux.

Exemple:

#header { 
width: 960px; 
height: 200px; 
background: url(/images/header.png); 
} 

Chaque domaine a ses propres "images" du dossier et son propre "header.png" que je voudrais que le CSS à la référence. Actuellement, il se comporte comme il est supposé et essaie de trouver le fichier png sur le domaine où le CSS est hébergé. Ce que je veux, c'est obtenir le fichier png du domaine où le fichier CSS a été appelé.

J'utilise "link" pour les feuilles de style parce que "@import" rompt le rendu progressif dans IE.

Une suggestion ou des solutions de contournement?

Answer 1

Ce que je veux, c'est pour obtenir le fichier png du domaine où le fichier CSS a été appelé.

Vous devez avoir des URL distinctes pour chaque domaine référencé. Donc, www.example1.com référence sa feuille de style comme /style/sheet.css et l'attrape donc de http://www.example1.com/style/sheet.css tandis que www.example2.com l'obtient de http://www.example2.com/style/sheet.css.

Toutefois, ce n'est pas parce qu'ils sont différents du client qu'ils doivent être différents du côté serveur (avec toute la maintenance que cela implique). Vous pouvez simplement pointer un Alias sur chaque domaine vers le vrai fichier CSS partagé. La seule autre solution envisageable serait de séparer les règles de référencement d'URL telles que background-image et de les placer dans une feuille de style spécifique au domaine ou dans une feuille de style interne.

Answer 2

La seule solution que je peux penser est d'utiliser une feuille de style supplémentaire pour tous les domaines qui spécifient les domaines images spécifiques:

/* domain specific images */ 
#header { 
    background-image: url(/images/header.png); 
} 

Answer 3

Est-il possible que je pourrais injecter le domaine avec php dans la feuille de style tout en utilisant "lien" ?

pour exemple:

#header { 
background: url('.$domain.'/images/header.png); 
} 

Je ne sais pas comment cela pourrait fonctionner, mais peut-être quelqu'un d'autre peut prendre la balle et rouler avec elle! Est-ce que l'utilisation d'un truc comme ça brise le rendu progressif dans IE?

Answer 4

option la plus rapide est chaque site a sa propre css pour faire référence à des images par rapport à la css

#header { 
    background: url(images/header.png); 
} 

Pour résoudre le problème de la mise à jour une fois que vous avez effectué une mise à jour, vous pouvez avoir une configuration de fichier batch pour copier vos modifications vers les emplacements de sous-sites nécessaires

Answer 5

Vous pouvez dupliquer votre fichier CSS sur chaque site Web à l'aide d'un script côté serveur.

example1.com/global.css est votre fichier CSS

example2.com/global.css.php est un script PHP qui retourne effectivement le fichier global.css de example1.com

Le script peut être aussi simple que

<?php 
readfile('http://example1.com/global.css'); 
?> 

Mais vous auriez besoin de plus de code si vous voulez mieux gérer la mise en cache.

Answer 6

Pour autant que je sais qu'il ya une différence entre

#header { 
background: url('/images/header.png'); 
} 

et

#header { 
background: url('../images/header.png'); 
} 

Le premier est relatif à la racine de votre site, et le second est relatif au répertoire parent (par rapport à l'emplacement de votre fichier css).

EDIT:

Si les deux sites sont servis de la même hôte, pourriez-vous utiliser des liens symboliques vos feuilles de style?