Создание CSS url () относительно документа

Question

Когда дело касается CSS, применяется следующее правило:

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

Но вот моя проблема:

У меня есть разные сайты, которые используют один и тот же файл CSS. Несмотря на то, что они используют один и тот же макет, фактические изображения, ссылки на которые для CSS отличаются, для каждого из них.

Exemple:

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

Каждый домен имеет свою собственную папку «images» и свой собственный «header.png», на который я хотел бы сослаться в CSS. В настоящее время он ведет себя так, как должен, и пытается найти файл png в домене, где размещен CSS. Я хочу, чтобы он получил png-файл из домена, где был назван CSS-файл.

Я использую «ссылку» для таблиц стилей, потому что «@import» нарушает прогрессивный рендеринг в IE.

Есть предложения или обходные пути?

Answer 1

Я хочу, чтобы он получил png-файл из домена, где был назван CSS-файл.

Вам нужно будет иметь отдельные URL для каждого домена, на который есть ссылки. Поэтому www.example1.com ссылается на свою таблицу стилей как /style/sheet.css и, таким образом, получает ее из http://www.example1.com/style/sheet.css, в то время как www.example2.com получает ее из http://www.example2.com/style/sheet.css.

Однако то, что они выглядят не так, как на стороне клиента, не означает, что они должны быть разными файлами на стороне сервера (со всеми необходимыми техническими обслуживаниями). Вы можете просто указать Alias в каждом домене для реального общего файла CSS.

Единственный другой обходной путь, о котором я могу подумать, - это разделить правила URL-ссылок, такие как background-image, и поместить их в таблицу стилей для конкретного домена или внутреннюю таблицу стилей.

Answer 2

Вы можете дублировать свой файл CSS на каждом веб-сайте, используя скрипт на стороне сервера.

example1.com/global.css это ваш файл CSS

example2.com/global.css.php - это скрипт PHP, который на самом деле возвращает файл global.css файла example1.com

Сценарий может быть простым, как

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

Но вам нужно больше кода, если вы хотите лучше обрабатывать кэширование.

Answer 3

самый быстрый вариант - каждый сайт имеет свой собственный CSS для ссылки на изображения относительно CSS

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

Чтобы решить проблему с обновлением после выполнения обновления, можно настроить пакетный файл для копирования изменений в необходимые местоположения дочернего сайта

Answer 4

Насколько я знаю, есть разница между

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

и

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

Первый относится к корню вашего сайта, а второй - к родительскому каталогу (в зависимости от местоположения вашего css-файла).

EDIT:

Если оба сайта обслуживаются одним и тем же хостом, могли бы вы использовать символические ссылки для ссылки на свои таблицы стилей?

Answer 5

Есть ли способ добавить домен с php в таблицу стилей, используя "ссылку"?

для примера:

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

Я не уверен, как это сработает, но, возможно, кто-то другой может взять мяч и катиться с ним! Будет ли использование такого трюка нарушать прогрессивный рендеринг в IE?

Answer 6

Единственное решение, которое я могу придумать, - это использовать дополнительную таблицу стилей для каждого домена, в которой указаны специфичные для домена изображения:

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