CSS: Gibt es auch so etwas wie eine <include>-funktion?

[Ingrid]

Hallo allerseits!

Nachdem Ihr mir schon wiederholt so nett und hilfsbereit geholfen habt, bitte ich Euch wieder einmal um Euren Expertenrat.

Mittlerweile bin ich soweit, dass ich es geschafft habe, ausgelagerten html-Code mittels der php-Funktion <include> in eine php-Datei einzubinden. Da ich das sehr praktisch finde, möchte ich wissen, ob es eine ähnliche Funktion auch für CSS-Dateien gibt.

Konkret gesagt geht es mir um folgendes: Bei der Website, die ich vorbereite, habe ich verschiedene CSS-Blätter. Gerechtfertigt ist das dadurch, dass ich verschiedene Seitentypen mit einer ganz unterschiedlichen Grundstruktur (!) habe – also nicht nur mit unterschiedlichen Einzelelementen, die man mittels Klassen in einer einzigen CSS-Datei unterbringen könnte.

Im Gegenzug aber möchte ich bestimmte Einzelelemente vereinheitlichen, unter anderem die Schriften. Deshalb die Frage: gibt es irgendeine unkomplizierte (!) Methode, mit der man beispielsweise die Informationen zu den Schriften aus den CSS-Dateien auslagern könnte (ebenso noch eine Reihe anderer Elemente), damit sie von allen CSS-Dateien aufgerufen werden?

Danke im voraus
Ingrid

P. S.: Verübelt mir bitte nicht, wenn ich Euch nicht so schnell antworte. Mir geht es nämlich so, dass ich bei euren schnellen Reaktionen überhaupt nicht mehr nachkomme - da ich noch anderes zu tun habe, als die ganze Zeit über vor dem Bildschirm zu sitzen.

[Der Martin]

Hallo,

Mittlerweile bin ich soweit, dass ich es geschafft habe, ausgelagerten html-Code mittels der php-Funktion <include> in eine php-Datei einzubinden.
Da ich das sehr praktisch finde, möchte ich wissen, ob es eine ähnliche Funktion auch für CSS-Dateien gibt.

nicht direkt, aber PHP ist unabhängig davon, was es ausgeben soll - ob der Output HTML oder CSS sein soll, ist dem PHP-Interpreter eigentlich wurscht. Also könntest du deine CSS-Dateien einfach in *.php umbenennen und kannst dann darin auch PHP-Code unterbringen.
Dann muss das PHP-CSS-Script nur mit einer header()-Anweisung beginnen, die den korrekten Content-Type ausgibt:

<?php
header("Content-Type: text/css");
?>

Konkret gesagt geht es mir um folgendes: Bei der Website, die ich vorbereite, habe ich verschiedene CSS-Blätter. Gerechtfertigt ist das dadurch, dass ich verschiedene Seitentypen mit einer ganz unterschiedlichen Grundstruktur (!) habe – also nicht nur mit unterschiedlichen Einzelelementen, die man mittels Klassen in einer einzigen CSS-Datei unterbringen könnte.

Im Gegenzug aber möchte ich bestimmte Einzelelemente vereinheitlichen, unter anderem die Schriften. Deshalb die Frage: gibt es irgendeine unkomplizierte (!) Methode, mit der man beispielsweise die Informationen zu den Schriften aus den CSS-Dateien auslagern könnte (ebenso noch eine Reihe anderer Elemente), damit sie von allen CSS-Dateien aufgerufen werden?

Da hätte ich eine ganz andere Idee. Viel einfacher: Binde einfach zwei Stylesheets für jede Seite ein. Ein allgemeines, und ein seitenspezifisches.

P. S.: Verübelt mir bitte nicht, wenn ich Euch nicht so schnell antworte. Mir geht es nämlich so, dass ich bei euren schnellen Reaktionen überhaupt nicht mehr nachkomme - da ich noch anderes zu tun habe, als die ganze Zeit über vor dem Bildschirm zu sitzen.

Kein Problem. Ernüchternd ist nur, wenn man versucht zu helfen, und es kommt tagelang gar keine Reaktion mehr.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Also könntest du deine CSS-Dateien einfach in *.php umbenennen und kannst dann darin auch PHP-Code unterbringen.

