CSS - WEBSALE Dokumentation

Diese Seite beschreibt, wo CSS-Dateien im Shop liegen, wie Sie eigene Stylesheets anlegen und auf welchen Wegen Sie diese in Ihre Templates einbinden. Vorausgesetzt wird, dass Sie mit dem Aufbau der Template-Verzeichnisse vertraut sind und einen SFTP-Zugang zu Ihrem Shop haben. Der ausgelieferte Mustershop von WEBSALE V8s basiert auf Bootstrap. Er enthält bereits die unmodifizierten Standard-CSS-Dateien von Bootstrap sowie eine weitere CSS-Datei mit WEBSALE-spezifischen Anweisungen. Alle diese Dateien liegen sowohl minimiert als auch nicht-minimiert vor. Zentrales Werkzeug für die Arbeit mit CSS ist das PageSpeed-Tool. Es fasst einzelne CSS-Dateien zu Gruppierungen zusammen, minimiert sie und versieht sie mit einem URL-Fingerprinting. Beim URL-Fingerprinting ändert sich mit jeder inhaltlichen Änderung automatisch der Dateiname. Der Browser ist dadurch gezwungen, die Datei neu zu laden, statt eine veraltete Fassung aus dem Cache anzuzeigen. Der Shop greift im Standard ausschließlich auf diese minimierten Dateien mit URL-Fingerprinting zu. Der Nutzen der Gruppierungen liegt in der Ladezeit. Pro Template binden Sie nur die CSS-Dateien ein, die für den Aufruf der jeweiligen Seite wirklich benötigt werden. Damit Sie diese Dateien nicht einzeln referenzieren müssen, fassen Sie sie unter einer frei wählbaren Gruppierungs-ID zusammen. Eine kürzere Ladezeit wirkt sich sowohl auf die Nutzererfahrung als auch auf das Suchmaschinen-Ranking Ihres Shops aus. Das PageSpeed-Tool finden Sie im Online-Servicebereich (OSB) im Dienst Konfiguration unter dem Reiter “PageSpeed-Tool”. Sollte der Reiter dort nicht sichtbar sein, wenden Sie sich bitte an Ihren Ansprechpartner bei der WEBSALE AG. Diese Seite behandelt ausschließlich CSS. Für JavaScript-Dateien gilt ein weitgehend identisches Verfahren mit eigenen Ordnern und eigenen Tags, beschrieben unter Wegweiser: JavaScript und jQuery.

Ordnerstruktur

Im Verzeichnis Ihres Onlineshops finden Sie den Ordner templates, der neben allen verfügbaren Templates zwei Ordner für Stylesheets enthält:

benutzer/templates/css_upload
benutzer/templates/css_min

In den Ordner css_upload laden Sie Ihre eigenen CSS-Dateien per SFTP hoch. Dort bearbeiten und löschen Sie sie auch. Der Ordner css_min wird dagegen ausschließlich vom PageSpeed-Tool befüllt. Alle darin liegenden Dateien sind minimiert und mit einem URL-Fingerprinting versehen. Sie bearbeiten diese Dateien nicht selbst, da sie bei der nächsten Publizierung überschrieben werden. Sollte diese Ordnerstruktur in Ihrem Shop noch nicht vorhanden sein, legen Sie sie bitte entsprechend an. Ohne beide Ordner kann das PageSpeed-Tool nicht arbeiten.

Eine CSS-Datei anlegen

Der Mustershop enthält unter benutzer/templates/css_upload bereits Stylesheet-Dateien, die Sie als Vorlage verwenden können. Weitere Dateien fügen Sie mit einem einfachen SFTP-Client in denselben Ordner ein. Bei der Benennung sind Sie frei, solange Sie die HTML-Konventionen für Dateinamen einhalten. Quelle (externer Link): HTML-Konventionen für Dateinamen Bewährt hat sich eine Aufteilung in zwei Arten von Dateien:

eine “Grundgerüst-Datei” mit allen Anweisungen, die auf jeder Seite gebraucht werden
mehrere kleine Dateien für Anweisungen, die nur ein einzelnes Template betrifft, beispielsweise den Warenkorb

