Stylesheets laden #

Diese Seite ist für Designer, die einem Design ein Stylesheet hinzufügen oder sich fragen, warum eines nicht auf der Seite ist. Sie beantwortet: welcher Operator Stylesheets ausgibt, wo die Dateilisten stehen, in welcher Reihenfolge Dateien ankommen und wie ein einzelnes Inhalts-Template ein zusätzliches Stylesheet anfordern kann.

Inhalt #

1. Die kurze Antwort
2. ezcss_load im Pagelayout
3. Dateilisten in design.ini
4. Ein Stylesheet nur für eine Art von Seite
5. Reihenfolge und Spezifität
6. Media und Druck
7. Was Sie nicht tun sollten

Die kurze Antwort #

1. Legen Sie die Datei in design/<yourdesign>/stylesheets/ Ihrer Design-Erweiterung ab.
2. Nennen Sie sie im Aufruf ezcss_load( array( ... ) ) im Kopf Ihres Pagelayouts oder in einer design.ini-Liste, die Ihr Pagelayout liest.
3. Leeren Sie die Caches und laden Sie hart neu. Die Datei erreicht den Browser zusammen mit den anderen gepackt (Der Packer).

ezcss_load im Pagelayout #

Die Erweiterung ezjscore stellt die Operatoren bereit (extension/ezjscore/autoloads/ezjscpackertemplatefunctions.php):

Standard für media ist all, für pack_level 3. Pfade sind relativ zu stylesheets/ und werden über die Design-Kaskade gefunden; 'mytheme.css' findet also design/<any design in the chain>/stylesheets/mytheme.css, und 'explayouts_standard/grid.css' findet eine Datei in einem Unterordner.

Der Kopf des Designs media (pagelayout/head/style.tpl):

{ezcss_load( array( 'inter.css',
                    'explayouts_standard/grid.css',
                    'index.css',
                    'shop.css',
                    'exp-mobile-layout.css' ) )}

(gekürzt). Verwenden Sie im Pagelayout ezcss_load, nicht ezcss: Nur _load gibt aus, was andere Templates angefordert haben.

Dateilisten in design.ini #

settings/design.ini [StylesheetSettings] definiert Listen, die ein Pagelayout mit ezini() lesen kann:

Eine Liste zählt nur, wenn das Kopf-Template des Designs sie liest. Das design/standard/templates/pagelayout.tpl des Kernels und das Design simple lesen CSSFileList und FrontendCSSFileList; das page_head_style.tpl von admin4 liest AdminComponentCSSFileList und BackendCSSFileList; das Design media nennt seine Dateien selbst. Wenn andere Erweiterungen Ihrem Design Stylesheets hinzufügen können sollen, lesen Sie die Listen:

{ezcss_load( array( 'mytheme.css',
                    ezini( 'StylesheetSettings', 'FrontendCSSFileList', 'design.ini' ) ) )}

und eine Erweiterung fügt dann in ihrer eigenen settings/design.ini.append.php eine Zeile hinzu:

[StylesheetSettings]
FrontendCSSFileList[]=myextension.css

Ein Stylesheet nur für eine Art von Seite #

Ein Vollansichts-Template, das zusätzliches CSS braucht, fordert es an; das ezcss_load des Pagelayouts gibt es aus:

{* override/templates/full/event.tpl *}
{ezcss_require( array( 'event-calendar.css' ) )}
<article class="event">...</article>

Das funktioniert, weil die Ansicht vor dem Pagelayout läuft. Die Liste reist in der persistent variable und übersteht daher auch den View-Cache. Der Besucher lädt die Datei nur auf Seiten, die sie brauchen; auf allen anderen Seiten kostet sie nichts.

Reihenfolge und Spezifität #

• Dateien kommen in der Reihenfolge des Arrays heraus; mit ezcss_require vorgemerkte Dateien kommen nach dem Array.
• Spätere Dateien gewinnen bei gleicher Spezifität. Setzen Sie Basisstile zuerst, dann Komponenten, dann seitenspezifische Dateien, dann Korrekturen.
• Doppelte werden verworfen: Eine zweimal angeforderte Datei wird einmal ausgegeben.

Media und Druck #

Der zweite Parameter ist das Attribut media:

{ezcss_load( array( 'mytheme.css' ) )}
{ezcss( array( 'print.css' ), 'print' )}

Ein Druck-Stylesheet ist oft einfacher in der Hauptdatei, mit @media print { ... } (Druck-Stylesheets).

Was Sie nicht tun sollten #

• Keine <style>-Blöcke oder style="" in Templates (Kein Inline-CSS).
• Kein von Hand geschriebenes <link> auf /extension/.../stylesheets/x.css: Es umgeht die Kaskade und den Packer.
• Keine ?v=-Abfragen, um ein Neuladen zu erzwingen (Keine Versionsabfragen an Asset-Links).
• Keine CDN-Stylesheets ohne Grund: Fremde Hosts verzögern das erste Zeichnen und müssen von der Content Security Policy der Website erlaubt werden (Externe Ressourcen und CDNs).

Verwandte Seiten #

• JavaScript laden
• Die Operatoren ezcss und ezscript
• Der Packer
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.