Early Days of Container Style Queries

Βρισκόμαστε ακόμα σε πολύ νωρίς με ερωτήσεις για κοντέινερ. Πολύ νωρίς για ευρεία υποστήριξη προγράμματος περιήγησης, αλλά το Chromium το υποστηρίζει ήδη, Safari άρχισε να το υποστηρίζει στην έκδοση 16, και ο Firefox είναι πιθανώς όχι πολύ πίσω.

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

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Και τα δύο κάνουν ερωτήματα για min-width: 600. Η διαφορά είναι ότι το ερώτημα πολυμέσων εξετάζει το πλάτος της θύρας προβολής για να ενεργοποιήσει αυτές τις αλλαγές στυλ, ενώ το ερώτημα κοντέινερ εξετάζει το υπολογισμένο πλάτος του .posts στοιχείο. Γλυκός!

Αλλά αφού άκουσε CSS Podcast Επεισόδιο 59, η Una και ο Adam έθεσαν το μέλλον των ερωτημάτων για κοντέινερ: ερωτήματα στυλ! Το τρέχον προσχέδιο εργασίας της προδιαγραφής CSS Containment Module Level 3 ορίζει ερωτήματα στυλ κοντέινερ:

A ερώτημα στυλ κοντέινερ επιτρέπει την αναζήτηση του υπολογισμένες τιμές του κοντέινερ ερωτήματος. Είναι ένας boolean συνδυασμός μεμονωμένων χαρακτηριστικά στυλ () ότι κάθε ερώτημα υποβάλλει μια μεμονωμένη, συγκεκριμένη ιδιότητα του κοντέινερ ερωτήματος.

Αλλά δεν υπάρχουν ακόμη παραδείγματα σχετικά με τη σύνταξη - μόνο μια σύντομη περιγραφή:

Η σύνταξη του α  είναι το ίδιο με το α δήλωση, και το ερώτημά του είναι αληθές εάν η υπολογισμένη τιμή της δεδομένης ιδιότητας στο κοντέινερ ερωτήματος ταιριάζει με τη δεδομένη τιμή (η οποία υπολογίζεται επίσης σε σχέση με το κοντέινερ ερωτήματος), άγνωστο εάν η ιδιότητα ή η τιμή της δεν είναι έγκυρη ή δεν υποστηρίζεται και ψευδής διαφορετικά . Συνδυασμός δυαδικής σύνταξης και λογικής χαρακτηριστικά στυλ σε μια ερώτηση στυλ είναι το ίδιο όπως για Ερωτήματα χαρακτηριστικών CSS. (Βλέπω @ υποστηρίζει.)

Λοιπόν, ναι, δεδομένου του χρόνου θα πρέπει να περιμένουμε να βγάλουμε κάτι σαν αυτό:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Αυτό είναι ένα πολύ χαζό παράδειγμα. Ένα πράγμα που πρέπει να σημειωθεί είναι ότι το container-type δεν βασίζεται πλέον στο κοντέινερ inline-size αλλά από style. Θα μπορούσαμε να το χαρακτηρίσουμε ως εξής:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

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

Πού μπορεί να είναι χρήσιμο να ρωτήσετε τα στυλ ενός κοντέινερ; Δεν ξέρω ακόμα! Αλλά το μυαλό μου πηγαίνει σε μερικά σημεία:

• Προσαρμοσμένες τιμές ιδιοκτησίας: Έχουμε δει προσαρμοσμένες ιδιότητες που χρησιμοποιούνται όπως δείκτες κατάστασης, όπως το Μέθοδος εναλλαγής DRY Η Ana κάλυψε λίγο πριν. Η τιμή αλλάζει, όπως και τα στυλ.
• Εναλλακτική προσέγγιση σκοτεινής λειτουργίας: Αντί να τα βασίσουμε όλα σε μια αλλαγή κατηγορίας σώματος που εκχωρεί εκ νέου τις προσαρμοσμένες τιμές ιδιοτήτων, ίσως μπορούμε να αλλάξουμε μια ολόκληρη παλέτα χρωμάτων, αν, ας πούμε, το φόντο του σώματος αλλάξει χρώμα.
• Πιο περίπλοκες συνθήκες ερωτήματος: Όπως, ας πούμε, θέλουμε να εφαρμόσουμε στυλ όταν το size και style πληρούνται οι προϋποθέσεις για ένα δοχείο.

Η Una ανέφερε επίσης στο CSS Podcast ότι τα ερωτήματα στυλ κοντέινερ θα μπορούσαν να βοηθήσουν στην αποφυγή άβολων καταστάσεων στυλ, όπως αν τύχει να έχουμε πλάγια κείμενο σε ήδη πλάγιο blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}