Die neue CSS-Funktion enthält Probleme beim Neuzeichnen und Neuanordnen von Steuerelementen.

Bevor die neue CSS-Eigenschaft „contain“ vorgestellt wird, müssen die Leser wissen, was Seitenneuzeichnung und -neuanordnung sind.

Ich habe festgestellt, dass ich dies bereits viele Male beschrieben habe. Sie können sich den richtigen Ansatz zur Verbesserung der CSS-Animationsleistung ansehen [1].

OK, kommen wir zum Hauptthema dieses Artikels.

enthalten warum?

Mit der Eigenschaft „contain“ können wir ein bestimmtes DOM-Element und seine untergeordneten Elemente angeben, sodass sie unabhängig von der gesamten DOM-Baumstruktur sein können. Der Zweck besteht darin, dem Browser zu ermöglichen, nur einige Elemente neu zu zeichnen und neu anzuordnen, anstatt jedes Mal die gesamte Seite.

Mit der Eigenschaft „contain“ kann ein Autor angeben, dass ein Element und sein Inhalt so weit wie möglich unabhängig vom Rest des Dokumentbaums sind. Dadurch kann der Browser Layout, Stil, Farbe, Größe oder eine beliebige Kombination davon für einen begrenzten Bereich des DOM und nicht für die gesamte Seite neu berechnen. Die Syntax von „contain“

Schauen Sie sich die Syntax an:

{ 
  /* Keine Layouteindämmung. */ 
  enthalten: keine; 
  /* Aktivieren Sie die Eindämmung für Layout, Stil, Farbe und Größe. */ 
  enthalten: streng; 
  /* Aktivieren Sie die Eindämmung für Layout, Stil und Farbe. */ 
  enthalten: Inhalt; 
  /* Größenbegrenzung für ein Element aktivieren. */ 
  enthalten: Größe; 
  /* Layout-Eindämmung für ein Element aktivieren. */ 
  enthalten: Layout; 
  /* Stilbeschränkung für ein Element aktivieren. */ 
  enthalten: Stil; 
  /* Schalte die Farbeindämmung für ein Element ein. */ 
  enthalten: Farbe; 
}

Abgesehen von „Keine“ gibt es noch 6 weitere mögliche Werte. Sehen wir sie uns einzeln an.

enthalten: Größe

enthalten: Größe: Die Darstellung eines Elements mit festgelegter enthalten: Größe wird nicht durch den Inhalt seiner untergeordneten Elemente beeinflusst.

Der Wert aktiviert die Größenbegrenzung für das Element. Dadurch wird sichergestellt, dass das enthaltene Feld angeordnet werden kann, ohne dass seine Nachkommen untersucht werden müssen.

Als ich diese Definition zum ersten Mal sah, war ich auch verwirrt. Es war schwierig, nur anhand der Definition zu verstehen, was sie bedeutet. Muss noch geübt werden:

Nehmen wir an, wir haben die folgende einfache Struktur:

<div Klasse="Container"> 
    
</div>

.container { 
    Breite: 300px; 
    Polsterung: 10px; 
    Rand: 1px durchgehend rot; 
} 
 
P { 
    Rand: 1px durchgezogen #333; 
    Rand: 5px; 
    Schriftgröße: 14px; 
}

Und mit Hilfe von jQuery wird bei jedem Klick eine <p>Coco</p>-Struktur zum Container hinzugefügt:

$('.container').on('click', e => { 
    $('.container').anhängen('<p>Kokosnuss</p>') 
})

Dann erhalten Sie folgendes Ergebnis:

Wie Sie sehen, nimmt die Höhe des Containers mit der Anzahl der Elemente zu, was normal ist.

An diesem Punkt fügen wir dem Container .container eine contain: size hinzu und die obige Anweisung wird angezeigt: Die Darstellung des Elements mit festgelegter contain: size wird nicht durch den Inhalt seiner untergeordneten Elemente beeinflusst.

