Μερικές φορές ερωτήματα μεγέθους κοντέινερ θα με είχαν βοηθήσει

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

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

Όλες οι ακόλουθες επιδείξεις θα προβάλλονται καλύτερα στο Chrome ή στο Safari τη στιγμή που γράφεται αυτό το άρθρο. Ο Firefox σχεδιάζει να υποστήριξη πλοίου στην έκδοση 109.

Περίπτωση 1: Πλέγμα καρτών

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

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

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

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

Στο έργο μου στον πραγματικό κόσμο, προσγειώθηκα σε μια προσέγγιση JavaScript που θα:

1. Ακούστε ένα συμβάν αλλαγής μεγέθους.
2. Υπολογίστε το πλάτος κάθε κάρτας.
3. Προσθέστε ένα μέγεθος ενσωματωμένης γραμματοσειράς σε κάθε κάρτα με βάση το πλάτος της.
4. Δώστε στυλ σε όλα τα μέσα χρησιμοποιώντας em μονάδες.

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

Τα ερωτήματα για κοντέινερ θα ήταν πολύ καλύτερα επειδή μας παρέχουν μονάδες ερωτημάτων κοντέινερ, Όπως cqw μονάδα. Μάλλον το έχετε ήδη καταλάβει, αλλά 1cqw είναι ίσο με 1% πλάτους δοχείου. Έχουμε επίσης το cqi μονάδα που είναι ένα μέτρο του εσωτερικού πλάτους ενός κοντέινερ και cqb για το πλάτος του μπλοκ ενός δοχείου. Έτσι, αν έχουμε ένα δοχείο κάρτας δηλαδή 500px πλατιά, α 50cqw η τιμή υπολογίζεται σε 250px.

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

.card { 
  container: card / size;
}

Τότε θα μπορούσα να είχα τοποθετήσει ένα εσωτερικό περιτύλιγμα με padding που κλιμακώνεται σε 10% του .card's πλάτος χρησιμοποιώντας το cqw μονάδα:

.card__inner { 
  padding: 10cqw; 
} 

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

Άλλη ιδέα; Χρήση cqw μονάδες για το μέγεθος γραμματοσειράς των εσωτερικών περιεχομένων και, στη συνέχεια, εφαρμόστε padding in em μονάδες:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw είναι μια αυθαίρετη τιμή — μόνο μια τιμή στην οποία συμβιβάστηκα. Αυτή η γέμιση εξακολουθεί να είναι ίση με 10cqw δεδομένου ότι η em η μονάδα είναι σχετική με το .card__inner μέγεθος γραμματοσειράς!

Το έπιασες; ο 2em είναι σχετική με το 5cqw μέγεθος γραμματοσειράς που έχει οριστεί στο ίδιο δοχείο. Τα κοντέινερ λειτουργούν διαφορετικά από αυτό που έχουμε συνηθίσει, όπως em οι μονάδες είναι σχετικές με το ίδιο στοιχείο font-size value. Αλλά αυτό που παρατήρησα γρήγορα είναι ότι οι μονάδες ερωτημάτων κοντέινερ σχετίζονται με ο πλησιέστερος γονέας που είναι επίσης δοχείο.

Για παράδειγμα, 5cqw δεν κλιμακώνεται με βάση το .card το πλάτος του στοιχείου σε αυτό το παράδειγμα:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

Αντίθετα, κλιμακώνεται σε οποιονδήποτε πλησιέστερο γονέα που ορίζεται ως δοχείο. Γι' αυτό έστησα ένα .card__inner περικάλυμμα.

Περίπτωση 2: Εναλλασσόμενη διάταξη

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

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

Οι ερωτήσεις για το κοντέινερ θα το έκαναν παιχνιδάκι, χάρη στο @container κανόνας:

.info-card {
  container-type: inline-size;
  container-name: info-card;
}

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

Ένα ερώτημα, άπειρη ρευστότητα:

Υπομονή όμως! Υπάρχει κάτι που μπορεί να θέλετε να προσέξετε. Συγκεκριμένα, θα μπορούσε να είναι δύσκολο να χρησιμοποιηθεί ένα ερώτημα κοντέινερ όπως αυτό σε ένα σύστημα σχεδίασης που βασίζεται σε υποστηρίγματα. Για παράδειγμα, αυτό .info-card συστατικό μπορεί να περιέχει θυγατρικά στοιχεία που βασίζονται σε στηρίγματα για να αλλάξουν την εμφάνισή τους.

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

Περίπτωση 3: SVG εγκεφαλικά επεισόδια

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

  
    
   
  Heading

Είναι πολύ απλό να κλιμακώσετε το εικονίδιο με το μέγεθος του τίτλου, ακόμη και χωρίς ερωτήματα πολυμέσων. Το πρόβλημα, όμως, είναι ότι τα SVG stroke-width μπορεί να γίνει πολύ λεπτή για να γίνει αντιληπτή τόσο καλά σε μικρότερο μέγεθος και ίσως να τραβήξει πολύ την προσοχή με ένα εξαιρετικά παχύ κτύπημα σε μεγαλύτερο μέγεθος.

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

Το μέγεθος γραμματοσειράς της επικεφαλίδας μπορεί να βασίζεται στο πλάτος της θύρας προβολής, επομένως το εικονίδιο SVG πρέπει να προσαρμόσει ανάλογα το σημείο που λειτουργεί η διαδρομή του σε οποιοδήποτε μέγεθος. Θα μπορούσατε να κάνετε το πλάτος διαδρομής σε σχέση με το πλάτος της επικεφαλίδας font-size με τη ρύθμιση του em μονάδες. Αλλά αν έχετε ένα συγκεκριμένο σύνολο μεγεθών κτύπημα στο οποίο πρέπει να τηρήσετε, τότε αυτό δεν θα λειτουργούσε γιατί διαφορετικά κλιμακώνεται γραμμικά — δεν υπάρχει τρόπος να το προσαρμόσετε σε ένα συγκεκριμένο stroke-width τιμή σε ορισμένα σημεία χωρίς να καταφεύγουμε σε ερωτήματα πολυμέσων στο πλάτος της θύρας προβολής.

Αλλά να τι θα έκανα αν είχα την πολυτέλεια των ερωτημάτων για κοντέινερ εκείνη την εποχή:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

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

Μπόνους: Άλλοι τύποι ερωτημάτων μεγέθους κοντέινερ

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

Τα περισσότερα παραδείγματα που έχω δει ρωτούν το width, max-width, να min-width, height, block-size, να inline-size όπως έκανα σε όλο αυτό το άρθρο.

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

Αλλά Το MDN περιγράφει δύο ακόμη πράγματα μπορούμε να ρωτήσουμε κατά. Ενα είναι orientation κάτι που είναι απολύτως λογικό γιατί το χρησιμοποιούμε συνεχώς σε ερωτήματα μέσων. Δεν είναι διαφορετικό με τα ερωτήματα κοντέινερ:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

Το άλλο? Του aspect-ratio, είτε το πιστεύεις έιτε όχι:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

Ακολουθεί μια επεξεργάσιμη επίδειξη για να παίξετε και με τα δύο παραδείγματα:

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