Περιέχει - CSS-Κόλπα

Η containιδιότητα στο CSS υποδεικνύει στο πρόγραμμα περιήγησης ότι το στοιχείο και οι απόγονοί του θεωρούνται όσο το δυνατόν περισσότερο ανεξάρτητα από το δέντρο εγγράφων. Αυτό παρέχει δυνητικά οφέλη απόδοσης με υπολογισμούς σε διάταξη, στυλ, χρώμα, μέγεθος ή οποιονδήποτε συνδυασμό για περιορισμένη περιοχή του DOM και όχι για ολόκληρη τη σελίδα.

Η ιδιότητα έχει πέντε τυπικές τιμές και δύο στενές τιμές που συνδυάζουν παραλλαγές των τυπικών τιμών. Κάθε τιμή έχει κάποια μοναδικά και κοινόχρηστα οφέλη ανάλογα με το πλαίσιο του στοιχείου που τα εφαρμόζει.

Η τυπική χρήση αυτής της ιδιότητας είναι ένα στοιχείο που περιέχει περιεχόμενο κάποιου τύπου. Σκεφτείτε ένα widget που αποδίδει τα εισερχόμενα δεδομένα που αλλάζουν τη διάταξη και τα γραφικά των απογόνων του στοιχείου. Ένα άλλο στοιχείο που πρέπει να ληφθεί υπόψη είναι εκείνο που περιέχει τα αποτελέσματα δεδομένων τρίτων, όπως μια διαφήμιση banner, όπου τα οφέλη του περιορισμού μας επιτρέπουν είτε να μη δίνουμε προτεραιότητα στη ζωγραφική συγκεκριμένου περιεχομένου, πώς να χειριστούμε το μέγεθος του περιεχομένου που λαμβάνεται ή να προσδιορίσουμε εάν το περιεχόμενο θα πρέπει ακόμη και να είναι ορατό. Ένας κυρίως στατικός ιστότοπος, από την άλλη πλευρά, θα έχει μικρό όφελος εκτός από την πρώτη διάταξη και θα χρωματίζει στην οθόνη κατά τη φόρτωση της σελίδας.

Σύνταξη

div ( contain: none | strict | content | ( size || layout || style || paint ); )

div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */ 
 contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )

Τιμές ιδιοκτησίας

Διάταξη

Η layoutτιμή περιορισμού ενημερώνει το πρόγραμμα περιήγησης ότι κανένας από τους απογόνους του στοιχείου δεν επηρεάζει άλλα στοιχεία στη σελίδα, ούτε αυτά τα άλλα στοιχεία επηρεάζουν τους απογόνους του περιεχομένου. Αυτό επιτρέπει στο πρόγραμμα περιήγησης να μειώσει δυνητικά τον απαραίτητο αριθμό υπολογισμών κατά τη δημιουργία της διάταξης της σελίδας

Ένα άλλο πλεονέκτημα είναι ότι εάν το περιεχόμενο που περιέχεται είναι εκτός οθόνης ή αποκρύπτεται με κάποιο τρόπο, τότε το πρόγραμμα περιήγησης μπορεί να καθυστερήσει ή να μεταφέρει τους σχετικούς υπολογισμούς σε χαμηλότερη προτεραιότητα. Ένα παράδειγμα αυτού είναι ένα περιορισμένο στοιχείο που δεν φαίνεται στο τέλος ενός στοιχείου μπλοκ και η αρχή αυτού του στοιχείου μπλοκ είναι ορατή.

Ένα στοιχείο με layoutπεριορισμό γίνεται ένα κουτί που περιέχει για τοποθετημένους απογόνους - όπως στοιχεία με απόλυτη τοποθέτηση. Το στοιχείο λαμβάνει ένα νέο περιβάλλον στοίβαξης σε σχέση με τη σελίδα και η z-indeιδιότητα x μπορεί να χρησιμοποιηθεί. Αν και, οι κατευθυντικές ιδιότητες, όπως topή left, δεν ισχύουν.

Παρόλο που οι απόγονοι του περιεχόμενου στοιχείου ενδέχεται να μην επηρεάζουν άλλα στοιχεία στη σελίδα, μπορούν ακόμη να επηρεάσουν το στοιχείο που περιέχονται από τους προγόνους τους. Για παράδειγμα, ένας απόγονος μπορεί να προκαλέσει το μέγεθος του περιεχόμενου στοιχείου σε αντίδραση σε αλλαγές. Σε αυτήν την περίπτωση, το περιλαμβανόμενο στοιχείο μπορεί ακόμη να επηρεάσει άλλα στοιχεία στη σελίδα, αλλά οι απόγονοι δεν θα εμπλακούν σε αυτούς τους υπολογισμούς.

