wake-up-neo.com

Welchen Speicherort hat die relative URL in der CSS-Datei?

Wenn Sie etwas wie eine Hintergrundbild-URL in einer CSS-Datei definieren und wenn Sie eine relative URL verwenden, wo ist sie relativ? Zum Beispiel: 

Angenommen, die Datei /stylesheets/base-styles.css enthält: 

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

Wenn ich dieses Stylesheet über <link ... /> in verschiedene Dokumente einfüge, wird die relative URL in der CSS-Datei relativ zum Stylesheet-Dokument in /stylesheets/ - oder relativ zum aktuellen Dokument ist sie enthalten? Mögliche Pfade wie: 

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

Nach W3 :

Teil-URLs werden relativ zur Quelle des Stylesheets interpretiert, nicht relativ zum Dokument

Daher wird diese Antwort auf Ihre Frage relativ zu /stylesheets/ sein.

Wenn Sie darüber nachdenken, ist dies sinnvoll, da die CSS-Datei zu Seiten in verschiedenen Verzeichnissen hinzugefügt werden kann. Wenn Sie die CSS-Datei als CSS-Datei verwenden, funktionieren die URLs also überall, wo die Stylesheets verlinkt sind.

526
Alex Rozanski

Es ist relativ zur CSS-Datei.

63
M4N

Es ist relativ zum Stylesheet, aber ich würde empfehlen, die URLs relativ zu Ihrer URL zu machen:

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

Auf diese Weise können Sie Ihre Dateien verschieben, ohne sie in der Zukunft umgestalten zu müssen.

45
Codebeef

Um modulare Stylesheets zu erstellen, die nicht vom absoluten Speicherort einer Ressource abhängen, können Autoren relative URIs verwenden. Relative URIs (wie in [RFC3986] ) definiert, werden unter Verwendung eines Basis-URIs zu vollen URIs aufgelöst. RFC 3986, Abschnitt 5, definiert den normativen Algorithmus für diesen Prozess. Für CSS-Stylesheets ist der Basis-URI der des Stylesheets, nicht des Quelldokuments.

Nehmen Sie zum Beispiel die folgende Regel an:

body { background: url("yellow") }

befindet sich in einem von der URI angegebenen Stylesheet:

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

Der Hintergrund des BODY des Quelldokuments wird mit dem Bild gekachelt, das von der durch den URI angegebenen Ressource beschrieben wird 

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

Benutzeragenten können sich in der Handhabung ungültiger URIs oder URIs unterscheiden, die nicht verfügbare oder nicht anwendbare Ressourcen angeben.

Aus der CSS 2.1 Spezifikation entnommen .

29
jrista

Für CSS-Stylesheets ist der Basis-URI der des Stylesheets, nicht des Quelldokuments.

(Alles andere wäre kaputt, IMNSHO)

15
Quentin

Ein Problem, das auftreten kann und anscheinend ein Bruch ist, ist die Verwendung der automatischen Minimierung von CSS. Der Anforderungspfad für das minimierte Bundle kann einen anderen Pfad als das ursprüngliche CSS haben. Dies kann automatisch geschehen, so dass es zu Verwirrung kommen kann.

Der zugeordnete Anforderungspfad für das minimierte Paket sollte "/ originalcssfolder/minifiedbundlename" und nicht nur "minifiedbundlename" sein.

Mit anderen Worten, benennen Sie Ihre Bundles so, dass sie denselben Pfad (mit /) wie die ursprüngliche Ordnerstruktur haben. Auf diese Weise werden externe Ressourcen wie Schriftarten und Bilder vom Browser zu korrekten URIs zugeordnet. Die Alternative ist die Verwendung der absoluten URL (Refs in Ihrer CSS, aber das ist normalerweise nicht wünschenswert.

5
mms

Das hat bei mir funktioniert. Hinzufügen von zwei Punkten und Schrägstrich.

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