Kaskadenschichten

Neues Mitglied von CSS: @Layer

Im CSS -Feld ist eine neue Funktion aufgetreten: @layer . Dies ist Miriam Suzanne zu verdanken, die eine Schlüsselrolle bei der Beeinflussung der CSS -Entwicklung spielte. Ich habe schon einmal von dieser Funktion gehört, aber sie taucht in einem experimentellen Browser auf.

Bramus schrieb einen wunderbaren Artikel, der diese Funktion ausführlich untersucht:

Die Entstehung von @layer bietet uns Entwicklern mehr Werkzeuge zur Kontrolle von Kaskadenstilblättern. Was an @layer wirklich mächtig ist, ist seine einzigartige Position im Kaskadierungsstilblatt: Vor der Selektorspezifität und der Reihenfolge des Auftretens. Aus diesem Grund müssen wir uns weder um die Selektorspezifität der in anderen Ebenen verwendeten CSS noch um die Reihenfolge kümmern, in der CSS in diese Ebenen geladen wird - dies ist sehr nützlich für große Teams oder beim Laden von CSS von Drittanbietern.

Bramus van Damme , „Die Zukunft von CSS: Layer (CSS@Layer)*“

(Der mutige Teil wird im Originaltext betont)

Der Schlüssel ist: Dies ist eine neue Funktion, die die Priorität der Selektoren beeinflusst. Dies erfordert, dass wir unser Verständnis von CSS neu einstellen, da @layer ein völlig neuer (und leistungsfähiger) Mechanismus ist, der den Stil der tatsächlichen Anwendung bestimmt.

Ich sage, es ist mächtig, weil der Stil "höherer Schicht" traditionell stärkere Selektoren schlagen kann, auch wenn die Selektoren in dieser Ebene selbst schwächer sind.

 /* Erster Stock*//
@Layer Base-Layer {
  Körper#foo {
    Hintergrund: Tan;
  }
}
/* Höheres Level, also gewinnen, auch wenn der Selektor schwach ist*/
@Layer Theme-Layer {
  Body.foo {
    Hintergrund: #eee;
  }
}

/* Beachten! Unlagerte Stile sind leistungsfähiger als Schichtstile, auch wenn der Selektor schwächer ist*/
Körper {
  Hintergrund: Rot;
}

Da das untere Segment von CSS überhaupt keine Schicht platziert wird, gewinnt er, auch wenn der Selektor schwach ist.

Und Sie sind nicht auf eine Ebene beschränkt. Sie können sie so definieren und verwenden, wie Sie möchten.

 @Layer Reset; /* Erstellen Sie die erste Ebene "Reset"* /
@Layer Base; /* Erstellen Sie eine zweite Ebene mit dem Namen "Basis"* /
@Layer Thema; /* Erstellen Sie eine dritte Ebene mit dem Namen "Thema"* / /
@Layer Utilities; /* Erstellen Sie eine vierte Ebene namens "Dienstprogramme"* /
/ * Oder @Layer Reset, Basis, Thema, Dienstprogramme;


@layer Reset { /* an die Ebene "Reset"* /anhängen
  / * ... */
}

@Layer Thema { /* an die Ebene "Thema" anhängen* / /
  / * ... */
}

@Layer Base { /* an die Ebene "Base"* /anhängen
  / * ... */
}

@Layer Thema { /* an die Ebene "Thema" anhängen* / /
  / * ... */
}

Das ist wirklich schockierend.

Wie werden wir es benutzen?

Ich frage mich, ob ein gemeinsames Muster ...

1. Schichten Sie alles so, dass Priorität sehr klar ist. Vielleicht ist nur unhierarchische CSS für eine supermächtige Berichterstattung erlaubt, aber im Idealfall sollte auch eine Schicht auf hoher Ebene sein.
2. Als niedrigste Ebene zurücksetzen.
3. Verwenden Sie Inhalte von Drittanbietern als mittlere Schicht.
4. Nehmen Sie alles, was das Team als oberste Ebene schreibt.

Sie müssen sich keine Sorgen machen, dass Sie Platz zwischen den Schichten lassen ( z-index

Die Zeit wird es sagen.

debuggen

Ich möchte, dass die Entwickler -Tools Hierarchien sehr klar ausdrücken, da es im Laufe der Zeit möglicherweise ernsthafte Verwirrung gibt, wenn wir sehen, dass die Selektoren, die aufgrund des Gewinns der Hierarchieposition schwächer aussehen.

Browserunterstützung

Es scheint, dass Caniuse dieses Problem bemerkt hat!

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Desktop

Mobile/Tablet

erneuern

Diese sind sehr neu (zum Zeitpunkt des Schreibens), sodass Instabilität erwartet werden kann. Es sieht so aus, als hätten die Leute am 6. Oktober 2021 entschieden, dass der unschonte Stil tatsächlich der stärkste und nicht der schwächste ist. Ich habe versucht, den Artikel zu aktualisieren, um dies zu zeigen.

Das obige ist der detaillierte Inhalt vonKaskadenschichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!