Η ακόλουθη επίδειξη παρέχει μια απλή εξήγηση για το τι συμβαίνει κατά την εφαρμογή του layoutπεριορισμού. Όταν κάνετε κλικ σε κάθε ένα από τα επάνω πλαίσια, εφαρμόζεται το περιεχόμενο και τα κόκκινα βέλη θα αλλάξουν εμφάνιση. Η εμφάνιση των κόκκινων βελών υποδηλώνει εάν οι απόγονοι του πλαισίου επηρεάζουν τα άλλα πλαίσια της σελίδας κατά τη διάρκεια των υπολογισμών διάταξης.

Χρώμα

Η paintτιμή περιορισμού ενημερώνει το πρόγραμμα περιήγησης ότι κανένας από τους απογόνους του στοιχείου δεν θα χρωματιστεί έξω από το πλαίσιο περιγράμματος του στοιχείου. Εάν ένα στοιχείο απογόνου είναι τοποθετημένο ώστε να έχει ένα τμήμα του πλαισίου οριοθέτησής του ώστε να περικοπεί από το περιλαμβανόμενο στοιχείο, border-boxτότε αυτό το τμήμα δεν θα βαφτεί. Εάν ένα στοιχείο απογόνου τοποθετείται πλήρως έξω από το περιλαμβανόμενο στοιχείο, border-boxτότε δεν χρωματίζεται καθόλου. Αυτό είναι παρόμοιο με την εφαρμογή overflow: hidden;στο στοιχείο, αλλά χωρίς τα οφέλη της παράλειψης ή της μείωσης των απαιτούμενων υπολογισμών.

Ένα άλλο πλεονέκτημα είναι ότι εάν το περιλαμβανόμενο στοιχείο δεν είναι ορατό με κάποιο τρόπο μέσα στη θύρα προβολής, τότε μπορεί να παραλείψει τους απογόνους του στοιχείου κατά την εκτέλεση υπολογισμών ζωγραφικής. Ένα παράδειγμα αυτού είναι ένα στοιχείο που τοποθετείται έξω από τη σελίδα στα αριστερά της θύρας προβολής. Εάν το περιεχόμενο δεν είναι ορατό, τότε αποτελεί εγγύηση ότι το περιεχόμενό του δεν θα είναι ορατό. Επομένως, δεν απαιτείται να συμμετέχουν σε υπολογισμούς χρωμάτων.

Ένα στοιχείο με τον paintπεριορισμό γίνεται επίσης ένα κουτί περιέχοντος για τοποθετημένους απογόνους - όπως στοιχεία με απόλυτη τοποθέτηση. Το στοιχείο λαμβάνει επίσης ένα νέο περιβάλλον στοίβαξης σε σχέση με τη σελίδα και η z-indexιδιότητα μπορεί να χρησιμοποιηθεί. Αν και, οι κατευθυντικές ιδιότητες, όπως topή left, δεν ισχύουν.

Ένα στοιχείο κύλισης μπορεί να αποφέρει πρόσθετα οφέλη τοποθετώντας τους απογόνους του σε ένα νέο στρώμα βαφής που μπορεί να βοηθήσει στην απόδοση κύλισης. Κανονικά, τα στοιχεία κύλισης μπορούν να προκαλέσουν συνεχείς επαναβαφές καθώς οι απόγονοι εμφανίζονται και εξαφανίζονται κατά την κύλιση. Ένα στοιχείο κύλισης με τη συγκράτηση χρωμάτων μπορεί δυνητικά να παραλείψει αυτήν τη συνεχή βαφή των απογόνων κύλισης.

Η ακόλουθη επίδειξη παρέχει μια απλή εξήγηση για το τι συμβαίνει κατά την εφαρμογή του paintπεριορισμού. Κάντε κλικ οπουδήποτε για εναλλαγή του περιεχομένου στο μωβ πλαίσιο. Όταν εφαρμόζεται περιορισμός, ορισμένα από τα πράσινα κουτιά αλλάζουν στην εμφάνιση. Η εμφάνιση των πράσινων κουτιών δείχνει πώς είναι βαμμένα ή όχι.

Μέγεθος

