CSS También Puede Hacer Eso

Una combinación de CALC y unidades de vista. Esta técnica fue creada por Mike Rithmuller, creo, en 2015. Tiene un par de nombres, creo. Algunas personas lo llaman bloqueos de CSS, es posible que lo hayas visto cubierto en otros artículos. Básicamente, esta técnica permite que los tamaños de fuente crezcan y se reduzcan con el ancho de la ventana. Estas son las unidades de vista aquí. Y si te muestro, puedes ver que es como un crecimiento y reducción gradual. Pero luego, en este punto, deja de reducirse, en algún lugar a lo largo de este punto, deja de crecer. Por eso, nuevamente, es una combinación de consultas de medios CALC y unidades de vista, porque hay un límite en los tamaños máximo y mínimo. Pero cualquier cosa entre eso, el tamaño de fuente se ajustará suavemente. Supongo que por eso lo llaman bloqueos de CSS, porque estás bloqueando el tamaño mínimo y máximo.

Para una explicación detallada de esta fórmula exacta, eventualmente... si lo miras, te das cuenta de que puedes hacer el cálculo de 48 menos 24 matemáticamente. Pero esta fórmula se corresponde con los tamaños de fuente mínimo y máximo de tu vista. Hay una explicación muy detallada, pero no voy a entrar en ella aquí porque no hay suficiente tiempo. Te sugiero que leas el artículo de Mike, al que he enlazado al final de la presentación.

Recientemente, hemos tenido una serie de funciones matemáticas que ya son compatibles con los principales navegadores. Entre ellas, tenemos la función clamp, que nos permite seleccionar un valor dentro de un rango entre un valor mínimo y máximo. Esto suena familiar, ¿verdad? Es casi lo que describí para la opción de bloqueos de CSS de Mike. Así es como se ve la función. Toma tres parámetros. El primero es el valor mínimo. Y el último es el valor máximo. Lo que tienes en medio es lo que llamamos el valor preferido. Esta función es útil si el valor preferido depende de algo que no controlas directamente. Por ejemplo, las unidades de vista. Si quieres que tu fuente crezca y se encoja, pero sin volverse demasiado pequeña o demasiado grande, eso es exactamente lo que hace la función clamp. Es similar a la opción dos, aunque con una sintaxis mucho más simplificada.

Una cosa a tener en cuenta al usar unidades de vista o limitar los tamaños de texto con funciones matemáticas es que puede, no al 100% pero puede, hacer que los usuarios no puedan escalar el texto al 200% de su tamaño original, lo cual es un fallo de WCAG. Por lo tanto, es esencial probarlo con Zoom. Cuando digo Zoom, me refiero a esto. Zoom. Solo para asegurarte de que no estás fallando en ninguna prueba de accesibilidad. En cuanto al soporte del navegador para las funciones matemáticas, parece muy bueno. Estadísticamente, es aproximadamente un 91% de soporte general. Así que pruébalo si tienes este caso de uso en particular. Bien, sigamos adelante. Hablemos sobre el desplazamiento con scroll.

El CSS para el desplazamiento con scroll ha estado presente durante un tiempo. Pero la especificación ha pasado por varias modificaciones y las propiedades han cambiado un poco desde la primera iteración. Hoy en día, las propiedades principales son scroll snap type para el contenedor y scroll snap align para el elemento hijo.

Veamos esto nuevamente en una demostración en vivo. Para scroll snap type, que se aplica al contenedor, puedes establecer un valor obligatorio o de proximidad. Esto determina cuán estrictamente el navegador se ajustará a un punto de ajuste. Aquí lo he ajustado como obligatorio. El navegador siempre se ajustará a un punto de ajuste, lo cual significa que solo hago clic una vez y se desplaza al siguiente elemento. También funciona con el teclado. Es posible que mi teclado sea un poco más ruidoso, por lo que es posible que puedas escucharlo mejor. También puedes hacer el desplazamiento con scroll en el eje x o en el eje y. Si quieres hacerlo en el eje y, solo modificaré esto un poco. Y listo, también puedes hacerlo verticalmente. Pero si cambio el valor a proximidad, verás que el ajuste es mucho más suelto. Si no puedes escuchar, simplemente toco, toco, toco, toco, toco, ajuste. Toco, toco, toco, toco, ajuste. Toco, toco, toco, ajuste. Creo que depende del navegador el punto exacto donde ocurre el ajuste. Pero parece que ocurre cuando dejamos de desplazarnos a unos cientos de píxeles del punto de ajuste. Así que tienes esta opción más flexible para el desplazamiento con scroll.

Pero si este es el tipo de interacción que deseas diseñar, ya no es necesario utilizar una biblioteca de JavaScript, ya que sé que hay varias bibliotecas de desplazamiento con scroll disponibles. En cuanto al soporte, es incluso mejor que las funciones matemáticas, con casi un 94%. Incluso IE tiene cierto soporte, aunque con la sintaxis antigua. Tal vez varíe según el caso. Pero si necesitas algo como esto, en lugar de recurrir a una solución basada en JavaScript, tal vez le des una oportunidad a esta solución nativa de CSS.