Der Grund für die kleinen Dateien liegt in den Gruppierungen. Nur was in getrennten Dateien liegt, lässt sich später seiten- oder themenspezifisch kombinieren. Je genauer Sie trennen, desto weniger überflüssige Anweisungen muss ein Besucher beim Seitenaufruf laden.

Alle CSS-Dateien müssen zwingend unter benutzer/templates/css_upload gespeichert werden. Dateien an anderen Orten findet das PageSpeed-Tool nicht.

Einbinden mit dem PageSpeed-Tool (empfohlen)

Nachdem Sie Ihre Dateien per SFTP im Ordner css_upload bereitgestellt haben, weisen Sie sie den gewünschten Templates zu. Wir empfehlen den Weg über das PageSpeed-Tool, weil Ihr Shop dadurch die minimierten Dateien mit URL-Fingerprinting verwendet und nicht die unbearbeiteten Originale. Der Weg besteht aus drei Schritten: Tool aktivieren, Dateien gruppieren, Gruppierung im Template einbinden. Lassen Sie nur nicht-minimierte Dateiversionen vom PageSpeed-Tool verarbeiten. Das nochmalige Minimieren einer bereits minimierten Datei kann zu Fehlern führen.

PageSpeed-Tool aktivieren

Im OSB-Dienst “Konfiguration” ist das PageSpeed-Tool standardmäßig sichtbar und damit aktiv. Ist der Reiter bei Ihnen nicht vorhanden, wenden Sie sich an Ihren Ansprechpartner bei WEBSALE. Damit der Shop auch tatsächlich auf die erzeugten Dateien zugreift, ist zusätzlich ein Eintrag in der Shopkonfiguration shop.config nötig. Eine Freischaltung durch WEBSALE ist dafür nicht erforderlich, die oben beschriebene Ordnerstruktur muss allerdings vorliegen. Fügen Sie im Abschnitt <TopRank> den Parameter UseMinifiedCSSAndJS hinzu:

<TopRank>
...
   UseMinifiedCSSAndJS = yes
...
</TopRank>

Referenz: Abschnitt TopRank

CSS-Dateien gruppieren

Eine CSS-Datei lässt sich über das PageSpeed-Tool nur einbinden, wenn sie einer Gruppierung zugewiesen ist. Die Gruppierung ist damit die kleinste Einheit, die der Shop später referenziert. Gruppierungen legen Sie im Online-Servicebereich (OSB) im Dienst Konfiguration an. Wählen Sie dort den Reiter “PageSpeed-Tool” und anschließend den Reiter “CSS”. In der linken Spalte unter der Überschrift “Gruppierungen” legen Sie beliebig viele seiten- oder themenspezifische Gruppierungen an. Jede Gruppierung erhält beim Anlegen eine frei wählbare Gruppierungs-ID. In den Beispielen auf dieser Seite lautet diese ID start. In der rechten Spalte sehen Sie alle CSS-Dateien, die Sie per SFTP im Ordner css_upload bereitgestellt haben. Fehlt eine gerade hochgeladene Datei, klicken Sie auf das Aktualisieren-Symbol. Ziehen Sie die benötigten Dateien per Drag-and-drop innerhalb des OSB in die jeweilige Gruppierung. Klicken Sie anschließend auf das Weltkugel-Icon, um die Dateien der Gruppierung zu erzeugen. Pro Gruppierungs-ID entsteht dabei eine optimierte CSS-Datei im Ordner css_min. Jeder weitere Klick auf das Weltkugel-Icon erzeugt eine neue Version, sofern Sie inhaltliche Änderungen vorgenommen haben.

Bearbeiten Sie eine bereits zugewiesene CSS-Datei später erneut im Ordner css_upload, wird die Änderung erst sichtbar, nachdem Sie die komplette Gruppierung mit dem Weltkugel-Icon erneut publiziert haben. Wenn Sie während der Designphase häufig kleine Änderungen vornehmen, verwenden Sie stattdessen den Direktzugriff.

Gruppierung als ausgelagerte CSS-Datei einbinden

Eine ausgelagerte CSS-Datei hat einen entscheidenden Vorteil: Sie wird von mehreren Templates verwendet, muss vom Browser aber nur einmal geladen werden. Für jede Gruppierungs-ID erzeugt das PageSpeed-Tool bereits eine solche Datei. Sie binden sie mit dem HTML-Element link an einer beliebigen Stelle Ihres Templates ein. Den Pfad liefert das Tag WS-CSSURL(), in dessen Klammern Sie die Gruppierungs-ID angeben. Beispiel: Die Gruppierung start soll im <head> des Templates eingebunden werden.

