Durante el próximo minuto más o menos, quiero que se olvide de CSS. Olvídate del desarrollo web. Olvídese de las interfaces de usuario digitales.
Y mientras olvidas estas cosas, quiero que permitas que tu mente divague. Para retroceder en el tiempo. De vuelta a tu juventud. De vuelta a tu primer día de clases.
Era una época más simple, cuando lo único que tenía que preocuparse era dibujar formas y controlar su incontinencia.
Eche un vistazo a los puntos de arriba. ¿Observa cómo algunos de ellos se agrupan y otros se dispersan? Lo que quiero que hagas es dividirlos en cinco grupos para mí, como mejor te parezca.
Adelante. Después de comprobar que nadie está mirando, dibuje un círculo alrededor de cada uno de los cinco grupos con su dedo infantil.
Probablemente se te ocurrió algo como lo siguiente, ¿verdad? (Y hagas lo que hagas, no me digas que te desplazaste hacia abajo sin hacer el ejercicio. Me enfrentaré a la palma).
Claro, esos dos puntos de la derecha podrían haber ido en cualquier dirección. Si los agrupa, está bien, supongo. Dicen que no hay una respuesta incorrecta, pero yo nunca me he equivocado, por lo que nunca he sido el receptor de ese tópico en particular.
Antes de continuar, ¿dibujaste algo como el siguiente?
Probablemente no. ¿Correcto?
Pero eso es básicamente lo que haría si establece sus puntos de interrupción en posiciones que coincidan con el ancho exacto de los dispositivos populares (320px, 768px, 1024px).
¿Alguna vez han entrado en sus oídos o han salido de su boca palabras de la siguiente naturaleza?
“¿El punto de corte medio es de hasta 768 px o incluye 768? Ya veo ... y ese es el paisaje del iPad, ¿o es 'grande'? Oh, grande es 768px y más. Veo. ¿Y pequeño es 320px? ¿Cuál es este rango de 0 a 319 px? ¿Un punto de ruptura para las hormigas ?Podría proceder a mostrarte los puntos de interrupción correctos y dejarlo así. Pero me parece muy curioso que el método anterior ("agrupación tonta") esté tan extendido.
¿Por qué debería ser eso?
Creo que la respuesta a este problema, como a tantos otros, se reduce a una terminología desalineada. Después de todo, el submarinismo en la bahía de Guantánamo suena genial si no sabes cuáles son esas cosas. (Oh, desearía que esa fuera mi broma).
Creo que mezclamos "límites" y "rangos" en nuestras discusiones e implementaciones de puntos de interrupción.
Dime, si haces puntos de interrupción en Sass, ¿tienes una variable llamada $large, digamos, 768px?
¿Es ese el límite inferior del rango al que se refiere como grande o el límite superior? Si es el más bajo, entonces debe tener no $smallporque debería ser así 0, ¿verdad?
Y si es el límite superior, ¿cómo definiría un punto de ruptura $large-and-up? Debe ser una consulta de medios con una min-widthde $medium, ¿verdad?
Y si te refieres solo a un límite cuando dices grande, entonces nos confundiremos más adelante porque una consulta de medios siempre es un rango .
Esta situación es un desastre y estamos perdiendo el tiempo pensando en ello. Entonces tengo tres sugerencias:
- Obtenga sus puntos de quiebre bien
- Nombra tus rangos con sensatez
- Ser declarativo
Consejo n. ° 1: obtenga sus puntos de interrupción correctos
Entonces, ¿cuáles son los puntos de ruptura correctos ?
Tu yo del jardín de infancia ya dibujó los círculos. Los convertiré en rectángulos para ti.
600px, 900px, 1200px y 1800px si planeas darle algo especial a las personas con monitores gigantes. En una nota al margen, si está solicitando un monitor gigante en línea, asegúrese de especificar que sea para una computadora. No querrás recibir un lagarto gigante por correo.
Esos puntos con los que ha estado jugando tu joven canalizado en realidad representan los 14 tamaños de pantalla más comunes:
Por lo tanto, podemos hacer una imagen bonita que permita el flujo de palabras entre la gente vestida como gente de negocios, diseñadores, desarrolladores y probadores.
Consejo # 2: Nombra tus rangos con sensatez
Claro, podría nombrar sus puntos de ruptura papá-oso y bebé-oso si lo desea. Pero si voy a sentarme con un diseñador y discutir cómo debería verse el sitio en diferentes dispositivos, quiero que termine lo más rápido posible. Si nombrar una tableta de tamaño vertical facilita eso, entonces estoy vendido. Diablos, incluso te perdonaría por llamarlo "retrato de iPad".
"¡Pero el paisaje está cambiando!" puedes gritar. "¡Los teléfonos son cada vez más grandes, las tabletas cada vez más pequeñas!"
Pero el CSS de su sitio web tiene una vida útil de aproximadamente tres años (a menos que sea Gmail). El iPad lleva con nosotros el doble de tiempo y aún no ha sido destronado. Y sabemos que Apple ya no fabrica nuevos productos, simplemente elimina cosas de los existentes (botones, agujeros, etc.).
Así que 1024 x 768 llegó para quedarse, amigos. No enterremos la cabeza en la arena. (Dato curioso: los avestruces no viven en las ciudades porque no hay arena y, por lo tanto, no hay ningún lugar donde esconderse de los depredadores).
Conclusión: la comunicación es importante. No se separe intencionalmente del vocabulario útil.
Consejo n. ° 3: sea declarativo
Lo sé, lo sé, esa palabra "declarativa" de nuevo. Lo diré de otra manera: su CSS debería definir lo que quiere que suceda, no cómo debería suceder. El "cómo" pertenece escondido en una especie de mezcla.
Como se discutió anteriormente, parte de la confusión en torno a los puntos de interrupción es que las variables que definen un límite de un rango se utilizan como el nombre del rango. $large: 600pxsimplemente no tiene sentido si largees un rango. Es lo mismo que decir var coordinates = 4;.
Entonces podemos ocultar esos detalles dentro de un mixin en lugar de exponerlos para que se usen en el código. O podemos hacer una mejor y no usar variables en absoluto.
Al principio, hice el siguiente fragmento como un ejemplo simplificado. Pero realmente creo que cubre todas las bases. Para verlo en acción, echa un vistazo a este bolígrafo. Estoy usando Sass porque no puedo imaginar la construcción de un sitio sin él. La lógica se aplica a CSS o Less de la misma manera.
@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; } }Tenga en cuenta que estoy obligando al desarrollador a especificar el sufijo -upo -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:
- 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.
- 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; } }Ah, y dado que he adoptado un tono de perorata en los últimos párrafos ... me compadezco del tonto que hace algo mágico como almacenar puntos de interrupción en una lista de Sass y recorrerlos para generar consultas de medios, o algo igualmente ridículo que los futuros desarrolladores tendrán dificultades. Descifrar.
La complejidad es donde se esconden los insectos.Finalmente, puede estar pensando "¿no debería basar mis puntos de interrupción en el contenido, no en los dispositivos?". Bueno, me sorprende que hayas llegado tan lejos y la respuesta es sí ... para sitios con un solo diseño. O si tiene varios diseños y está feliz de tener un conjunto diferente de puntos de interrupción para cada diseño. Ah, y también si el diseño de su sitio no cambia con frecuencia, o si está feliz de actualizar sus puntos de interrupción cuando se actualizan sus diseños, ya que querrá mantenerlos en función del contenido, ¿verdad?
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
- 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.
- 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.
- 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.
- 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.