Aktualisiere den Komponentenstatus, wenn eine Auswahl dafür sorgen muss, dass Steuerelemente, Text und Verhalten konsistent bleiben. Überschreibe CSS, wenn du nur die Darstellung änderst. Diese Anleitung zeigt anhand einer lokalen Kachelvorschau in Safari auf dem Mac, wie du beide Ansätze auswählst und überprüfst.

Die Aufgabe für dich als Leserin oder Leser ist konkret: Ändere eine kleine Webseite, die du selbst erstellst, sodass ihre Formsteuerelemente synchron bleiben und sich die dekorative Gestaltung weiterhin leicht bearbeiten lässt. Hier bezeichnet Komponentenstatus ein JavaScript-Objekt, das von der Aktualisierungsfunktion der Seite verwaltet wird. Es wird kein Framework und keine produktspezifische Bearbeitungsfunktion vorausgesetzt.

Welche Änderungen gehören in den Komponentenstatus?

Überlege zunächst, was nach der Änderung übereinstimmen muss. Wenn die Auswahl einer runden Kachel ein Kontrollkästchen, die Vorschau und eine Beschreibung aktualisieren soll, verwalte diese Auswahl zentral im Status. Leite dann alle drei Ausgaben daraus ab. Das ist eine Empfehlung zur Umsetzung: Sie macht den Zusammenhang zwischen einer Auswahl und den angezeigten Ergebnissen ausdrücklich sichtbar.

Eine CSS-Custom-Property wie --tile-size hat eine andere Aufgabe. Sie stellt einen Wert für Deklarationen bereit, die mit var() auf ihn verweisen. Custom Properties nehmen an der Kaskade teil und werden normalerweise vererbt; ihr Verhalten richtet sich nach den CSS-Regeln, auch wenn JavaScript sie setzt. Die Spezifikation für CSS Custom Properties legt diesen Vertrag fest.

Nutze vor der Bearbeitung diese Entscheidungshilfe:

Gewünschte Änderung Bevorzugte Zuständigkeit Begründung in diesem Beispiel
Die Leserin oder der Leser wählt eine runde oder quadratische Kachel Komponentenstatus Kontrollkästchen, Beschreibung und Form müssen übereinstimmen
Die Leserin oder der Leser wählt eine Kachelgröße Komponentenstatus, in CSS gerendert Schieberegler, Beschreibung und Abmessungen verwenden denselben Wert
Alle Kacheln sollen eine andere dekorative Farbe haben Stylesheet-Deklaration Es muss weder ein ausgewählter Wert noch Text aktualisiert werden
Die Vorschau braucht mehr Abstand rundherum Stylesheet-Deklaration Dadurch ändert sich das Layout um die Kachel herum
Für die Untersuchung wird vorübergehend eine andere Größe benötigt Lokale CSS-Überschreibung Es handelt sich um ein visuelles Experiment, das anschließend entfernt wird

Die Unterscheidung hängt von der Aufgabe ab. In dieser Vorschau gehört die Farbe zu CSS, weil sie eine feste Dekoration ist. Wenn du später eine Farbauswahl und eine Beschreibung der gewählten Farbe hinzufügst, verwalte diese Auswahl im Status und rendere ihre visuelle Wirkung. Lege für dieselbe Auswahl nicht zwei unabhängig bearbeitbare Werte an.

Native Steuerelemente haben ebenfalls einen eigenen Status. Lies bei einem Kontrollkästchen die aktuelle Eigenschaft checked aus. Das HTML-Attribut checked legt fest, ob das Kontrollkästchen standardmäßig aktiviert ist, und erfasst keine späteren Änderungen durch Nutzende. Dieser Unterschied wird in MDNs Referenz zur Checkbox-Eigenschaft dokumentiert.

Erstelle auf deinem Mac eine eigenständige Vorschau

Speichere das folgende vollständige Dokument mit einem Nur-Text-Codeeditor als tile-preview.html und öffne es anschließend in Safari. Behalte die Erweiterung .html bei. Das Beispiel enthält sein CSS und JavaScript, verwendet Systemschriften und zeichnet eine einfache geometrische Kachel ohne externe Ressourcen.

