CSS-Kaskade erklären
Gewinnende Farbdeklaration und entscheidenden Kaskadenschritt ermitteln.
- Läuft im Browser
- Kein Upload
- Vor dem Download prüfen
Eingaben bleiben in diesem Tab und werden weder hochgeladen noch automatisch gespeichert. Optionale aggregierte Nutzungszahlen und grobe Verarbeitungsdiagnosen werden nur nach Einwilligung gesendet, ohne Eingabeinhalte oder Dateinamen. Leeren oder Schließen verwirft Eingaben; benötigte Ergebnisse vorher speichern.
Ressourcenlimits
Farbkaskade für zusammengesetzte Selektoren: Element/ID/Klassen und is/where/not-Listen. Bis 64 Regeln und 16 geordnete flache Ebenen. Vergleich: Ursprung, important, inline, Ebene, ABC, Quellreihenfolge. Important kehrt Ebenen-/Ursprungspriorität um. Keine Vorfahren, Attribute, Zustände, scope, Vererbung, Animation, Transition oder revert. Begrenzte lokale Vorschau, keine universelle Browser-/Layoutgarantie. Eingaben werden nicht ausgeführt. HTML und CSS zusammen herunterladen. Zeitlimit: 8 Sekunden.
So geht’s
- Beispiel konfigurieren
Beschreibe Tag, ID und Klassen des Ziels. Ergänze dann Regeln für die Farbe mit Ursprung, Wichtigkeit, Kennzeichnung für Inline und Ebene. Halte die Reihenfolge im Quelltext bewusst fest.
- Vor Verwendung prüfen
Ziel p#note.note: Die normalen Regeln des Autors .note { color: #0000ff } und #note { color: #ff0000 } in derselben Ebene ergeben Rot, denn die Spezifität 1,0,0 schlägt 0,1,0.
- Geprüftes Ergebnis exportieren
Lies die sortierten Kandidaten und die Farbe, die gewinnt. Ändere jeweils nur eine Priorität und vergleiche dann die sichere lokale Vorschau mit dem heruntergeladenen HTML und CSS.
Fragen und Grenzen
Was bedeutet dieses Ergebnis?
Die Spezifität ABC vergleicht IDs, Klassen und Typen erst nach den höheren Prioritäten der Kaskade. !important ändert die Priorität und kehrt die Reihenfolge von Ebenen und Ursprung um.
Wie behebe ich abgewiesene oder fehlende Eingaben?
Nicht unterstützte Vorfahren, Attribute oder Zustände werden nicht heimlich simuliert. Nutze die unterstützten zusammengesetzten Selektoren und Listen mit is, where und not. Korrigiere die Meldungen des Parsers.
Wo sind die Grenzen dieses Werkzeugs?
Das ist eine begrenzte Kaskade für Farben: bis zu 64 Regeln und 16 flache, geordnete Ebenen, mit einem Watchdog von 8 s. Es gibt keine Vererbung, kein scope, keine Animation, keine transition und kein revert. Es ist keine vollständige Engine für das Layout im Browser.