Kein Inline-CSS #

Diese Seite ist für Designer, die Templates schreiben. Die Regel des Projekts ist kurz: kein <style>-Block und kein style=""-Attribut in einem Template. Alles CSS lebt im Ordner stylesheets/ des Designs und wird über ezjscore geladen. Die Seite erklärt, warum, und wie Sie mit den Fällen umgehen, die Inline-CSS zu brauchen scheinen.

Inhalt #

1. Warum
2. Wohin das CSS gehört
3. Werte pro Element
4. Stile, die aus Inhalten kommen
5. Inline-CSS finden

Warum #

• Eine Content Security Policy mit style-src 'self' blockiert Inline-Stile (CSP-sicheres Design).
• Inline-CSS wird nicht gepackt oder zwischengespeichert und mit jeder Seite erneut gesendet.
• Kopien laufen auseinander: Die Administration hatte einmal 55 Templates mit eigenen <style>-Blöcken, vier verschiedene Akzentfarben und Dutzende weiße Karten, die den dunklen Modus ignorierten (die Geschichte steht in Gestaltung der Administration, „Why“).
• Inline-Stile schlagen Regeln aus Stylesheets, sodass ein Theme das Element nicht mehr neu gestalten kann.

Wohin das CSS gehört #

Werte pro Element #

Ein Wert, der wirklich zu einem Element gehört (ein Fortschritt in Prozent, die Höhe eines Balkens, eine von einem Redakteur gewählte Farbe):

• Eine Klasse aus einem festen Satz. admin4 hat .a4-pct-0 bis .a4-pct-100 in Schritten von 4 für Anzeigen und Balken:

  <span class="a4-meter"><span class="a4-pct-{$percent|div( 4 )|round|mul( 4 )}"></span></span>

• Ein data-*-Attribut, das ein Skript in eine CSS-Custom-Property umwandelt:

  <div class="chart-bar" data-value="{$value|wash}"></div>

  document.querySelectorAll('.chart-bar').forEach(function (el) {
    el.style.setProperty('--value', el.dataset.value);   /* set from a script file: allowed by style-src 'self' */
  });

  .chart-bar { inline-size: calc(var(--value) * 1%); }

  Eine Stileigenschaft aus einer Skriptdatei zu setzen, ist kein Inline-Stilattribut im Markup und wird von einer Richtlinie ohne 'unsafe-inline' erlaubt.

Stile, die aus Inhalten kommen #

Rich Text kann von Redakteuren gewählte Ausrichtungen oder Klassen enthalten; die Datentyp-Templates machen daraus Klassen, nicht style="". Behalten Sie das in Overrides von ezxmltags/*.tpl bei. Beachten Sie, dass die CSP-Seite empfiehlt, Websites mit von Inhalten erzeugtem style="" (eingebettete Player, alter Rich Text) mit Mode=report-only zu beginnen.

Inline-CSS finden #

grep -rn -E "<style|style=\"" extension/mytheme/design --include=*.tpl

Bei Admin-Designs schlägt tests/tests/design/AdminStylingRulesTest.php bei jedem Vorkommen fehl; die einzige Ausnahme ist design/admin/templates/pagelayout.tpl für die Spaltenbreiten des Editors, bevor die Seite gezeichnet wird, im Test dokumentiert (Der Test der Admin-Gestaltungsregeln).

Verwandte Seiten #

• Kein Inline-JavaScript
• Stylesheets laden
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.