<head>
   ...
   <link rel="stylesheet" type="text/css" href="~WS-CSSURL(start)~">
   ...
</head>

Das Tag erzeugt für den Browser den Verweis auf die minimierte Datei der Gruppierung:

<head>
   ...
   <link rel="stylesheet" type="text/css" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.min.css">
   ...
</head>

Der Namensbestandteil 753e2835a4 ist das URL-Fingerprinting. Er ändert sich mit jeder neuen Version der Gruppierung. Referenz: WS-CSSURL()

Eine ausgelagerte CSS-Datei darf keine WEBSALE-Tags und keine Textvariablen enthalten. Der Shop parst diese Dateien nicht, WEBSALE-Tags werden also nicht ersetzt. Der Ordner wird außerdem von der Textpflege-Plattform nicht berücksichtigt, sodass auch Textvariablen unersetzt bleiben. Binden Sie das CSS in diesen beiden Fällen inline in das gewünschte Template ein.

Gruppierung inline einbinden

Stylesheets müssen nicht zwingend über eine externe Datei eingebunden werden. Mit dem HTML-Element style legen Sie sie direkt im HTML-Dokument fest. Das ist der richtige Weg, wenn Ihre CSS-Anweisungen WEBSALE-Tags oder Textvariablen enthalten. Den Inhalt aller Dateien einer Gruppierung liefert das Tag WS-CSSInline(), in dessen Klammern Sie die Gruppierungs-ID angeben. Beispiel: Die Stylesheets der Gruppierung start sollen inline innerhalb des <body> eingebunden werden.

<body>
   ...
   <style type="text/css">
      ~WS-CSSInline(start)~
   </style>
   ...
</body>

Das Tag gibt für den Browser alle Stylesheets der Gruppierung aus:

<body>
   ...
   <style type="text/css">
      .text-normal {font-weight: normal;}
      .text-fett   {font-weight: bold;}
   </style>
   ...
</body>

Referenz: WS-CSSInline()

Direktzugriff während der Designphase

Beim Einbinden über das PageSpeed-Tool werden Änderungen an CSS-Dateien erst nach einem Klick auf das Weltkugel-Icon sichtbar. Beim Aufbau eines neuen Shops ist dieser Zwischenschritt aufwendig, weil er sich bei jeder Korrektur wiederholt. Für diesen Fall gibt es den Direktzugriff. Der Shop greift dabei nicht auf die generierten Dateien im Ordner css_min zu, sondern auf die originalen Dateien im Ordner css_upload, die der Gruppierung zugewiesen sind. Änderungen sind damit sofort nach dem Hochladen und einem Neuladen im Browser sichtbar. Der Direktzugriff besteht aus zwei Teilen. Erstens einer Einstellung in der Shopkonfiguration shop.config, die festlegt, wann der Modus greift. Zweitens einer Klammerung im Template, die beide Fälle abdeckt.

Permanenter Direktzugriff

Mit der folgenden Einstellung greift der Shop dauerhaft auf die Originaldateien zu. Diese Einstellung empfiehlt sich, solange Sie einen Shop aufbauen und häufig Änderungen vornehmen.

<TopRank>
   ...
   ActivatePermanentDirectJSCSSTest    =    yes
   ...
</TopRank>

Direktzugriff nur auf Abruf

Mit dem Wert no ist der permanente Direktzugriff deaktiviert. Der Shop greift dann nur auf die Originaldateien zu, wenn Sie ihn mit dem Parameter &jscssdirect-test=on aufrufen. Mit &jscssdirect-test=off kehrt er zu den Dateien im Ordner css_min zurück.

<TopRank>
   ...
   ActivatePermanentDirectJSCSSTest    =    no
   ...
</TopRank>

Wegweiser: Testmodi des Shops ein- und ausschalten

Beispiel: ausgelagerte CSS-Datei im Direktzugriff