Wenn man CSS mit einer serverseitigen Technik generiert, dann ist man mit einem CSS-Prozessor wie Sass oder PostCSS besser dran als mit PHP, weil man dann auch dessen Funktionsumfang nutzen kann.

Da hätte ich eine ganz andere Idee. Viel einfacher: Binde einfach zwei Stylesheets für jede Seite ein. Ein allgemeines, und ein seitenspezifisches.

Du meinst: ein allgemeines und ein seitentypspezifisches. Beim ersten Aufruf der Website ein HTTP-Request mehr, aber danach ist’s ja im Cache.

Ein seitenspezifisches Stylesheet (sollte es das geben) wäre noch eine Ebene mehr. Und dieses wäre dann im style-Element besser aufgehoben als in einer Extra-Ressource, um einen HTTP-Request zu sparen.

LLAP 🖖

[Der Martin]

Hallo Gunnar,

Wenn man CSS mit einer serverseitigen Technik generiert, dann ist man mit einem CSS-Prozessor wie Sass oder PostCSS besser dran als mit PHP, weil man dann auch dessen Funktionsumfang nutzen kann.

das glaube ich gern, aber es bedeutet dann einen zusätzlichen Lern- und Einarbeitungsaufwand, während Ingrid durchblicken lässt, dass sie/er zumindest mit includes in PHP schon vertraut ist.

Bei meinem Kenntnisstand würde ich auch PHP vorziehen, auch wenn es andere Techniken gibt, die vielleicht besser auf das Problem zugeschnitten sind. Aber PHP kenne ich, die anderen von dir vorgeschlagenenen Techniken nicht bzw. nur dem Namen nach.

Mag sein, dass PHP hier "Overkill" wäre - aber damit wäre die Aufgabe zumindest ohne zusätzlichen Lernaufwand umsetzbar.

Ein seitenspezifisches Stylesheet (sollte es das geben) wäre noch eine Ebene mehr. Und dieses wäre dann im style-Element besser aufgehoben als in einer Extra-Ressource, um einen HTTP-Request zu sparen.

Stimmt, das ist noch besser. Guter Einwand.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin

das glaube ich gern, aber [CSS-Prozessor] bedeutet dann einen zusätzlichen Lern- und Einarbeitungsaufwand,

Eigentlich erstmal nur Installationsaufwand. Wenn man nicht gerade sowas wie die „sassy Syntax“ bei Sass nutzen will (d.h. Einrückungen statt Klammern – und ich würde das nicht wollen), dann ist CSS-Code schonmal gültiger Code, der dann mit Includes angereichert werden kann – und eben auch mit anderen Dingen, die man nach und nach dazulernen kann.

Aber ja, wenn man lediglich Includes will, kann man die auch mit PHP haben.

Muss man sich da eigentlich um Caching kümmern und macht das der Server automatisch? Man will ja die Stylesheets nicht bei jedem Seitenaufruf von PHP neu generieren lassen.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Man will ja die Stylesheets nicht bei jedem Seitenaufruf von PHP neu generieren lassen.

Was der Apache kann, weiß ich nicht, aber zumindest dem IIS kann man Output-Caching einstellen.

Und man kann über entsprechende Header auch erreichen, dass der Browser des Anwenders cached.

Rolf

[Ingrid]

Danke vielmals, Martin.

Deine Idee mit dem allgemeinen und dem spezifischen Stilblatt gefällt mir. Ich werde das gleich ausprobieren. Ich nehme mal an, man schreibt die beiden Anweisungen einfach untereinander? Sollte das nicht der Fall sein, könnstest Du mir bitte sagen, was man anders machen soll?

Andernfalls, wenn meine Annahme richtig ist, brauchst Du mir nicht mehr zu schreiben, dann habe ich nämlich alle Informationen, die ich brauche. In diesem Fall sage ich tschüs bis zum nächsten Mal und klinke mich aus der Diskussion aus.

Herzliche Grüsse
Ingrid

[Gunnar Bittersmann]

@@Ingrid

