Warum verwenden wir kein dynamisches (serverseitig generiertes) CSS?

Da serverseitig generiertes HTML trivial ist (und dies die einzige Möglichkeit war, dynamische Webseiten vor AJAX zu erstellen), ist serverseitig generiertes CSS dies nicht. Eigentlich habe ich es nie gesehen. Es gibt CSS-Compiler, die jedoch CSS-Dateien generieren, die als statische Dateien verwendet werden können.

Technisch erfordert es keine speziellen Bibliotheken, das HTML- Style- Tag sollte auf das PHP-Templaterskript (/ ASP / whatever) anstelle der statischen CSS-Datei verweisen und das Skript sollte CSS - Header vom Inhaltstyp senden - das ist alles.

Hat es Cache-Probleme? Ich glaube nicht. Das Skript sollte Header ohne Cache usw. senden . Ist es ein Problem für Designer? Nein, sie sollten die CSS-Vorlage bearbeiten (so wie sie die HTML-Vorlage bearbeiten).

Warum verwenden wir keine dynamischen CSS-Generatoren? Oder wenn es welche gibt, lass es mich wissen.

Der Hauptgrund, warum CSS selten dynamisch generiert wird (dies gilt auch für Javascript), ist, dass sie gute Kandidaten für das Caching sind. CSS ist eine sehr flexible Methode, um Ihre Seiten zu formatieren. Mit der richtigen Kombination von Klassen können Sie alle Teile Ihrer verschiedenen Seiten nach den unterschiedlichsten Stichwörtern formatieren, ohne dass Sie dies im CSS festlegen müssen sich auf das, was tatsächlich auf dieser Seite vorhanden ist.

Nur weil CSS nicht pro Seite unterschiedlich sein muss , ist es üblich, die Kosten für das Herunterladen zu optimieren. Die meisten Websites bündeln alle CSS-Dateien für die gesamte Website in einem einzigen Download, sodass Teile, die für verschiedene Seitenansichten gelten, nur in einer heruntergeladenen Datei vorhanden sind. Durch das Zwischenspeichern müssen Ihre Kunden nicht darauf warten, dass es ein zweites Mal heruntergeladen wird. Vielleicht ist es noch wichtiger, dass Sie als Inhaltsanbieter die Kosten für das Hochladen des Inhalts nicht mehr als einmal bezahlen müssen. Sie können das statische CSS auch auf einem Server speichern, der für die Bereitstellung statischer Inhalte besser geeignet ist. Auf diese Weise werden Ressourcen für tatsächliche dynamische Inhalte auf Ihren Anwendungsservern freigegeben.

Diese Vorgehensweise ist so verbreitet, dass viele Browser lediglich davon ausgehen, dass das CSS statisch ist. und laden CSS, das sie bereits haben, nur sehr ungern herunter; auch wenn die Benutzer die Seite neu laden. Diese Sonderbehandlung gilt nur für CSS. andere Inhaltstypen werden wie erwartet neu geladen.

Ich glaube, Ihre Annahme ist falsch: In meinem letzten Projekt verwendete die Anwendung von Ajax geladenes servergeneriertes CSS (da die Seite abhängig von der Position der Karte, die Sie betrachteten, mit völlig anderen Stilen versehen wurde).

