La manière 100% correcte de faire des points d'arrêt CSS

Pendant une minute ou deux, je veux que vous oubliez CSS. Oubliez le développement Web. Oubliez les interfaces utilisateur numériques.

Et comme vous oubliez ces choses, je veux que vous laissiez vagabonder votre esprit. Pour remonter le temps. Revenons à votre jeunesse. De retour à votre premier jour d'école.

C'était une époque plus simple, où tout ce dont vous aviez à vous soucier était de dessiner des formes et de contrôler votre incontinence.

Jetez un œil aux points ci-dessus. Remarquez comment certains d'entre eux sont regroupés et certains d'entre eux s'étalent? Ce que je veux que vous fassiez, c'est les diviser en cinq groupes pour moi, comme bon vous semble.

Aller de l'avant. Après avoir vérifié que personne ne regarde, dessinez un cercle autour de chacun des cinq groupes avec votre doigt d'enfant.

Vous avez probablement trouvé quelque chose comme ci-dessous, non? (Et quoi que vous fassiez, ne me dites pas que vous avez fait défiler vers le bas sans faire l'exercice. Je ferai face à la paume.)

Bien sûr, ces deux points sur la droite auraient pu aller dans les deux sens. Si vous les regroupez, c'est OK, je suppose. Ils disent qu'il n'y a pas de mauvaise réponse, mais je ne me suis jamais trompé, donc je n'ai jamais été le destinataire de cette platitude particulière.

Avant de continuer, avez-vous dessiné quelque chose comme ci-dessous?

Probablement pas. Droite?

Mais c'est essentiellement ce que vous feriez si vous définissez vos points d'arrêt à des positions correspondant à la largeur exacte des appareils courants (320px, 768px, 1024px).

Des mots de la nature ci-dessous sont-ils déjà entrés dans vos oreilles ou sortis de votre bouche?

«Le point d' arrêt moyen est-il jusqu'à 768px ou 768 inclus? Je vois… et c'est le paysage iPad, ou est-ce «grand»? Oh, grand est de 768 pixels et plus. Je vois. Et petit est 320px? Quelle est cette plage de 0 à 319px? Un point de rupture pour les fourmis ?

Je pourrais continuer à vous montrer les points d'arrêt corrects et en rester là. Mais je trouve très curieux que la méthode ci-dessus («groupement idiot») soit si répandue.

Pourquoi cela devrait-il être?

Je pense que la réponse à ce problème, comme à tant de problèmes, se résume à une terminologie mal alignée. Après tout, le waterboard à Guantanamo Bay semble super si vous ne savez pas ce que sont ces deux choses. (Oh je souhaite que ce soit ma blague.)

Je pense que nous confondons «limites» et «plages» dans nos discussions et implémentations de points d'arrêt.

Dites-moi, si vous faites des points d'arrêt dans Sass, avez-vous une variable appelée $large, disons, 768px?

Est-ce la limite inférieure de la plage que vous appelez grande ou la limite supérieure? Si c'est le plus bas, alors vous devez avoir non $smallparce que cela devrait être 0, non?

Et si c'est la limite supérieure, comment définiriez-vous un point d'arrêt $large-and-up? Cela doit être une requête média avec un min-widthde $medium, non?

Et si vous faites simplement référence à une limite lorsque vous dites grande, alors nous serons dans une confusion plus tard, car une requête multimédia est toujours une plage .

Cette situation est un gâchis et nous perdons du temps à y réfléchir. J'ai donc trois suggestions:

  1. Obtenez vos points de rupture correctement
  2. Donnez un nom judicieux à vos gammes
  3. Soyez déclaratif

Conseil n ° 1: obtenez vos points d'arrêt correctement

Alors, quels sont les bons points d'arrêt?

Votre moi de maternelle a déjà dessiné les cercles. Je vais simplement les transformer en rectangles pour vous.

600px, 900px, 1200px et 1800px si vous prévoyez de donner quelque chose de spécial aux moniteurs géants. Par ailleurs, si vous commandez un moniteur géant en ligne, assurez-vous de le spécifier pour un ordinateur. Vous ne voulez pas recevoir un lézard géant par la poste.

Ces points avec lesquels votre jeune moi canalisé a joué représentent en fait les 14 tailles d'écran les plus courantes:

Nous pouvons donc faire une jolie petite image qui permet un flux de mots facile entre les gens déguisés en hommes d'affaires, designers, développeurs et testeurs.

Conseil n ° 2: Nommez vos gammes de manière judicieuse

Bien sûr, vous pouvez nommer vos points de rupture papa-ours et bébé-ours si vous le souhaitez. Mais si je vais m'asseoir avec un concepteur et discuter de l'apparence du site sur différents appareils, je veux que ce soit terminé le plus rapidement possible. Si nommer une tablette de format portrait facilite cela, alors je suis vendu. Heck, je vous pardonnerais même de l'appeler «portrait iPad».

«Mais le paysage change!» vous pouvez crier. «Les téléphones deviennent plus gros, les tablettes deviennent plus petites!»

Mais le CSS de votre site Web a une durée de conservation d'environ trois ans (sauf s'il s'agit de Gmail). L'iPad est avec nous depuis deux fois, et il n'a pas encore été détrôné. Et nous savons qu'Apple ne fabrique plus de nouveaux produits, ils suppriment simplement des éléments des existants (boutons, trous, etc.).

Donc, 1024 x 768 est là pour rester, mes amis. Ne nous enfouissons pas la tête dans le sable. (Fait amusant: les autruches ne vivent pas dans les villes car il n'y a pas de sable et donc nulle part où se cacher des prédateurs.)

Conclusion: la communication est importante. Ne vous détachez pas intentionnellement du vocabulaire utile.

Conseil n ° 3: Soyez déclaratif

Je connais, je sais, ce mot «déclaratif» à nouveau. Je vais le dire autrement: votre CSS devrait définir ce qu'il veut se passer, pas comment cela devrait se produire. Le «comment» est caché dans une sorte de mixin.

Comme indiqué précédemment, une partie de la confusion autour des points d'arrêt est que les variables qui définissent une limite d'une plage sont utilisées comme nom de la plage. $large: 600pxn'a tout simplement aucun sens si largec'est une plage. C'est la même chose que de dire var coordinates = 4;.

Nous pouvons donc cacher ces détails dans un mixin plutôt que de les exposer pour être utilisés dans le code. Ou nous pouvons faire mieux et ne pas utiliser du tout de variables.

Au début, j'ai fait l'extrait ci-dessous à titre d'exemple simplifié. Mais vraiment, je pense que cela couvre toutes les bases. Pour le voir en action, consultez ce stylo. J'utilise Sass parce que je ne peux pas imaginer construire un site sans lui. La logique s'applique à CSS ou Less tout de même.

@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; } }

