Ο 100% σωστός τρόπος για να κάνετε CSS breakpoints

Για το επόμενο λεπτό, θέλω να ξεχάσετε το CSS. Ξεχάστε την ανάπτυξη ιστού. Ξεχάστε τις ψηφιακές διεπαφές χρήστη.

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

Ήταν μια απλούστερη στιγμή, όταν το μόνο που πρέπει να ανησυχείτε είναι να σχεδιάζετε σχήματα και να κρατάτε την ακράτεια υπό έλεγχο.

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

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

Πιθανότατα βρήκατε κάτι σαν το παρακάτω, σωστά; (Και ό, τι κάνετε, μην μου πείτε ότι μετακινηθήκατε προς τα κάτω χωρίς να κάνετε την άσκηση. Θα αντιμετωπίσω την παλάμη.)

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

Πριν συνεχίσω, σχεδιάσατε κάτι σαν το παρακάτω;

Πιθανώς όχι. Σωστά?

Αλλά αυτό είναι βασικά αυτό που θα κάνατε αν ρυθμίσετε τα σημεία διακοπής σας σε θέσεις που ταιριάζουν με το ακριβές πλάτος των δημοφιλών συσκευών (320 εικονοστοιχεία, 768 εικονοστοιχεία, 1024 εικονοστοιχεία).

Έχουν περάσει ποτέ τα λόγια της παρακάτω φύσης στα αυτιά σας ή βγήκαν από το στόμα σας;

«Είναι το μέσο σημείο διακοπής έως 768 εικονοστοιχεία ή περιλαμβάνει 768; Βλέπω… και αυτό είναι το τοπίο του iPad ή είναι «μεγάλο»; Ω, το μέγεθος είναι 768 εικονοστοιχεία και πάνω. Βλέπω. Και το μικρό είναι 320px; Ποιο είναι το εύρος από 0 έως 319 εικονοστοιχεία; Ένα σημείο διακοπής για τα μυρμήγκια ; "

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

Γιατί να γίνει αυτό;

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

Νομίζω ότι συνδυάζουμε «όρια» και «εύρη» στις συζητήσεις και τις υλοποιήσεις των σημείων διακοπής.

Πες μου, αν κάνεις breakpoints στο Sass, έχεις μια μεταβλητή που ονομάζεται $large768px;

Είναι αυτό το κατώτερο όριο του εύρους που αναφέρεται ως μεγάλο, ή το ανώτερο όριο; Εάν είναι το χαμηλότερο, τότε δεν πρέπει να έχετε $smallγιατί πρέπει να είναι 0, έτσι;

Και αν είναι το ανώτερο όριο, τότε πώς θα ορίζατε ένα σημείο διακοπής $large-and-up; Αυτό πρέπει να είναι ένα ερώτημα μέσα μαζικής ενημέρωσης με min-widthτης $medium, έτσι δεν είναι;

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

Αυτή η κατάσταση είναι χάος και χάνουμε χρόνο να το σκεφτούμε. Έχω λοιπόν τρεις προτάσεις:

  1. Αποκτήστε σωστά τα σημεία διακοπής σας
  2. Ονομάστε λογικά τα εύρη σας
  3. Να είστε δηλωτικοί

Συμβουλή # 1: Λάβετε τα σημεία διακοπής σας σωστά

Λοιπόν, ποια είναι τα σωστά σημεία διακοπής;

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

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

Αυτές οι κουκκίδες με τις οποίες έπαιζε ο νέος σας καναλιού αντιπροσωπεύουν τα 14 πιο κοινά μεγέθη οθόνης:

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

Συμβουλή # 2: Ονομάστε λογικά τα εύρη σας

Σίγουρα, θα μπορούσατε να ονομάσετε τα σημεία διακοπής σας με την αρκούδα papa και bear εάν θέλετε. Αλλά αν πρόκειται να καθίσω με έναν σχεδιαστή και να συζητήσω πώς θα πρέπει να εμφανίζεται ο ιστότοπος σε διαφορετικές συσκευές, θέλω να τελειώσει το συντομότερο δυνατό. Αν η ονομασία ενός tablet μεγέθους πορτραίτου διευκολύνει αυτό, τότε πωλώ. Heck, θα σε συγχωρούσα ακόμη και που το αποκαλούσες "Πορτραίτο iPad".

«Αλλά το τοπίο αλλάζει!» μπορείς να φωνάξεις. «Τα τηλέφωνα μεγαλώνουν, τα tablet γίνονται μικρότερα!»

Ωστόσο, το CSS του ιστότοπού σας έχει διάρκεια ζωής περίπου τρία χρόνια (εκτός αν είναι το Gmail). Το iPad ήταν μαζί μας για δύο φορές εκείνο το διάστημα και δεν έχει ακόμη εκκαθαριστεί. Και γνωρίζουμε ότι η Apple δεν κατασκευάζει πλέον νέα προϊόντα, απλώς αφαιρεί πράγματα από τα υπάρχοντα (κουμπιά, τρύπες κ.λπ.).

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

Συμπέρασμα: η επικοινωνία είναι σημαντική. Μην αποσυνδέεστε σκόπιμα από το χρήσιμο λεξιλόγιο.

Συμβουλή # 3: Να είστε δηλωτικοί

Ξέρω, ξέρω, αυτή τη λέξη «δηλωτική» ξανά. Θα το θέσω με άλλο τρόπο: το CSS σας θα πρέπει να καθορίσει τι θέλει να συμβεί και όχι πώς πρέπει να συμβεί. Το «πώς» ανήκει κρυμμένο σε κάποιο είδος μίξης.

