Από την έλευση του responsive web design, οι προγραμματιστές ζητούν τη δυνατότητα να διαμορφώνουν στοιχεία DOM με βάση το πραγματικό τους μέγεθος και όχι το μέγεθος του viewport του προγράμματος περιήγησης (χρησιμοποιώντας ερωτήματα πολυμέσων ). Στην πραγματικότητα, τα ερωτήματα κοντέινερ (αρχικά ερωτήματα στοιχείων) είναι πιθανώς η πιο δημοφιλής λειτουργία CSS που εξακολουθεί να μην υπάρχει στα προγράμματα περιήγησης.
Υπάρχουν ήδη πολλές , πολλές , πολλές αναρτήσεις που εξηγούν ακριβώς γιατί τα ερωτήματα κοντέινερ είναι δύσκολο να εφαρμοστούν στο CSS και γιατί οι κατασκευαστές προγράμματος περιήγησης διστάζουν να τα εφαρμόσουν. Αν θέλετε να το απολαύσετε τώρα, μια μικρή JavaScript μπορεί να σας βοηθήσει:
c51c33e1533e68c3f8fd24633700789f
Το όλο πράγμα μοιάζει έτσι:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Τα σημεία διακοπής , ο επιλογέας και τα χαρακτηριστικά στυλ μπορούν να χρησιμοποιηθούν για να καθορίσουν τα διάφορα σημεία διακοπής, τον αυτόματο επιλογέα και τον τύπο των κλάσεων που προστίθενται. Εάν χρησιμοποιείτε το σενάριο, μπορείτε να απευθυνθείτε στις τάξεις που δημιουργήθηκαν πρόσφατα ως εξής:
c51c33e1533e68c3f8fd24633700789f
Η χρήση ερωτημάτων κοντέινερ είναι ιδιαίτερα χρήσιμη για στοιχεία σε επικαλύψεις, αναδυόμενα παράθυρα, πλευρικές γραμμές ή προσαρμοσμένα στοιχεία - ακόμα και τώρα, για παράδειγμα, με το παραπάνω σενάριο.