CSS/Eigenschaften/contain

Die Eigenschaft contain ermöglicht es einem Autor, anzugeben, dass ein Element und sein Inhalt so weit wie möglich unabhängig vom Rest des Dokumentbaums sind. Dadurch können User-Agents bei der korrekten Darstellung einer Seite mit contain wesentlich stärkere Optimierungen vornehmen, und die Autoren können sicher sein, dass ihre Seite nicht versehentlich aufgrund einer harmlosen Änderung in einen langsamen Codepfad gerät.

• 
• 
• 
• 
• 

Details: caniuse.com

erlaubte Werte	none layout style paint size inline-size Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: * none
anwendbar auf	alle Elemente
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

main {
  contain: inline-size;

}

.

Beachten Sie: Der Wert inline-size schaltet die Begrenzung der Inline-Größe für das Element ein. Dadurch wird verhindert, dass die Inline-Größe des Hauptrahmens direkt von seinem Inhalt abhängt.

Weblinks

• Spezifikation (CSSWG): contain-property CSS Containment Module Level 3
  • 3.1 Inline-Size-Containment
• smashing magazine: Helping Browsers Optimize With The CSS Contain Property von Rachel Andrews

Siehe auch

• CSS/Media Queries/Container Queries