Anwendungsfälle, in denen das Abrufen von zusätzlichem CSS mit Ajax das Problem lösen würde, sind jedoch eher selten. Dies ist möglicherweise der Grund, warum Sie nie darauf gestoßen sind: Es ist normalerweise einfacher, einen Satz von Stylesheets zu verwalten, die zum Zeitpunkt der Bereitstellung vorverarbeitet (WENIGER + Minimierung) und zwischengespeichert werden können ( Zum Beispiel kann die nächste Seite das zuvor zwischengespeicherte Stylesheet wiederverwenden, sodass die anfängliche Zeit kürzer ist.

Tatsächlich gibt es Anwendungsfälle für dynamisches CSS. Ich habe mit drei verschiedenen Arten gearbeitet:

1. Less - Less CSS ist im Grunde eine CSS-Spracherweiterung, die "dynamisches Verhalten wie Variablen, Mixins, Operationen und Funktionen" hinzufügt. Es erlaubt auch "verschachtelte Regeln", was sehr praktisch ist. Ich habe Less hauptsächlich verwendet, um das Schreiben von CSS weniger ausführlich zu gestalten, indem einige der Wiederholungen beseitigt wurden.

2. URL-Umschreibung - Als Beweis für Ihre Aussage, dass es keine Cache-Probleme gibt, habe ich PHP verwendet, um Skripte als CSS-Dateien mit den richtigen Cache-Headern für eine lange Zeit bereitzustellen. Ich mache das hauptsächlich, um CSS-Dateien aus Bibliotheken bereitzustellen, die sich nicht im Webstamm befinden.

3. Dynamische Berichte - Bei einem Projekt, an dem ich gearbeitet habe, hatten wir einen Berichtsgenerator für alle Arten von Daten im System. Wir geben ( stylewie Sie bereits erwähnt haben) dynamische Stilregeln hauptsächlich für Farben aus, die der Benutzer im Berichts-Generator ausgewählt hat.

^{Hinweis: Wenn Sie CSS direkt an eine URL ausgeben (wie in 1 oder 2 ) und diese nicht in eine Seite einbetten, die bereits von einem Skript generiert wird, wird der Server erheblich belastet, da statische Inhalte bereitgestellt werden. Also, wenn Sie beträchtlichen Verkehr haben, obwohl Sie können es dynamisch jedes Mal tun, dann würden Sie es als eine statische Datei zwischengespeichert werden sollen , wenn Ihr Anwendungsfall erlaubt.}

Aber warum ist es nicht häufiger? Ich denke, es gibt einen Hauptgrund: CSS ist nicht wirklich für die Ausgabe von Inhalten konzipiert. Es gibt also einfach keinen großen Bedarf. Abgesehen von der Ausgabe dynamischer Farben, die der Benutzer wie wir gewählt hat, oder möglicherweise von Hintergrundbildern (wenn das Bild Inhalt ist , ist es wahrscheinlich ein gutes Argument, das imgTag zu verwenden), was müssen Sie sonst noch dynamisch tun?

Die meisten dynamischen Stiländerungen können durch Verweisen auf verschiedene statische CSS-Dokumente erzeugt werden.

So ist es sicherlich möglich, wie Sie dachten, aber es gibt einfach nicht zu viele Gründe, dies zu tun.

Es gibt ZWEI separate Aspekte beim dynamischen Laden von CSS ...

1. Dynamische Generierung der CSS-Datei auf dem Server

   Dies ist ziemlich einfach, und viele Websites tun es. Dies ist nützlich, wenn Sie Ihr CSS unter bestimmten Bedingungen ändern. Zum Beispiel, wenn Sie das Thema Ihrer Site basierend auf dem Geo-Standort des Benutzers auswählen.

2. Laden einer CSS-Datei nach Bedarf über einen JS-Skriptlader

   Dies kann nützlich sein, wenn Sie einen großen Teil von DOM dynamisch erstellen und dann die erforderlichen Stile laden. ABER Wie der Autor von LABjs sagt ...

   Das tatsächliche Ermitteln, ob eine dynamisch geladene CSS-Datei vollständig geladen wurde, ist recht kompliziert und schwierig, browserübergreifend durchzuführen. Die "load" -Ereignisse werden nicht wie erwartet ausgelöst. Das Hinzufügen einer solchen Unterstützung würde LABjs eine nicht triviale Größe verleihen

1. Wir machen das. Die ganze Zeit. Insbesondere für Dinge wie kundenspezifisches Branding in einer SaaS-Anwendung, bei denen Farben etc. aus der Datenbank stammen.
2. Es ist (aus Sicht des Benutzers) viel schneller, das CSS vor oder während der Bereitstellung oder während des Anwendungsstarts vorab zu generieren, wenn die Anwendung eine Startphase hat. Generell ziehen wir es vor, statische CSS-Dateien vorab zu generieren, wann immer dies möglich ist.
3. Für eine maximale Geschwindigkeit (aus Sicht des Benutzers) ist es am besten, statische CSS-Dateien an ein CDN zu senden und sie vom Browser vom CDN und nicht von Ihren Anwendungsservern abzurufen. Dies ist im Allgemeinen nur möglich, wenn die CSS-Dateien vor oder während der Bereitstellung vorgeneriert werden können und wenn ein Teil der Bereitstellung die vorgenerierten statischen CSS-Dateien an das CDN liefert. CDNs sind jetzt sehr billig und benutzerfreundlich - sehen Sie sich die Cloud-Dateien von Amazon CloudFront und Rackspace an.

Hat es Cache-Probleme? Ich glaube nicht. Das Skript sollte No-Cache usw. Senden

Alles in allem, aber das ist eine wichtige statische Information, die der Benutzer bei jedem Laden einer Seite herunterladen soll. Du solltest also einen guten Grund dafür haben.

Nun, was könnte dieser Grund sein?

Wenn Sie einen Stil basierend auf verschiedenen Parametern ändern möchten, müssen Sie dazu mehrere Stylesheets verwenden und den HTML-Code generieren, um den richtigen herunterzuladen.

Dynamisches CSS ist ziemlich trivial, und obwohl seine Anwendungen eingeschränkter sind (da dynamisch generiertes HTML mit einem statischen Stylesheet die meisten alltäglichen Anforderungen erfüllt und CSS selbst einige Mechanismen zur Erzielung von Semidynamik enthält), ist Folgendes zu beachten: Ich habe es schon oft gesehen und benutze es selbst, wann immer es nötig ist.

Häufig reicht der "dynamische" Teil nicht aus, mehrere Stylesheets zu einem zu kombinieren (um die Anzahl der HTTP-Anforderungen zu verringern) und sie zu minimieren (um die Bandbreitennutzung zu verringern), aber einfache Dinge wie die Variablensubstitution (z. B. die Verwendung von Variablen für durchgehend verwendete Farben) das Stylesheet) kann Ihnen das Leben erheblich erleichtern. Da CSS jedoch eine recht unkomplizierte Syntax mit wenigen Einschränkungen aufweist, ist in der Regel ein universelles Textverarbeitungssystem oder eine Skriptsprache wie PHP ausreichend, weshalb Sie nicht viele Standard-CSS-Verarbeitungssysteme sehen.

