Εργαστήριο Ερωτημάτων Container της iShadeed

Ο Ahmad Shadeed σημείωσε ένα πρόωρο άλμα σε ερωτήματα κοντέινερ και έχει ένα αυξανόμενη συλλογή παραδειγμάτων με βάση τα καθημερινά πρότυπα.

Και, αν το χάσατε, δικό του τελευταία ανάρτηση σχετικά με ερωτήματα κοντέινερ κάνει θαυμάσια δουλειά καλύπτοντας τον τρόπο λειτουργίας τους από τότε που προσγειώθηκαν στο Chrome 105 αυτόν τον μήνα (θα τους δούμε σύντομα στο Safari 16). Μερικές επιλογές από τις καλύτερες στιγμές και τα takeaways:

• Τα δοχεία ορίζονται με το container-type ιδιοκτησία. Είχαν χρησιμοποιηθεί προηγούμενες επιδείξεις και προτάσεις contain Αντιθέτως.
• Τα ερωτήματα κοντέινερ μοιάζουν πολύ με τα ερωτήματα πολυμέσων που γράφαμε εδώ και καιρό για να στοχεύσουμε το μέγεθος της θύρας προβολής. Έτσι, αντί για κάτι παρόμοιο @media (min-width: 600px) {}, έχουμε @container (min-width: 600px) {}. Αυτό θα κάνει τη μετατροπή πολλών από αυτά τα ερωτήματα πολυμέσων σε ερωτήματα κοντέινερ αρκετά απλή, μείον το έργο του προσδιορισμού των νέων τιμών του σημείου διακοπής.
• Μπορούμε να ονομάσουμε κοντέινερ για να τα ξεχωρίσουμε στον κώδικά μας (π.χ container-name: blockquote).

Μεγάλη δουλειά, Ahmad! Και ευχαριστώ για την κοινή χρήση!

Απευθείας Σύνδεσμος →