A continuación, tenemos los elementos pegajosos. Este es un patrón que encuentro muy a menudo en estos días. Y aún recuerdo los días antes de que position sticky fuera ampliamente compatible. Necesitábamos usar JavaScript porque necesitábamos calcular la posición del elemento, averiguar dónde debía estar y luego fijarlo allí. Pero luego surgieron todo tipo de problemas porque, ya sabes, las cosas se superponían.

Todo esto era muy costoso y agotador, para ser honesto. Hoy en día, tenemos un soporte muy, muy bueno. Si simplemente ignoráramos esa columna de IE, el soporte para position sticky, ya sabes, está en todas partes. El principal problema con position sticky que veo hoy en día cuando la gente intenta usarlo es como por qué no funciona. ¿Por qué no se mantiene pegado? Y descubrí que la mayoría de las veces, se debe a algunas lagunas en la comprensión de cómo funciona precision sticky. Así que déjame tratar de explicarlo.

Una caja con posición pegajosa es como una combinación entre una caja con posición relativa y una caja con posición fija. Entonces, una caja con posición relativa fluye, ya sabes, puedes desplazarte, desplazarte, desplazarte, va junto. Una caja con posición fija simplemente se queda allí como un tic. Para que position sticky funcione, no es suficiente con simplemente aplicarle position sticky y listo, no, no, no. Debes tener un valor de desplazamiento, un valor de desplazamiento que puede ser arriba, abajo, izquierda o derecha, porque este elemento pegajoso se tratará como una caja con posición relativa hasta que cruce un umbral para el contenedor dentro del cual se está desplazando. Así que debe haber este punto donde se pegue. Si no defines este valor de desplazamiento, simplemente no se pegará, ¿sabes? Entonces, a medida que me desplazo, ahora lo he configurado en arriba 1m, solo para que sea obvio, como podría cambiarlo a cero para las personas que están como, argh, hay una brecha. Así que cámbialo a cero para que se pegue correctamente. Se quedará pegado en ese punto de umbral hasta que alcance el borde opuesto de su bloque contenedor. También podemos cambiar esto a abajo, y luego se pegará en la parte inferior, desplázate, desplázate, desplázate, se pega. También funciona en izquierda y derecha. Y no lo hagamos flexible. Cambiemos esto a izquierda, derecha. Oh, hey, no está funcionando realmente. Interesante. Bueno, acabo de mostrarte un error muy común, ¿por qué no funcionó para izquierda y derecha? Es más fácil para mí mostrarlo usando el ejemplo vertical debido al tamaño. Así que hagamos esto. Altura, y hagámoslo como 800. Y luego, para que puedas ver la altura, démosle un borde. Tal vez un borde de 2. Ok, así que hay este borde negro, ¿verdad? Y lo hice 800 porque, como, este contenedor es el padre de mis cajas aquí.

Y claramente tengo más contenido que 800. Ahora, si quiero hacerlo en la parte superior... No parece que se esté pegando en absoluto, ¿verdad? Intentemos con 1000. La razón por la que no se pega, no es que no se pegue, en sí. Veamos si puedo explicarlo correctamente. Si tu elemento pegajoso ya ha alcanzado el borde del bloque contenedor, es posible que no parezca pegajoso en absoluto. Es solo que el bloque contenedor se está desplazando. Así que voy a cambiar esto de nuevo a 800 donde parece que no hay pegado involucrado. Es como si no hubiera nada a lo que realmente se pueda pegar porque antes de que pueda alcanzar el borde, el bloque contenedor ya se ha ido. Así que se vuelve más obvio cuando el contenedor es más grande que, oh sí, hay algo de pegado sucediendo. Entonces, esto es una de las cosas complicadas que creo que las personas encuentran cuando usan sticky por primera vez. Mi sugerencia es que te tomes el tiempo para comprender realmente y descubrir cómo funciona. Sería genial si pudieras probar estos valores por tu cuenta en las herramientas de desarrollo, tal vez. También escribí sobre el posicionamiento en mi blog antes y he enlazado varios artículos de diferentes autores que explican el pegado a su manera. Esto se debe a que creo que todos entienden esto y lo comprenden de manera ligeramente diferente. Entonces, si lo que dije hoy no tiene sentido para ti, prueba una explicación diferente hasta que encuentres la que se pegue. Ese es solo mi consejo.

De acuerdo, de acuerdo, se nos acaba el tiempo. Lo último de lo que quiero hablar es el diseño de mampostería. Originalmente fue un diseño de JavaScript creado por David DiSandro en 2009. En ese entonces, era muy popular, Tumblr lo utiliza, Pinterest lo utiliza, algunas personas lo llaman el diseño de Pinterest, así que buen trabajo, Pinterest, supongo. Pero dado su popularidad entre los diseñadores y desarrolladores web, este método de diseño se discutió bastante en las reuniones del grupo de trabajo de DCS. Por eso tenemos un borrador del editor de Grid Level 3 que especifica cómo se puede hacer la mampostería de forma nativa en el navegador solo con CSS.