Όπως συζητήθηκε προηγουμένως, μέρος της σύγχυσης γύρω από τα σημεία διακοπής είναι ότι οι μεταβλητές που ορίζουν ένα όριο μιας περιοχής χρησιμοποιούνται ως το όνομα της περιοχής. $large: 600pxαπλά δεν έχει νόημα αν largeείναι μια σειρά. Είναι το ίδιο με το ρητό var coordinates = 4;.

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

Στην αρχή έκανα το παρακάτω απόσπασμα ως απλοποιημένο παράδειγμα. Πιστεύω όμως ότι καλύπτει όλες τις βάσεις. Για να το δείτε σε δράση, ρίξτε μια ματιά σε αυτό το στυλό. Χρησιμοποιώ το Sass επειδή δεν μπορώ να φανταστώ την κατασκευή ενός ιστότοπου χωρίς αυτόν. Η λογική ισχύει για το CSS ή λιγότερο το ίδιο.

@mixin for-phone-only { @media (max-width: 599px) { @content; } } @mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } @mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } @mixin for-desktop-up { @media (min-width: 1200px) { @content; } } @mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop-up { padding: 20px; } }

Λάβετε υπόψη ότι αναγκάζω τον προγραμματιστή να καθορίσει το επίθημα -upή -only.

Η ασάφεια δημιουργεί σύγχυση.

An obvious criticism might be that this doesn’t handle custom media queries. Well good news, everybody. If you want a custom media query, write a custom media query. (In practice, if I needed more complexity than the above I’d cut my losses and run into the loving embrace of Susy’s toolkit.)

Another criticism might be that I’ve got eight mixins here. Surely a single mixin would be the sane thing to do, then just pass in the required size, like so:

@mixin for-size($size) { @if $size == phone-only { @media (max-width: 599px) { @content; } } @else if $size == tablet-portrait-up { @media (min-width: 600px) { @content; } } @else if $size == tablet-landscape-up { @media (min-width: 900px) { @content; } } @else if $size == desktop-up { @media (min-width: 1200px) { @content; } } @else if $size == big-desktop-up { @media (min-width: 1800px) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }

Sure, that works. But you won’t get compile-time errors if you pass in an unsupported name. And to pass in a sass variable means exposing 8 variables just to pass to a switch in a mixin.

Not to mention the syntax @include for-desktop-up {...} is totes more pretty than @include for-size(desktop-up) {...}.

A criticism of both these code snippets might be that I’m typing out 900px twice, and also 899px. Surely I should just use variables and subtract 1 when needed.

If you want to do that, go bananas, but there are two reasons I wouldn’t:

  1. These are not things that change frequently. These are also not numbers that are used anywhere else in the code base. No problems are caused by the fact that they aren’t variables — unless you want to expose your Sass breakpoints to a script that injects a JS object with those variables into your page.
  2. The syntax is nasty when you want to turn numbers into strings with Sass. Below is the price you pay for believing that repeating a number twice is the worst of all evils:
@mixin for-size($range) { $phone-upper-boundary: 600px; $tablet-portrait-upper-boundary: 900px; $tablet-landscape-upper-boundary: 1200px; $desktop-upper-boundary: 1800px; @if $range == phone-only { @media (max-width: #{$phone-upper-boundary - 1}) { @content; } } @else if $range == tablet-portrait-up { @media (min-width: $phone-upper-boundary) { @content; } } @else if $range == tablet-landscape-up { @media (min-width: $tablet-portrait-upper-boundary) { @content; } } @else if $range == desktop-up { @media (min-width: $tablet-landscape-upper-boundary) { @content; } } @else if $range == big-desktop-up { @media (min-width: $desktop-upper-boundary) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }

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

Η πολυπλοκότητα είναι όπου κρύβονται τα σφάλματα.

Τέλος, ίσως σκέφτεστε "δεν θα έπρεπε να βασίζω τα σημεία διακοπής μου σε περιεχόμενο, όχι σε συσκευές;". Λοιπόν, εκπλήσσομαι που τα καταφέρατε μέχρι τώρα και η απάντηση είναι ναι… για ιστότοπους με μία διάταξη. Ή εάν έχετε πολλές διατάξεις και είστε ευτυχείς να έχετε ένα διαφορετικό σύνολο σημείων διακοπής για κάθε διάταξη. Ω και επίσης, εάν ο σχεδιασμός του ιστότοπού σας δεν αλλάζει συχνά, ή είστε ευτυχείς να ενημερώσετε τα σημεία διακοπής σας όταν ενημερώνονται τα σχέδιά σας, καθώς θα θέλετε να τα διατηρήσετε με βάση το περιεχόμενο, σωστά;

For complex sites, life is much easier if you pick a handful of breakpoints to use across the site.

We’re done! But this post has not been as furry as I would like, let me see if I can think of an excuse to include some…

Oh, I know!

Bonus tips for breakpoint development

  1. If you need to experience CSS breakpoints for screen sizes bigger than the monitor you’re sitting at, use the ‘responsive’ mode in Chrome DevTools and type in whatever giant size you like.
  2. The blue bar shows ‘max-width’ media queries, the orange bar is ‘min-width’ media queries, and the green bar shows media queries with both a min and a max.
  3. Clicking a media query sets the screen to that width. If you click on a green media query more than once, it toggles between the max and min widths.
  4. Right click a media query in the media queries bar to go to the definition of that rule in the CSS.

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