Πώς να χρησιμοποιήσετε τα ερωτήματα κοντέινερ στο CSS

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

Για την επίλυση αυτού του προβλήματος εισήχθησαν ερωτήματα κοντέινερ. Έχουν επίσης αυξηθεί με τη δημοτικότητα πλαισίων όπως το React και το Vue.js που λειτουργούν δημιουργώντας αρθρωτά "εξαρτήματα" διεπαφής χρήστη. Μάθετε πώς να χρησιμοποιείτε ερωτήματα κοντέινερ για να δημιουργήσετε αποκριτικά στοιχεία στο CSS σας.

Ο κώδικας που χρησιμοποιείται σε αυτό το άρθρο είναι διαθέσιμος σε αυτό Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

Γιατί πρέπει να χρησιμοποιήσετε ερωτήματα κοντέινερ CSS;

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

Μόλις κλωνοποιήσετε επιτυχώς το repo, εκτελέστε τον κώδικα. Θα βρείτε μια ιστοσελίδα παρόμοια με την παρακάτω εικόνα:

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

Η διάταξη αποκρίνεται. Όταν συρρικνώνετε το πρόγραμμα περιήγησης, μπορείτε να δείτε ότι η κάρτα μετατρέπεται σε κάθετη στήλη:

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

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

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(μέγιστο πλάτος: 800 px) {
.κάρτα {
flex-direction: στήλη;
 }
.κάρτα-κεφαλίδα { 
πλάτος: 100%;
 }
}

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

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

.πλευρική μπάρα.κάρτα {
/* Κάντε την κάρτα πλευρικής γραμμής μικρότερη */
}
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(μέγιστο πλάτος: 800 px) {
/* Δώστε στυλ στη σελίδα όταν η οθόνη είναι στενότερη από 800 px */
}

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

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

Πώς να δημιουργήσετε ένα ερώτημα κοντέινερ

Για να δημιουργήσετε ένα ερώτημα κοντέινερ, θα ξεκινήσετε στοχεύοντας το στοιχείο που θέλετε να χρησιμοποιήσετε ως κοντέινερ (σε αυτήν την περίπτωση, την κύρια ενότητα και την πλευρική γραμμή). Μέσα στο μπλοκ, πρέπει να ορίσετε το τύπου δοχείου προς την ενσωματωμένο μέγεθος:

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

Όταν αποθηκεύετε το αρχείο CSS, δεν θα αλλάξει τίποτα στη σελίδα. Τώρα, όμως, μπορείτε να χρησιμοποιήσετε ερωτήματα κοντέινερ για να αλλάξετε το μέγεθος και να αλλάξετε το στυλ των καρτών που είναι ένθετες στην κύρια ενότητα και στην ενότητα της πλευρικής γραμμής. Στο ακόλουθο ερώτημα κοντέινερ, αλλάζετε τις κάρτες σε κάθετες στήλες σε οθόνες με πλάτος 500 pixel ή λιγότερο:

@δοχείο(μέγιστο πλάτος: 500 px) {
.κάρτα {
flex-direction: στήλη;
 }
.κάρτα-κεφαλίδα {
πλάτος: 100%;
 }
}

Αυτό θα λειτουργήσει ως κανονικό ερώτημα πολυμέσων. Αλλά αντί να μετράτε το μέγεθος της οθόνης σας, μετράτε το μέγεθος των κοντέινερ σας (τμήματα κύριας και πλευρικής γραμμής). Έτσι τώρα, όταν το κοντέινερ είναι 500 px ή περισσότερο, χρησιμοποιείτε την οριζόντια προβολή. Διαφορετικά, χρησιμοποιείτε το vertical (προεπιλογή για το flexbox).

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

Το ερώτημα κοντέινερ είναι απίστευτα ισχυρό επειδή σας επιτρέπει να αλλάξετε το μέγεθος των πραγμάτων με βάση το κοντέινερ αντί για το πλάτος ολόκληρου του προγράμματος περιήγησης. Αυτό είναι ιδιαίτερα χρήσιμο όταν ασχολείστε με στοιχεία (όπως στο React ή στο Vue).

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

Ονομασία δοχείων

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

Και ακόμη κι αν οι κάρτες ήταν μέσα σε άλλο κοντέινερ, απλώς θα αγνοούσε τα άλλα κοντέινερ και θα επέλεγε μόνο το πιο κοντινό κοντέινερ στον εαυτό του. Αυτό είναι μέρος μιας ευρύτερης Έννοια CSS γνωστή ως επιλογείς CSS.

Στο παρακάτω παράδειγμα, μετατρέψαμε το στοιχείο του σώματος σε κοντέινερ:

σώμα {
τύπου δοχείου: ενσωματωμένο μέγεθος;
}

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

Για να παρακάμψετε αυτήν τη συμπεριφορά, πρέπει να κάνετε δύο πράγματα. Αρχικά, πρέπει να δώσετε στο στοιχείο του σώματός σας ένα όνομα κοντέινερ:

σώμα {
τύπου δοχείου: ενσωματωμένο μέγεθος;
όνομα δοχείου: σώμα;
}

Στη συνέχεια, όταν δημιουργείτε το ερώτημα κοντέινερ, πρέπει να καθορίσετε το όνομα του κοντέινερ μετά @δοχείο.

@δοχείο σώμα (μέγιστο πλάτος:1000 px){
/* Κανόνες CSS που στοχεύουν το κοντέινερ σώματος */
}

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

Μονάδες Εμπορευματοκιβωτίων

Ένα άλλο εξαιρετικό χαρακτηριστικό σχετικά με τα κοντέινερ είναι ότι μπορείτε να χρησιμοποιήσετε μονάδες κοντέινερ. Αυτές οι μονάδες λειτουργούν ακριβώς όπως οι μονάδες θυρών προβολής (είναι όλες οι μονάδες του ίδιου ακριβώς τύπου). Ωστόσο, οι μονάδες εμπορευματοκιβωτίων χρησιμοποιούν cqw (για ρύθμιση πλάτους) και cqh (για ρύθμιση ύψους). Αυτές οι μονάδες καθορίζουν το ακριβές πλάτος και ύψος του κοντέινερ σας.

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