Es hora de la demostración. Pero antes de la mampostería en CSS, porque en realidad no es muy compatible en este momento, veamos, sí, solo está implementado en Firefox detrás de una bandera, así que debes activar esa bandera para poder verlo o incluso probar mi demostración en este momento. Así que digamos que no tienes la mampostería en CSS, podemos lograr algo similar con el diseño de varias columnas, solo que el diseño de varias columnas tiene algunas limitaciones. Su implementación también es un poco inconsistente en diferentes navegadores en este momento, de hecho.

Diría que el diseño de varias columnas es más adecuado para contenido en línea, como líneas de texto, en lugar de cajas discretas como las que estoy usando aquí. Diría que hay inconsistencias porque mi salto de línea aquí no está funcionando, pero si abro esto en Chrome. Olvídalo. Así que cuando lo usamos, el diseño de varias columnas fluye en la dirección de bloque y luego las columnas se vuelven a organizar. Entonces tu contenido realmente fluye de arriba a abajo y luego de izquierda a derecha. Así que si el orden es importante para ti, he numerado estas cajas para que puedas verlo. Tal vez las primeras cosas en tu cuadrícula sean importantes, pero no quieres que estén en la parte inferior. No puedes controlar esto realmente con el diseño de varias columnas. Y qué más, podrías, si quieres abarcar tus elementos en varias columnas, puedes hacerlo con el diseño de varias columnas, pero como dije, la implementación del diseño de varias columnas no es muy completa en los navegadores. Así que ahora mismo todo lo que tienes es algo así. El salto de línea se ve extraño, un poco defectuoso, así que digamos que el diseño de varias columnas es solo un tercio del camino para la mampostería, ¿verdad? Así que con la mampostería en CSS, puedes hacerlo en ambas direcciones, en el eje x y en el eje y, porque la mampostería en CSS se basa en las capacidades de cuadrícula del navegador, y su sintaxis es bastante similar a cómo usaríamos SubGrid, que es parte de Grid Level 2. El valor de la mampostería se aplica a la propiedad gridTemplateRows o gridTemplateColumns, dependiendo de la dirección que desees seguir. Para esta dirección horizontal aquí, mis alturas de fila están definidas con filas de plantilla aquí. Puse esta repetición porque soy perezoso. Y luego puedes dejar las columnas libres para ser mamposteadas. Básicamente, las columnas no están alineadas como en una cuadrícula normal, sino que están mamposteadas, como sea que se diga. Entonces, definitivamente puedes abarcar mucho mejor. Como esto es horizontal, estoy usando gridRow para esto. Abarcar dos, abarcar tres se ve bien. Las cosas fluyen juntas.

Si deseas hacer la dirección opuesta, verás que las columnas y las filas están invertidas, por lo que ahora mis filas son las que están siendo mamposteadas. Una de las grandes cosas sobre grid y flexbox son las propiedades de alineación. Naturalmente, CSS Masonry también tiene propiedades de alineación relacionadas con la mampostería y utilizan el mismo valor que las otras propiedades de alineación de cajas, así que no hay nada especialmente nuevo que descubrir.

Entonces, para este diseño de mampostería vertical que tengo aquí, hagamos algo así. Digamos que mi contenedor es realmente, realmente largo. Vamos a utilizar 150 unidades de altura de vista. Así que, ya sabes, un contenedor largo. Puedes utilizar la propiedad de alineación de pistas. Tenemos alinear pistas y justificar pistas. Nuevamente, dependiendo de la dirección que desees seguir, alinear pistas es para la dirección de bloque. Puedo empujarlos hacia abajo, hacia arriba, empujarlos al centro. Estas propiedades de alineación también funcionan si deseas utilizar el diseño de mampostería. Y por supuesto, también puedes hacer lo de abarcar, excepto que esta vez utilizarías la columna porque la dirección cambió, es grid plus plus, ¿verdad?

Actualmente, el grupo de trabajo está buscando comentarios sobre la implementación, todavía está en sus primeras etapas. Estoy seguro de que también hay errores en esta implementación de Firefox, así que hay muchos aspectos a considerar antes de que esté listo para producción. Si estás utilizando Firefox, esta función está detrás de una bandera para que puedas probarla por ti mismo. Regresemos a mis diapositivas, esto es el final, hombre. Como amante autoproclamado de CSS, debo decir que lo que me atrae de CSS es que no hay una única forma correcta de hacer las cosas. Es lo suficientemente flexible como para adaptarse a una variedad de situaciones. No puedes modificar el marcado, no te preocupes. Probablemente una combinación de propiedades de CSS puede solucionar el problema. Así que hay realmente muchos desarrollos emocionantes en CSS, lo que nos brinda más herramientas para estilizar la web. Así que espero que la próxima vez que se presente alguno de estos casos de uso para ti, en lugar de optar por una solución basada en JavaScript, pruebes la solución de CSS. Estos son los recursos. Compartiré estas diapositivas con todos. Hay un enlace en el pie de página. Gracias. Muchas gracias por escuchar la charla de CSS en la conferencia de JavaScript más grande en la nube.