Notez que je force le développeur à spécifier le suffixe -upou -only.

L'ambiguïté engendre la confusion.

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; } }

Oh et depuis que j'ai pris un ton déchaîné au cours des derniers paragraphes ... je plains le fou qui fait quelque chose de magique comme stocker des points d'arrêt dans une liste Sass et faire une boucle dessus pour générer des requêtes multimédias, ou quelque chose de ridicule que les futurs développeurs auront du mal déchiffrer.

La complexité est l'endroit où se cachent les bogues.

Enfin, vous pensez peut-être «ne devrais-je pas baser mes points d'arrêt sur le contenu, pas sur les appareils?». Eh bien, je suis étonné que vous soyez arrivé jusqu'ici et la réponse est oui ... pour les sites avec une seule mise en page. Ou si vous avez plusieurs mises en page et êtes heureux d'avoir un ensemble différent de points d'arrêt pour chaque mise en page. Oh et aussi si la conception de votre site ne change pas souvent, ou si vous êtes heureux de mettre à jour vos points d'arrêt lors de la mise à jour de vos conceptions, car vous voudrez les garder en fonction du contenu, n'est-ce pas?

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.

Hey, thanks for reading! Comment with your tops ideas, I’d love the hear them. And click the little heart if you think I deserve it, or leave it hollow and empty, like my sense of self-worth will be if you don’t.