.container { 
    Breite: 300px; 
    Polsterung: 10px; 
    Rand: 1px durchgehend rot; 
+ enthalten: Größe 
}

Und schauen Sie, was passiert:

Normalerweise wird die Höhe des übergeordneten Elements durch die Vergrößerung der untergeordneten Elemente vergrößert. Nun wirken sich die Änderungen der untergeordneten Elemente nicht mehr auf das Stillayout des übergeordneten Elements aus. Dies ist die Rolle von contain: size.

enthalten: Stil

Lassen Sie uns als Nächstes über „contain: style“, „contain: layout“ und „contain: paint“ sprechen. Sehen wir uns zunächst den Stil „contain:“ an.

Zum Zeitpunkt der Erstellung dieses Artikels wurde der Stil „contain:“ entfernt.

CSS Containment Module Level 1[2]: Entfernen Sie das gefährdete Feature „Style Containment“ aus dieser Spezifikation und verschieben Sie es auf Level 2.

Nun, die offizielle Erklärung ist, dass es aufgrund bestimmter Risiken vorübergehend entfernt wurde. Es kann in der zweiten Version der Spezifikation neu definiert werden, sodass dieses Attribut vorerst beiseite gelegt wird.

enthalten: Farbe

contain: paint: Elemente mit contain: paint legen Layoutbeschränkungen fest, was bedeutet, dass der Benutzeragent darüber informiert wird, dass die untergeordneten Elemente dieses Elements nicht außerhalb der Grenzen dieses Elements angezeigt werden. Wenn das Element also nicht auf dem Bildschirm angezeigt wird oder anderweitig auf unsichtbar eingestellt ist, sind seine untergeordneten Elemente ebenfalls garantiert unsichtbar und werden nicht gerendert.

Dieser Wert aktiviert die Paint-Containment für das Element. Dadurch wird sichergestellt, dass die Nachkommen des umgebenden Felds nicht außerhalb seiner Grenzen angezeigt werden. Wenn also ein Element außerhalb des Bildschirms oder anderweitig nicht sichtbar ist, sind seine Nachkommen ebenfalls garantiert nicht sichtbar.

Dies ist etwas einfacher zu verstehen. Schauen wir uns die erste Funktion an:

Die untergeordneten Elemente eines Elements mit dem Satz „contain: paint“ werden nicht außerhalb der Grenzen dieses Elements angezeigt. Die untergeordneten Elemente eines Elements mit dem Satz „contain: paint“ werden nicht außerhalb der Grenzen dieses Elements angezeigt.

Diese Funktion ähnelt etwas der Funktion „overflow: hidden“, die dem Benutzeragenten explizit mitteilt, dass der Inhalt des untergeordneten Elements die Grenze des Elements nicht überschreiten wird, sodass der überschüssige Teil nicht gerendert werden muss.

Ein einfaches Beispiel unter der Annahme, dass die Elementstruktur wie folgt ist:

<div Klasse="Container"> 
    <p>Kokosnuss</p> 
</div>

.container { 
    enthalten: Farbe; 
    Rand: 1px durchgehend rot; 
} 
 
P{ 
    links: -100px; 
}

Schauen wir uns an, was passiert, wenn contain: paint gesetzt ist und was nicht:

CodePen Demo -- enthalten: Paint Demo[3]

Elemente mit „contain: paint set“ werden nicht gerendert, wenn sie sich außerhalb des Bildschirms befinden.

Durch die Verwendung von „contain: paint“ ignoriert der Benutzeragent das Rendern von Elementen, wenn diese sich außerhalb des Bildschirms befinden, sodass andere Inhalte schneller gerendert werden können.

enthalten: Layout

contain: layout: Elemente mit contain: layout legen Layoutbeschränkungen fest, was bedeutet, dass der Benutzeragent darüber informiert wird, dass Stiländerungen innerhalb dieses Elements keine Stiländerungen außerhalb des Elements bewirken und umgekehrt.