Im Direktzugriff liefert der Shop jede Datei der Gruppierung einzeln aus, nicht eine zusammengefasste Datei. Das Template muss deshalb über alle Dateien der Gruppierung laufen. Dafür gibt es die Klammerung WS-DirectCSS() mit der Gruppierungs-ID und darin die Schleife @WS-DirectCSS, die pro Durchlauf über WS-DirectCSSURL den Pfad einer Datei liefert. Damit das Template in beiden Zuständen funktioniert, umschließt die Klammerung ST-DirectJSCSSTest den Direktzugriff-Fall und !ST-DirectJSCSSTest den Normalfall. Beispiel: Der Gruppierung start sind die beiden Dateien font.css und color.css zugewiesen.

<head>
   ...
   <!-- Klammerung für den aktivierten Direktzugriff -->
   {ST-DirectJSCSSTest}
      {WS-DirectCSS(start)}
         {@WS-DirectCSS}
            <link rel="stylesheet" href="~WS-DirectCSSURL~">
         {/@WS-DirectCSS}
      {/WS-DirectCSS(start)}
   {/ST-DirectJSCSSTest}

   <!-- Klammerung für den deaktivierten Direktzugriff -->
   {!ST-DirectJSCSSTest}
      <link rel="stylesheet" href="~WS-CSSURL(start)~">
   {/!ST-DirectJSCSSTest}
   ...
</head>

Für den Browser entsteht daraus je nach Zustand entweder ein Verweis pro Originaldatei oder ein einzelner Verweis auf die minimierte Gruppierungsdatei:

<head>
   ...
   <!-- Aktivierter Direktzugriff: alle Dateien der Gruppierung, nicht minimiert -->
   <link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_upload/font.css">
   <link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_upload/color.css">

   <!-- Deaktivierter Direktzugriff: eine minimierte Gruppierungsdatei -->
   <link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.min.css">
   ...
</head>

Referenz: ST-DirectJSCSSTest Referenz: WS-DirectCSS() Referenz: WS-DirectCSSURL()

Beispiel: Inline-Einbindung im Direktzugriff

Auch inline eingebundene Stylesheets lassen sich im Direktzugriff verwenden. Statt des Pfads liefert WS-DirectCSSInline hier den Inhalt der jeweiligen Datei. Beispiel: Die Stylesheets der Gruppierung start sollen inline innerhalb des <body> eingebunden werden.

<body>
   ...
   <!-- Klammerung für den aktivierten Direktzugriff -->
   {ST-DirectJSCSSTest}
      {WS-DirectCSS(start)}
         <style type="text/css">
         {@WS-DirectCSS}
            ~WS-DirectCSSInline~
         {/@WS-DirectCSS}
         </style>
      {/WS-DirectCSS(start)}
   {/ST-DirectJSCSSTest}

   <!-- Klammerung für den deaktivierten Direktzugriff -->
   {!ST-DirectJSCSSTest}
      <style type="text/css">
         ~WS-CSSInline(start)~
      </style>
   {/!ST-DirectJSCSSTest}
   ...
</body>

Für den Browser entsteht daraus im Direktzugriff der unveränderte Inhalt der Originaldateien, im Normalfall der minimierte Inhalt der Gruppierung:

<body>
   ...
   <!-- Aktivierter Direktzugriff: Originalinhalt, nicht minimiert -->
   <style type="text/css">
      .text-normal {
         font-weight: normal;
      }
      .text-fett   {
         font-weight: bold;
      }
   </style>

   <!-- Deaktivierter Direktzugriff: minimierter Inhalt der Gruppierung -->
   <style type="text/css">
      .text-normal {font-weight: normal;}
      .text-fett   {font-weight: bold;}
   </style>
   ...
</body>

Referenz: WS-DirectCSSInline()

Neue Gruppierungen im Design-Testmodus erproben

Eine neue Gruppierung muss nicht sofort im Livemodus eingebaut werden. Für alle beschriebenen Integrationsvarianten steht Ihnen die Klammerung ST-DesignTest zur Verfügung. Damit sehen nur Sie im Design-Testmodus die neue Zuweisung, während Besucher weiterhin die bisherige Fassung erhalten.

{ST-DesignTest}
   Zuweisung der CSS-Dateien, die im Design-Testmodus verwendet werden sollen
{/ST-DesignTest}