Das Stylesheet steht im Kopf des Dokuments. HTML definiert das Element style als Möglichkeit, CSS einzubetten, und unterscheidet eigenständige interne Styles von Stylesheets, die auf zusätzliche Ressourcen verweisen. Da dieses Beispiel eigenständig ist, sind seine Gestaltungseingaben klar ersichtlich. Weitere Informationen findest du in den Abschnitten zu Styles und Skripten im HTML-Standard.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tile preview</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 2rem;
      color: #222;
      background: #fff;
    }
    label { display: block; margin-block: 1rem; }
    .preview { padding: 24px; background: #eee; }
    .tile {
      width: 80px;
      height: 80px;
      border-radius: 0;
      width: var(--tile-size, 80px);
      height: var(--tile-size, 80px);
      border-radius: var(--tile-radius, 0);
      background-color: #547899;
    }
  </style>
</head>
<body>
  <h1>Tile preview</h1>
  <label>
    <input id="round" type="checkbox"> Round tile
  </label>
  <label>
    Tile size
    <input id="size" type="range" min="40" max="160"
           step="1" value="80">
  </label>
  <button id="reset" type="button">Reset choices</button>
  <p id="summary"></p>
  <div class="preview">
    <div id="tile" class="tile" aria-hidden="true"></div>
  </div>
  <script>
    const state = { rounded: false, size: 80 };
    const round = document.getElementById('round');
    const size = document.getElementById('size');
    const summary = document.getElementById('summary');
    const tile = document.getElementById('tile');
    const reset = document.getElementById('reset');

    function render() {
      round.checked = state.rounded;
      size.value = String(state.size);
      tile.style.setProperty('--tile-size', `${state.size}px`);
      tile.style.setProperty('--tile-radius', state.rounded ? '50%' : '0');
      summary.textContent = `Tile A: ${state.rounded ? 'round' : 'square'}, ${state.size}px.`;
    }

    function update(patch) {
      const next = { ...state, ...patch };
      if (typeof next.rounded !== 'boolean' ||
          !Number.isInteger(next.size) ||
          next.size < 40 || next.size > 160) {
        throw new RangeError('Use a boolean and a size from 40 to 160.');
      }
      Object.assign(state, next);
      render();
    }

    round.addEventListener('change', () => {
      update({ rounded: round.checked });
    });
    size.addEventListener('input', () => {
      update({ size: Number(size.value) });
    });
    reset.addEventListener('click', () => {
      update({ rounded: false, size: 80 });
    });
    render();
  </script>
</body>
</html>

Die hier verwendete Styleschnittstelle ist dokumentiert: element.style.setProperty() setzt eine Inline-Deklaration, einschließlich einer Custom Property. Eigenschaftsnamen verwenden die CSS-Schreibweise, beispielsweise --tile-size. Siehe MDNs Referenz zu setProperty.

Wähle Runde Kachel aus, bewege Kachelgröße auf einen anderen Wert und wähle Auswahl zurücksetzen. Die ersten beiden Aktionen sollten sowohl Form als auch Beschreibung aktualisieren; beim Zurücksetzen sollten eine quadratische Form und 80 Pixel wiederhergestellt werden. In diesem Programm ruft die Zuweisung eines Feldes in state allein nicht render() auf. Leite Änderungen über update(), damit Validierung und Rendering gemeinsam erfolgen.

Die Aktualisierungs- und Renderlogik wurde in Node mit simulierten Steuerelementen und einem simulierten Style-Objekt für Anfangswerte, geänderte Werte, ungültige Größen und das Zurücksetzen überprüft. Diese Prüfungen waren erfolgreich; sie belegen nicht die Darstellung im Browser. Verwende die sichtbaren Prüfungen oben, um die Datei in Safari zu überprüfen.

Wann solltest du eine CSS-Deklaration überschreiben?

Für eine dauerhafte dekorative Änderung bearbeitest du das gespeicherte Stylesheet. Ändere zum Beispiel background-color von .tile in eine andere CSS-Farbe oder passe den Abstand von .preview an. In diesem Programm muss für keine der Änderungen ein neues Statusfeld angelegt werden, da keine davon eine ausgewählte Option darstellt.

Für ein vorübergehendes Experiment aktiviere den Safari-Inspektor über Safari → Einstellungen… → Erweitert → Webentwickler-Funktionen anzeigen. Öffne Entwickler → Web-Inspector einblenden oder drücke Option-Befehl-I. Dies sind die dokumentierten Schritte für den Mac im Inspektor-Leitfaden von WebKit.

Öffne das Beispiel und führe in der Konsole das folgende vollständige Code-Snippet aus. Es ändert vorübergehend die Farbe der Kachel und stellt eine Funktion bereit, mit der diese Überschreibung wieder entfernt wird:

const previewTile = document.getElementById('tile');
if (!previewTile) throw new Error('Open tile-preview.html first.');
previewTile.style.setProperty('background-color', '#8069a6');
function restoreTileColor() {
  previewTile.style.removeProperty('background-color');
}
// Run restoreTileColor() when finished comparing colors.

Wenn du diese Inline-Deklaration entfernst, bestimmt die verbleibende Kaskade wieder die Farbe. Die Farbangabe im Stylesheet wird dadurch nicht gelöscht. Die Methode zum Entfernen wird in MDNs Referenz zu removeProperty erläutert. Damit die gewählte Farbe in diesem Beispiel auch nach einem Neuladen erhalten bleibt, bearbeite und speichere den CSS-Quelltext.

Verändere Werte, die der Renderer verwaltet, nicht durch vorübergehende Überschreibungen. Wenn du --tile-size manuell änderst, zeigt die Beschreibung weiterhin den Statuswert an, und der nächste Aufruf von render() setzt dein Experiment zurück. Ändere die Größe über das Steuerelement oder die Aktualisierungsfunktion, wenn die ganze Komponente denselben Wert anzeigen soll.

Warum scheint eine Überschreibung manchmal wirkungslos zu sein?

Überprüfe zuerst, auf welchem Weg der Wert verwendet wird, bevor du die Selektorspezifität erhöhst. Eine Deklaration kann gültig sein und trotzdem in der Kaskade verlieren. Oder sie zielt auf eine Custom Property, die von der gewinnenden Deklaration nicht mehr verwendet wird.

  1. Prüfe das Ziel. Vergewissere dich, dass du das Element ausgewählt hast, das die Form anzeigt.
  2. Prüfe die Eingabe. Im Beispiel muss die Größe eine ganze Zahl zwischen 40 und 160 sein. Ungültige Aktualisierungen lösen einen Fehler aus, bevor sich der Status ändert.
  3. Prüfe die Verwendung. Die Abmessungen der Kachel verwenden var(--tile-size). Eine wirksame direkte Deklaration von width kann diesen Wert für die Breite umgehen, während die Höhe weiterhin von ihm abhängt.
  4. Prüfe den Vorrang. Vergleiche die anwendbaren Deklarationen, ihre Wichtigkeit, Ebenen und Spezifität.
  5. Prüfe die nächste Interaktion. Wenn die Änderung verschwindet, nachdem du ein Steuerelement bewegt hast, überprüfe, was render() schreibt.

Normale Inline-Deklarationen haben Vorrang vor normalen Regeln in Autoren-Stylesheets. Wichtigkeit, Animationen und Übergänge wirken sich jedoch auf die umfassendere Reihenfolge aus. Eine später platzierte Deklaration gewinnt nicht automatisch, und ein spezifischerer Selektor löst nicht jeden Konflikt. MDNs Leitfaden zur Kaskade beschreibt diese Bedingungen.

Unterscheide außerdem zwischen Inline-Werten und aufgelösten Werten. element.style stellt Inline-Styles bereit. Ein leerer Inline-Wert bedeutet also nicht, dass das Element keine Styles hat. getComputedStyle() liest aufgelöste Werte aus, nachdem die aktiven Stylesheets angewendet wurden. Siehe MDNs Referenz zu style und die Referenz zu getComputedStyle.

Führe das folgende vollständige Diagnose-Snippet in der Konsole der Beispielseite aus:

const inspectedTile = document.getElementById('tile');
if (!inspectedTile) throw new Error('Open tile-preview.html first.');
console.table({
  inlineSizeToken: inspectedTile.style.getPropertyValue('--tile-size'),
  inlineWidth: inspectedTile.style.getPropertyValue('width'),
  resolvedWidth: getComputedStyle(inspectedTile).width,
  resolvedHeight: getComputedStyle(inspectedTile).height
});

Unmittelbar nach dem Öffnen des unveränderten Beispiels werden als erwartete Werte ein Inline-Größen-Token von 80px, eine leere Inline-Breite und aufgelöste Abmessungen von 80px angezeigt. Daran sieht man, wie eine Inline-Custom-Property eine Stylesheet-Deklaration mit einem Wert versorgen kann, ohne eine Inline-Deklaration von width anzulegen.

Welche Einschränkungen für Browser und Ressourcen sind wichtig?

Laut MDN sind CSS Custom Properties seit April 2017 in allen gängigen Browsern verfügbar. Das belegt nicht die Unterstützung in jedem älteren Browser. Das Beispiel enthält gewöhnliche Deklarationen für Abmessungen vor den Deklarationen mit var(), damit die Kachel auch ohne Custom-Property-Unterstützung statisch dargestellt wird. Siehe MDNs Referenz zu Custom Properties.

Der Fallback innerhalb von var(--tile-size, 80px) bietet keine Kompatibilität mit Browsern, die Custom Properties nicht interpretieren können. Er validiert auch nicht jeden übergebenen Token: Ein definierter Wert wie blue wird nicht allein durch einen vorhandenen Fallback zu einer gültigen Breite. Diese Einschränkungen werden in MDNs Leitfaden zu Custom Properties erläutert.

Falls ein älterer Zielbrowser Custom Properties nicht unterstützt, besteht die geeignete Alternative darin, den Renderer so zu ändern, dass er mit setProperty() gewöhnliche Inline-Deklarationen für width, height und border-radius schreibt. Behalte dieselbe Statusvalidierung und Synchronisierung der Steuerelemente bei. Dadurch ändert sich der Rendering-Vertrag. Entferne daher konkurrierende Schreibvorgänge des Renderers und überprüfe den Zielbrowser, statt von identischer Unterstützung auszugehen.

Für diese lokale Vorschau ist die Wahl klar: Verwende den Status für Form- und Größenauswahlen, rendere sie über eine kleine Gruppe von CSS-Eingaben und lasse dekorative Gestaltung im Stylesheet. Teste nach jeder Änderung eine Interaktion mit einem Steuerelement und das Zurücksetzen. Vorschau, Steuerelemente und Beschreibung sollten weiterhin dieselben ausgewählten Werte wiedergeben.

Quellen