Heute geht es um CSS-Layer! Wir kennen ja CSS Regeln. Oft formulieren wir diese auf Basis der Specificity oder Spezifität. Das funktioniert zwar, führt aber in der Praxis aber häufig zu nicht allzu wartbaren CSS-Selektoren.
Mit den CSS-Layern gibt es nun einen Mechanismus der auf Basis der Importance greift. Ich kann also semantisch schon eine importance-Reihenfolge definieren.
Als Kirsche bieten CSS-Layer auch die Möglichkeit, Third-Party CSS ein solches Layer zuzuweisen, ich habe also eine viel bessere Kontrolle! Wir erklären euch alles nötige in 5 Minuten!
Werte Zuseher:in!
CS-Slayer! Also eine Person, die das Computer-Science Studium so richtig gerockt hat!
Darum soll es heute nicht gehen!
Es geht aber um CSS-Layer!
CSS-Layer sind ein neuer Mechanismus, der es dem Web-Autor ermöglicht, das Styling semantisch und nach importance zu strukturieren. Bisher war man ja häufig auf Ebene der Specificity unterwegs, was aber nicht immer schön war.
Erfahrt in dieser Folge Papperlapapp - Spaß mit Klammern! in 5 Minuten, an einem kleinen Beispiel, was diese neue API syntaktisch und semantisch so alles auf dem Kasten hat.
Schaut doch mal rein! Wir sind gespannt was ihr so denkt!
Wie sieht das bei euch aus? Habt ihr schon von CSS-Layer-API gehört? Habt ihr die schon eingesetzt? Wie steht ihr dazu? Braucht ihr das? Habt ihr das vermisst? Und was haltet ihr von der Kirsche?
Schreibt es in die Kommentare! Wir sind sehr gespannt und wir freuen uns von euch zu hören!
Liken, abonnieren, Glocke drücken nicht vergessen!
In diesem Sinne: Papperlapapp - Spaß mit Klammern!
Vielen Dank fürs Zuschauen, viel Spaß und wir freuen uns sehr auf euer Feedback!
Stefan und Holger
Links:
Die CSS Layer API: https://developer.mozilla.org/en-US/d...
Alle 5 Minuten-Folgen: • Die HTML Dialog API ...in 5 Minuten
Die CSS Layer Folge mit mehr Zeit: • Wie CSS Layer das Auflösen von CSS Konflik...
Kann ich das schon verwenden? https://caniuse.com/css-cascade-layers
▬ Inhalt des Videos ▬▬▬▬▬▬▬▬▬▬
00:00 Begrüßung
00:06 Das Thema der Folge: "CSS-Layer".
00:30 Importance und Specificity
02:21 CSS Layer auf Ebene der Importance
04:43 Diskussion und Fazit!