Η sizeτιμή περιορισμού ενημερώνει το πρόγραμμα περιήγησης ότι κανένας από τους απογόνους δεν πρέπει να λαμβάνεται υπόψη κατά την εκτέλεση υπολογισμών διάταξης για τη σελίδα. Το περιλαμβανόμενο στοιχείο πρέπει να έχει heightκαι να widthεφαρμόζονται οι ιδιότητες, διαφορετικά θα καταρρεύσει σε τετράγωνο μηδενικών εικονοστοιχείων. Μόνο το ίδιο το στοιχείο πρέπει να ληφθεί υπόψη για υπολογισμούς διάταξης σελίδας, καθώς οι απόγονοι δεν μπορούν να επηρεάσουν το μέγεθος του στοιχείου. Οι απόγονοι του περιεχόμενου στοιχείου παραλείπονται εντελώς σε τέτοιους υπολογισμούς. σαν να μην είχε καθόλου απογόνους.

Για πλήρη οφέλη της βελτιστοποίησης, ο sizeπεριορισμός εφαρμόζεται συνήθως με άλλους τύπους περιορισμού.

Ένα στοιχείο με τον sizeπεριορισμό λαμβάνει ένα νέο περιβάλλον στοίβαξης σε σχέση με τη σελίδα και η z-indexιδιότητα μπορεί να χρησιμοποιηθεί. Αν και, οι κατευθυντικές ιδιότητες, όπως topή left, δεν ισχύουν.

Η παρακάτω επίδειξη παρέχει μια απλή εξήγηση για το τι συμβαίνει όταν sizeεφαρμόζεται περιορισμός. Κάντε κλικ οπουδήποτε για εναλλαγή του περιεχομένου στο μωβ πλαίσιο. Όταν εφαρμόζεται το δοχείο, το μωβ κουτί αλλάζει σε μέγεθος. Από προεπιλογή, το ύψος του μοβ κουτιού ορίζεται από τα παιδιά του, αλλά με περιορισμό το ύψος πρέπει να καθοριστεί. Μόλις εφαρμοστεί ο περιορισμός, οι απόγονοι δεν εμπλέκονται πλέον στους υπολογισμούς διάταξης που σχετίζονται με το μέγεθος.

Στυλ

Η styleτιμή περιορισμού ενημερώνει το πρόγραμμα περιήγησης ότι ορισμένες ιδιότητες CSS, όπως μετρητές και εισαγωγικά, θα περιληφθούν στο στοιχείο που περιέχεται.

Οι ιδιότητες counter-incrementκαι οι counter-setιδιότητες πρέπει να καλύπτονται στο δευτερεύον δέντρο του περιεχομένου. Εάν επεκταθεί έξω από το περιλαμβανόμενο στοιχείο τότε δημιουργείται ένας νέος μετρητής.

Τιμές του ξενοδοχείου περιεχόμενο open-quote, close-quote, no-open-quoteκαι no-close-quoteπρέπει να scoped να υπο-δέντρο της περιλαμβάνονται στοιχείου.

Αυτή η τιμή περιορισμού θεωρείται ότι κινδυνεύει να αφαιρεθεί από τις προδιαγραφές.

Περιεχόμενο

Η contentτιμή περιορισμού είναι ένας συνδυασμός τόσο της διάταξης όσο και των τιμών περιορισμού χρωμάτων. Αυτό είναι το ισοδύναμο της εφαρμογής περιορισμού με αυτόν τον τρόπο:

div ( contain: layout paint; )

Όλα τα πιθανά οφέλη που περιγράφονται παραπάνω για κάθε τιμή θα είναι στη συνέχεια διαθέσιμα στο περιεχόμενο. Αυτός ο περιορισμός θα θεωρείται σχετικά ασφαλής για ευρεία εφαρμογή σε πολλά στοιχεία της σελίδας.

Αυστηρός

Η strictτιμή περιορισμού είναι ένας συνδυασμός των layout, paintκαι sizeοι τιμές συγκράτησης. Αυτό είναι το ισοδύναμο της εφαρμογής περιορισμού με αυτόν τον τρόπο:

div ( contain: layout paint size; )

Όλα τα πιθανά οφέλη που περιγράφονται παραπάνω για κάθε τιμή θα είναι στη συνέχεια διαθέσιμα στο περιεχόμενο.

Ως η «αυστηρότερη» από τις τιμές περιορισμού, αυτή η τιμή θα πρέπει να χρησιμοποιείται με προσοχή. Αυτό οφείλεται στις απαιτήσεις διάστασης που επιβάλλει στο περιεχόμενο στοιχείο. Με αυτές τις απαιτήσεις, αυτή η τιμή περιορισμού προσφέρει τα πιο πιθανά οφέλη απόδοσης του περιορισμού.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
52	69	Οχι	79	Οχι

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Οχι