Konkret gesagt geht es mir um folgendes: Bei der Website, die ich vorbereite, habe ich verschiedene CSS-Blätter. Gerechtfertigt ist das dadurch, dass ich verschiedene Seitentypen mit einer ganz unterschiedlichen Grundstruktur (!) habe – also nicht nur mit unterschiedlichen Einzelelementen, die man mittels Klassen in einer einzigen CSS-Datei unterbringen könnte.

Im Gegenzug aber möchte ich bestimmte Einzelelemente vereinheitlichen, unter anderem die Schriften.

Ein allgemeines und ein seitentypspezifisches Stylesheet – wie von Dem Martin vorgeschlagen – wären eine Möglichkeit.

Eine andere wäre, alles in einem Stylesheet zu notieren. Der jeweilige Seitentyp wird in einer Klasse im html-Wurzelelement festgahalten, bspw.
<html lang="de" class="gelbeSeite">

Im Stylesheet werden die seitentypspezifischen Regeln mittels Nachfahrenselektor angegeben:

body
{
	font: 1.25em/1.5 Cambria, serif;
}

.gelbeSeite body
{
	background: yellow;
	color: black;
}

.blaueStunde body
{
	background: slateblue;
	color: white;
}

LLAP 🖖

[MudGuard]

Hi,

<html lang="de" class="gelbeSeite">

ich hoffe, es geht um einen Branchenbuch-Eintrag, nicht um eine Seite, die gelb gefärbt ist - sonst wäre der Klassennamen ja darstellungsbezogen …

cu,
Andreas a/k/a MudGuard

[Ingrid]

Danke vielmals, Gunnar.

Ich glaube, ich werde eher Martins Lösung anwenden. Das scheint mir in meinem Fall einfacher. Ich werde mich dann aus der Diskussion ausklinken...

Herzliche Grüsse
Ingrid

[Henry]

Hallo Ingrid,

wenn ich mir die anderen Antworten so anschaue, wird hier vermutet du willst die jeweiligen Stylesheets serverseitig generieren. Kann ich aber so nicht aus deiner Frage lesen, vielleicht meinst du ja auch was anderes. Vielleicht die Import-Möglichkeit?

Gruss
Henry

[Ingrid]

Danke vielmals, Henry.

Ich glaube, mir reicht vorläufig Martins Antwort. Mit dem @import kenne ich mich nicht aus; aber ich nehme es als Anregung auf, mich damit zu gegebener Zeit auseinanderzusetzen.

Im Übrigen werde ich mich dann aus der Diskussion ausklinken.

Herzliche Grüsse Ingrid

[Raketenwissenschaftler]

Mit dem @import kenne ich mich nicht aus

@import ist aus Performancesicht eine zweitbeste Lösung, weil sich der Datenverkehr ohne flankierende Maßnahmen wie "preloading" grob gesagt wie folgt darstellt:

1. Webseite wird abgeholt und geparst.
2. Der Browser stellt fest "Oh! Ich soll eine CSS-Ressource abholen!"
3. CSS-Ressource wird abgeholt und geparst.
4. Der Browser stellt fest "Oh! Ich soll noch eine CSS-Ressource abholen!"
5. Die weitere CSS-Ressource wird abgeholt und geparst.

Das lokale Zusammenfügen der CSS-Datei dauert auf einem Server (der den Name verdient) je nach Speichertechnik und Verfügbarkeit im Dateisystem-Cache so um die 0,1 bis 9 Millisekunden. Beim Import mit @import kommt der zuätzliche Request hinzu, der, je nach Netz des Besuchers und Standort des Servers schon mal 250 Millisekunden (bei datendurchsuchenden Proxys wie Malewarescannern durchaus auch länger) dauern kann.

[Gunnar Bittersmann]

@@Raketenwissenschaftler

@import ist aus Performancesicht eine zweitbeste Lösung,

Ich hab im Hinterkopf, dass @import nicht so gut ist, weiß aber nicht mehr warum. Was wäre der Unterschied zwischen 1 und 2?

1. Im HTML:

   <link rel="stylesheet" href="gelbeSeite.css"/>
   

   und in gelbeSeite.css:

   @import url(default.css);
   

2. Im HTML:

   <link rel="stylesheet" href="default.css"/>
   <link rel="stylesheet" href="gelbeSeite.css"/>
   