{!ST-DesignTest}
   Zuweisung der CSS-Dateien, die im Livemodus verwendet werden sollen
{/!ST-DesignTest}

Referenz: ST-DesignTest Wegweiser: Testmodi des Shops ein- und ausschalten

Debug-Modus für die Fehlersuche im Browser

Greifen die CSS-Anweisungen nicht wie gewünscht, ist die Fehlersuche in einer minimierten Datei mühsam. Deshalb können Sie die Einbindung der minimierten Datei per Aufruf unterdrücken und stattdessen die nicht-minimierte Fassung im Browser verwenden. Das PageSpeed-Tool legt diese Fassung zeitgleich mit der minimierten Datei im Ordner css_min ab. Binden Sie Ihre CSS-Dateien per Direktzugriff ein, brauchen Sie diesen Modus nicht. Der Browser erhält dort ohnehin die nicht-minimierten Originale. Hängen Sie zum Aktivieren an einen beliebigen Shop-Aufruf den Parameter &jscssminified-test=off an. Der Shop muss sich dafür im Testmodus befinden.

https://www.xyz.de/?test=on&jscssminified-test=off

Der Browser erhält dann die nicht-minimierte Fassung, erkennbar am fehlenden .min im Dateinamen:

<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.css">

Mit &jscssminified-test=on kehren Sie zu den minimierten Dateien zurück:

https://www.xyz.de/?test=on&jscssminified-test=on

<link rel="stylesheet" href="/$WS/<ShopID>/websale8_shop-<ShopID>/benutzer/templates/Deutsch/../css_min/start_753e2835a4.min.css">

Wegweiser: Testmodi des Shops ein- und ausschalten

Einbinden ohne PageSpeed-Tool

Die Nutzung des PageSpeed-Tools ist in WEBSALE V8s nicht zwingend. Sie können CSS-Dateien auch über einen relativen Pfad in jedes Template einbinden oder Stylesheets direkt im Template notieren. Dieser Weg ist einfacher, verzichtet aber auf Minimierung und URL-Fingerprinting. Bei der Einbindung über einen relativen Pfad ist das base-Element zu beachten. Es legt die Basis für alle relativen Verweise fest und zeigt in der Regel auf das Subshop-Templateverzeichnis, beispielsweise benutzer/templates/Deutsch.

<head>
   ...
   <base href="~URL-Template~">
   <link rel="stylesheet" type="text/css" href="../css_upload/styles.css">
   ...
</head>

Wegweiser: base-href Wegweiser: URL-Template

Verwenden Sie auch auf diesem Weg ausschließlich die Dateien im Ordner css_upload. Ein automatisches URL-Fingerprinting und eine automatische Minimierung finden nicht statt. Beides müssen Sie nach jeder Änderung manuell nachziehen, sonst liefert der Browser eine veraltete Datei aus dem Cache aus.Auch hier gilt: Eine ausgelagerte CSS-Datei darf keine WEBSALE-Tags und keine Textvariablen enthalten, weil der Shop diese Dateien nicht parst und die Textpflege-Plattform den Ordner nicht berücksichtigt. Binden Sie das CSS in diesen Fällen inline ein.

Bei der Einbindung direkt im Quellcode spielt das base-Element nur dann eine Rolle, wenn Sie über background oder background-image Hintergrundbilder einbinden.

<body>
   ...
   <style type="text/css">
      .text-normal {font-weight: normal;}
      .text-bold   {font-weight: bold;}
      .background  {background-image: url(../images/bg.png);}
   </style>
   ...
</body>

Hinweise zu Bootstrap-CSS

Die im Mustershop bereitgestellten Dateien bootstrap.css und bootstrap.min.css sowie bootstrap-theme.css und bootstrap-theme.min.css sind die unmodifizierten Standarddateien von Bootstrap mit allen Anweisungen und Komponenten. Bis auf die E-Mail-Templates verwenden bereits alle Mustershop-Templates bootstrap.min.css und bootstrap-theme.min.css. Möchten Sie den Mustershop an Ihr Design anpassen, nutzen Sie dafür vorrangig das Customizing von Bootstrap. Von einer Änderung der mitgelieferten Bootstrap-Dateien ist abzuraten, weil Sie damit die Update- und Kompatibilitätsfähigkeit von Bootstrap verlieren. Lässt sich eine Designanpassung nicht über das Customizing lösen, überschreiben Sie die Bootstrap-Anweisungen. Dafür stehen Ihnen beide oben beschriebenen Wege offen, die ausgelagerte CSS-Datei und die Einbindung direkt im Quellcode. Wegweiser: Bootstrap