Dieser Wert aktiviert die Layout-Eindämmung für das Element. Dadurch wird sichergestellt, dass die enthaltene Box für Layoutzwecke völlig undurchsichtig ist; nichts von außen kann das interne Layout beeinflussen und umgekehrt.

Durch die Aktivierung von „contain: layout“ lässt sich die Anzahl der Elemente, die pro Frame gerendert werden müssen, potenziell auf eine Handvoll reduzieren, anstatt das gesamte Dokument erneut zu rendern. Dies erspart dem Browser viel unnötige Arbeit und verbessert die Leistung deutlich.

Mit „contain:layout“ können Entwickler angeben, dass Änderungen an den Nachkommen dieses Elements keine Auswirkungen auf das Layout äußerer Elemente haben und umgekehrt.

Daher berechnet der Browser nur die Position des inneren Elements, wenn es geändert wird, während der Rest des DOM unverändert bleibt. Dies bedeutet, dass der Layoutprozess in der Frame-Rendering-Pipeline schneller abläuft.

Probleme

Die Beschreibung ist schön, aber im eigentlichen Demo-Test (Stand 27.04.2021, Chrome 90.0.4430.85) konnte durch die alleinige Verwendung von contain:layout die oben genannten schönen Ergebnisse nicht bestätigt werden.

Bei einem angegebenen Element mit festgelegtem „contain: layout“ wirken sich alle Änderungen an den Nachkommen dieses Elements weiterhin auf das Layout aller externen Elemente aus. Durch Klicken auf das rote Kästchen wird dem Container ein <p>Coco<p>-Element hinzugefügt:

Der einfache Code lautet wie folgt:

<div Klasse="Container"> 
    <p>Kokosnuss</p> 
    ... 
</div> 
<div Klasse="g-test"></div>

html, 
Körper { 
    Breite: 100 %; 
    Höhe: 100%; 
    Anzeige: Flex; 
    Inhalt ausrichten: zentriert; 
    Elemente ausrichten: zentrieren; 
    Flex-Richtung: Spalte; 
    Lücke: 10px; 
} 
 
.container { 
    Breite: 150px; 
    Polsterung: 10px; 
    enthalten: Layout; 
    Rand: 1px durchgehend rot; 
} 
 
.g-test { 
    Breite: 150px; 
    Höhe: 150px; 
    Rand: 1px durchgehend grün; 
}

CodePen Demo -- enthalten: Layout-Demo[4]

Kann ich verwenden -- CSS-Contain

Seit dem 27.04.2021 ist die CSS-Contain-Kompatibilität für Can i Use bereits verfügbar:

Verweise

CSS Containment Modul Stufe 1[5]

CSS-Eindämmung[6]

CSS-Eindämmung in Chrome 52[7]

Verweise

[1] Der richtige Ansatz zur Verbesserung der CSS-Animationsleistung:

https://github.com/chokcoco/iCSS/issues/11

[2]CSS-Eindämmungsmodul Stufe 1:

https://www.w3.org/TR/css-contain-1/

[3] CodePen Demo -- enthalten: paint Demo:

https://codepen.io/Chokcoco/pen/KKwmgmN

[4]CodePen Demo -- enthalten: Layout Demo:

https://codepen.io/Chokcoco/pen/rNjRELL

[5]CSS-Eindämmungsmodul Stufe 1:

https://www.w3.org/TR/css-contain-1/

[6]CSS-Eindämmung:

https://justmarkup.com/articles/2016-04-05-css-containment/

[7]CSS-Eindämmung in Chrome 52:

https://developers.google.com/web/updates/2016/06/css-containment

[8] Github -- iCSS:

https://github.com/chokcoco/iCSS

Dies ist das Ende dieses Artikels über die neue CSS-Funktion zur Steuerung des Neuzeichnens und Neuanordnens der Seite. Weitere relevante Inhalte zur Steuerung des Neuzeichnens und Neuanordnens der Seite durch CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!