Vielleicht haben Sie sie in freier Wildbahn gesehen, ohne sie zu erkennen. Server, die dynamische Skripts senden, verwenden in der Regel eine URL-Umschreibung, sodass die URL nicht mehr von statisch bereitgestellten Inhalten unterschieden werden kann. Dies ist erforderlich, da einige Browser (insbesondere der Internet Explorer) unter bestimmten Umständen auf Erweiterungen angewiesen sind, um den MIME-Typ korrekt zu erkennen. Eventuell gesendete Content-Type-Header werden ignoriert (oder verworfen).

In Bezug auf das Zwischenspeichern: Stylesheets werden mit GET-Anforderungen abgerufen, und ihre Zwischenspeicherung ist für eine anständige Benutzererfahrung absolut wichtig. Sie möchten den Seitenfluss nicht beobachten, da das Stylesheet bei jeder Anforderung erneut heruntergeladen wird. Stattdessen sollten Sie alle Parameter, die die Ausgabe Ihrer Stylesheet-Verarbeitung ändern, in die Abfragezeichenfolge einfügen. Eine andere Abfragezeichenfolge ergibt eine andere URL, die wiederum einen Cache-Fehler verursacht. Wenn also die Parameter geändert werden, wird das Stylesheet erneut heruntergeladen, auch wenn der Client alles zwischenspeichert. Wenn Sie wirklich CSS benötigen, das für jede Anforderung möglicherweise anders ist und von Nebenwirkungen abhängt, ziehen Sie in Betracht, den nicht dynamischen Teil in ein statisch bereitgestelltes Stylesheet einzufügen und nur die Dinge dynamisch bereitzustellen, die unbedingt dynamisch sein müssen.

Es gibt einige Szenarien, in denen ich gerne dynamisches CSS verwenden würde, aber meistens habe ich es nicht geschafft, Designer einzusetzen, die ein bisschen Hilfe beim Verstehen der CSS-Grundlagen benötigen. Wenn Sie eine dynamische Sprache in die Mischung einbauen, kann der Kopf explodieren.

Eine andere Sichtweise wäre: "Ein anderer Typ erledigt all die mühsame Handarbeit, nicht wirklich mein Problem, und macht weiter ..."