Von Inline-CSS zu Stylesheets #

Teil 4, Kapitel 16. Alte Templates sind voller style="..."-Attribute und <style>-Blöcke. Eine Content Security Policy mit style-src 'self' verwirft beide: Die Seite funktioniert noch, sieht aber falsch aus. Sie sind außerdem schwer zu pflegen, weil dieselbe Regel in viele Templates kopiert wird, und sie können dem dunklen Modus der Administration nicht folgen. Dieses Kapitel verschiebt sie in Stylesheet-Dateien.

Sie finden #

cd extension/myoldext
grep -rnoE 'style\s*=\s*"[^"]*"' --include='*.tpl' design/ | sed 's/.*style=//' | sort | uniq -c | sort -rn | head -20
grep -rln '<style' --include='*.tpl' design/

Der erste Befehl zählt jeden unterschiedlichen style-Wert. Meist machen wenige Werte den größten Teil aus, und jeder davon wird zu einer Klasse.

Ein echtes Beispiel #

se7enxweb/AdminAid, Commit e5a665c, „The class view carries no inline CSS; its flag uses the shared a4-flag class“:

before:
<img src="{$language_code|flag_icon}" alt="{$language_code}" style="vertical-align: middle;" />

after:
<img src="{$language_code|flag_icon}" alt="{$language_code}" class="a4-flag" />

a4-flag ist eine Klasse der gemeinsamen Komponenten der Administration (components.css), daher brauchte die Erweiterung kein eigenes CSS. Sehen Sie immer zuerst dort nach: Auf einer Administrationsseite gibt es für die meisten Inline-Styles alter Erweiterungen bereits eine gemeinsame Klasse. Siehe admin4-Styling für Erweiterungsseiten.

Die Schritte für Ihre eigenen Styles #

1. Das Stylesheet anlegen #

Legen Sie es im Design der Erweiterung unter stylesheets/ ab, mit einem Namen, der nicht mit dem einer anderen Erweiterung kollidieren kann:

extension/myoldext/design/standard/stylesheets/myoldext.css

Verwenden Sie design/standard für Styles, die in jedem Design gebraucht werden, und design/admin (oder das Administrationsdesign, auf das Sie abzielen) für Styles, die nur die Administration betreffen.

2. Jeden Inline-Wert in eine Klasse verwandeln #

before:
<td style="width: 30%; white-space: nowrap;">...</td>
<div style="display:none" id="myoldext-advanced">...</div>

after:
<td class="myoldext-label">...</td>
<div id="myoldext-advanced" hidden>...</div>

.myoldext-label { width: 30%; white-space: nowrap; }

Zwei Tipps aus diesem Beispiel:

• Aus display: none wird hidden. Das Attribut hidden ist kein CSS, die Policy rührt es also nicht an, und Skripte schalten es mit element.hidden = false um.
• Stellen Sie jeder Klasse den Namen der Erweiterung voran (myoldext-). Kurze Namen wie .label oder .box kollidieren mit den Regeln des Kernels und anderer Erweiterungen.

3. Werte, die eigentlich Daten sind #

Manche Inline-Styles tragen einen Wert aus dem Inhalt: eine Breite in Prozent, eine von einem Redakteur gewählte Farbe, einen Fortschrittsbalken. Diese können keine feste Klasse sein. Möglichkeiten:

4. Das Stylesheet laden #

Registrieren Sie es in settings/design.ini.append.php der Erweiterung:

<?php /*

[StylesheetSettings]
# frontend designs
FrontendCSSFileList[]=myoldext.css
# administration designs
BackendCSSFileList[]=myoldext.css

*/ ?>

CSSFileList[], das alte Erweiterungen verwenden, funktioniert weiterhin, ist aber in der design.ini des Kernels zugunsten der beiden obigen Listen als veraltet markiert. Dateien in diesen Listen werden vom Packer von ezjscore zusammen mit den übrigen Styles der Seite gebündelt und kosten daher keine zusätzliche Anfrage.

Hinweis AdminComponentCSSFileList[] im selben Abschnitt ist die Liste des Kernels für seine eigenen Komponenten-Stylesheets der Administration. Der Kommentar in design.ini sagt es deutlich: „An extension adds its file to BackendCSSFileList, not here.“

5. Die Caches leeren und nachsehen #

php bin/php/ezcache.php --clear-tag=ini
php bin/php/ezcache.php --clear-id=template,template-block

Laden Sie die Seite dann im Browser neu und umgehen Sie dabei seinen Cache (ein harter Reload). Der Link zum gepackten Stylesheet ist in manchen Designs Teil der gecachten Seitenausgabe, deshalb wird auch der Template-Block-Cache geleert.

6. <style>-Blöcke #

Ein <style>-Block in einem Template wandert in dieselbe Datei, wobei seine Selektoren das Präfix erhalten, falls sie es noch nicht haben. Wenn der Block nur auf einer Seite ausgegeben wurde, laden seine Regeln jetzt auf jeder Seite: Für ein paar Zeilen ist das in Ordnung, und es ist der Grund, die Selektoren spezifisch zu halten.

Ihre Arbeit prüfen #

• Die Suchen oben auf dieser Seite finden nichts (oder nur Werte, die Sie bewusst behalten haben, mit einem Kommentar).
• Die Seite sieht im Browser genauso aus wie vorher, bei Administrationsseiten im hellen und im dunklen Modus.
• Die Browser-Konsole zeigt keine Zeilen „Refused to apply inline style“.

Verwandte Seiten #

• Zurück: CSP: javascript:-Links, eval und String-Timer
• Weiter: Von YUI zu expui
• admin4-Styling für Erweiterungsseiten
• Die Administration gestalten
• CSS und JavaScript in einer Erweiterung
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.