WEBSALE Klassennamen und IDs

Alle von WEBSALE V8s automatisch erzeugten HTML-Elemente sind mit Klassennamen und IDs versehen. Ein Beispiel ist die Blätternavigation für Produktlisten:

Dieses Tag erzeugt eine vollständige Tabelle mit Verlinkungen, Zahlenwerten und Grafiken. Über die vergebenen Klassennamen und IDs nehmen Sie per Stylesheet gestalterischen Einfluss darauf, ohne das erzeugte Markup selbst ändern zu müssen. Verwenden Sie die von WEBSALE vergebenen Klassennamen und IDs nicht für eigene HTML-Elemente. Sonst greifen Ihre Anweisungen unbeabsichtigt auch auf die generierten Elemente. Eine Übersicht aller vergebenen Klassennamen und IDs finden Sie in den folgenden Referenzen:

Styles für Produkte
Styles für Produktbewertung
Styles für Blättern in Kategorien und Produkten
Styles für Dropdown-Liste der Währungen
Styles für Anmeldung
Styles für Rechnungs- und abweichende Lieferadresse
Styles für Bankverbindung
Styles für multiple Kundendaten
Styles für Trusted-Shops-Informationen
Styles für Varianten der Merkliste
Styles für Fehlermeldungen beim Online-Clearing
Styles für kostenpflichtige Zusatzleistungen
Styles für speicherbare Warenkörbe
Styles für WWS-Infodatenschnittstelle
Styles für Wunschliste
Styles für Zustimmung zur Werbung
Styles für Produktvergleich
Styles für Filter auf Kategorieebene

SEO-optimierte Auslieferung von CSS-Dateien

Die Performance einer Seite ist eines der wichtigsten Kriterien für ein gutes Suchmaschinen-Ranking. CSS-Dateien fallen dabei wegen ihrer Größe besonders ins Gewicht. Die folgenden Quellen erläutern, wie Sie Ihr Design beibehalten und trotzdem eine gute Performance erreichen.

CSS-Bereitstellung optimieren: Ressourcen minimieren und CSS-Bereitstellung optimieren
Browser-Caching nutzen
URL-Fingerprinting und Caching-Header
Sichtbare Inhalte priorisieren

​Ordnerstruktur

​Eine CSS-Datei anlegen

​Einbinden mit dem PageSpeed-Tool (empfohlen)

​PageSpeed-Tool aktivieren

​CSS-Dateien gruppieren

​Gruppierung als ausgelagerte CSS-Datei einbinden

​Gruppierung inline einbinden

​Direktzugriff während der Designphase

​Permanenter Direktzugriff

​Direktzugriff nur auf Abruf

​Beispiel: ausgelagerte CSS-Datei im Direktzugriff

​Beispiel: Inline-Einbindung im Direktzugriff

​Neue Gruppierungen im Design-Testmodus erproben

​Debug-Modus für die Fehlersuche im Browser

​Einbinden ohne PageSpeed-Tool

​Hinweise zu Bootstrap-CSS

​WEBSALE Klassennamen und IDs

​SEO-optimierte Auslieferung von CSS-Dateien

Ordnerstruktur

Eine CSS-Datei anlegen

Einbinden mit dem PageSpeed-Tool (empfohlen)

PageSpeed-Tool aktivieren

CSS-Dateien gruppieren

Gruppierung als ausgelagerte CSS-Datei einbinden

Gruppierung inline einbinden

Direktzugriff während der Designphase

Permanenter Direktzugriff

Direktzugriff nur auf Abruf

Beispiel: ausgelagerte CSS-Datei im Direktzugriff

Beispiel: Inline-Einbindung im Direktzugriff

Neue Gruppierungen im Design-Testmodus erproben

Debug-Modus für die Fehlersuche im Browser

Einbinden ohne PageSpeed-Tool

Hinweise zu Bootstrap-CSS

WEBSALE Klassennamen und IDs

SEO-optimierte Auslieferung von CSS-Dateien