CSS @container κανόνας

Ορισμός και χρήση

CSS @container Οι κανόνες χρησιμοποιούνται για να ορίσουν στυλ για άλλα στοιχεία ανάλογα με το μέγεθος ή το στυλ του κουτιού.

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

Σημείωση:Στο CSS, το κουτί είναι το στοιχείο που περιλαμβάνει άλλα στοιχεία, χρησιμοποιείται για να τα ομαδοποιήσει ώστε να μπορούν να εφαρμοστούν στυλ.

παράδειγμα

Ορίστε στυλ για άλλα στοιχεία ανάλογα με το μέγεθος ή το στυλ του κουτιού:

.parent {
  όνομα κουτιού: myContainer;
  τύπος κουτιού: διάσταση γραμμικής διανύσσης;
}
/* Προσθέστε στυλ αν το myContainer είναι μικρότερο από 500px πλάτους */
@container myContainer (πλάτος < 500px) {
  .child {
    πλάτος: 50%;
    περιθώριο: 2px γεμάτο μαρμελάδα;
    χρώμα υποβάθρου: σαλαμίνια;
  }
}

Προσπαθήστε να το δοκιμάσετε προσωπικά;

Γλώσσα CSS

@container containername (containerquery) {
  καταχωρήσεις CSS
}

τιμή ιδιοτήτων

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

Τα αριθμοί στην τάβλη αναπαριστούν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το @ κείμενο規칙.