In beiden Fällen zwei HTTP-Requests für die Stylesheets beim ersten Seitenaufruf.

Das lokale Zusammenfügen der CSS-Datei dauert auf einem Server (der den Name verdient) je nach Speichertechnik und Verfügbarkeit im Dateisystem-Cache so um die 0,1 bis 9 Millisekunden.

Das hat aber den Nachteil, dass man die gleichen Teile der seitentypspezifischen Stylesheet (das, was in default.css steht) immer wieder übertragen muss und die dann auch mehrfach im Browsercache rumliegen.

LLAP 🖖

[Rechthaber der I.]

In beiden Fällen zwei HTTP-Requests für die Stylesheets beim ersten Seitenaufruf.

Ja, aber:

Im header:

• HTML wird geparst, es werden zwei CSS.Dateien parallel abgeholt.

(2 Schritte)

Im CSS:

• HTML wird geparst, es eine CSS.Dateien abgeholt.
• CSS wird geparst, danach wird (ohne link ... preoad) die weitere CSS-Datei abgeholt.

Ebenso verzögert sich das Laden weiterer Ressourcen, welche im CSS genannt werden. (Schriften, Grafiken).

(3 Schritte)

Das hat aber den Nachteil, dass man die gleichen Teile der seitentypspezifischen Stylesheet (das, was in default.css steht) immer wieder übertragen muss und die dann auch mehrfach im Browsercache rumliegen.

Ob das ein nennenswerter Nachteil ist muss sich im konkreten Einzelfall (Abhängig von Client, Server, Netz und dem Übertragsweg erst mal erweisen! - Aber man kann ja link ... preload nutzen.

[Mitleser]

HTTP2 wäre in dem Zusammenhang auch so ein erwähnenswertes Dingens...

[Gunnar Bittersmann]

@@Rechthaber der I.

Das hat aber den Nachteil, dass man die gleichen Teile der seitentypspezifischen Stylesheet (das, was in default.css steht) immer wieder übertragen muss und die dann auch mehrfach im Browsercache rumliegen.

Ob das ein nennenswerter Nachteil ist muss sich im konkreten Einzelfall (Abhängig von Client, Server, Netz und dem Übertragsweg

Und davon, wie groß das gemeinsame Stylesheet ist, das in jedes seitentypspezifische eingebunden wird.

• Aber man kann ja link ... preload nutzen.

Ich sehe nicht, wie das gegen Dateigröße helfen sollte.

LLAP 🖖

[Raketenwissenschaftler]

Mittlerweile bin ich soweit, dass ich es geschafft habe, ausgelagerten html-Code mittels der php-Funktion <include> in eine php-Datei einzubinden.

Das sieht nach einem Erfolg aus, ist aber, wenn und weil der "html-Code" gerade kein PHP enthält, eine "eher mittelgute" (für weniger empfindsame: schlechte) Idee.

Die inkludierte Datei wird geparst, weil der Interpreter darin nach PHP sucht. Die entstehende Serverlast mag bei einem Abruf gering anmuten, multipliziert sich aber mit der Anzahl der Abrufe - und der includes.

readfile($filename) ist einer der Kandidaten für das, was Du willst.

Es sind sogar Fälle denkbar, in denen include und Co. gefährlich sind - nämlich dann wenn der Inhalt der includierte Datei auf vom Nutzer übermittelten Daten basiert. Und sowas kann sich im Verlauf der Lebensdauer einer Website auch mal ändern.

[Ingrid]

Danke vielmals. Aber die Antwort von Martin hat mein Problem schon gelöst. Ich stelle nicht in Abrede, dass es möglicherweise noch bessere Lösungen gibt. Aber im Augenblick reicht mir eine einfache Lösung.

Ich verlasse jetzt endgültig diese Diskussion, nehme zusätzlich zur Antwort auf meine Frage noch ein paar Anregungen zum Weiterlernen mit. (Denn ich möchte noch eine ganz andere Frage für eine neue Diskussion stellen.)

Da ich Anfängerin bin, kann ich leider von der Gesamtheit der wohlgemeinten Ratschläge noch nicht so richtig profitieren...

Herzliche Grüsse Ingrid