Mobile-first σημαίνει να γράψεις τα βασικά στυλ σου για την μικρότερη οθόνη, και μετά να προσθέσεις πολυπλοκότητα για μεγαλύτερες οθόνες με min-width media queries — αντί να ξεκινήσεις από desktop και να αφαιρέσεις πράγματα.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Γιατί το mobile-first κερδίζει: το βασικό CSS παραμένει ελάχιστο (το κινητό παίρνει μόνο αυτό που χρειάζεται — καλό για απόδοση σε ασθενέστερες συσκευές), και στρώνεις πολυπλοκότητα, η οποία είναι ευκολότερο να κατανοηθεί παρά να αντικατασταθεί/αφαιρεθεί. Ταιριάζει επίσης με το πώς το περιεχόμενο ανακατανέμεται φυσικά από μια στήλη σε πολλές.
Oι media queries αποκρίνονται στο viewport — το όλο παράθυρο. Αλλά ένα επαναχρησιμοποιήσιμο στοιχείο (π.χ. ένα κάρτα) μπορεί να εμφανιστεί σε μια φαρδιά κύρια περιοχή ή σε μια στενή πλευρική γραμμή στην ίδια σελίδα. Το πλάτος του viewport δεν μπορεί να σου πει πόσο χώρο έχει το στοιχείο στην πραγματικότητα.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Τώρα η ίδια κάρτα αλλάζει αυτόματα σε οριζόντια διάταξη όταν το κοντέινερ της είναι ≥400px — είτε επειδή η οθόνη είναι μεγάλη είτε επειδή βρίσκεται σε μια φαρδιά στήλη. Το στοιχείο γίνεται πραγματικά ανεξάρτητο του περιεχομένου και επαναχρησιμοποιήσιμο.
To mobile-first διατηρεί το ανταπόκριση CSS λιτό και συντηρήσιμο.
Oι container queries είναι μια σημαντική πρόοδος: επιτρέπουν στα στοιχεία να αποκρίνονται στο δικό τους διαθέσιμο χώρο, το οποίο είναι ακριβώς αυτό που χρειάζεσαι σε μια αρχιτεκτονική που βασίζεται σε στοιχεία (σύστημα σχεδίασης, επαναχρησιμοποιήσιμα κάρτες/widgets) όπου το ίδιο στοιχείο εμφανίζεται σε πολλά περιεχόμενα.