Recientemente publiqué un artículo. La historia de las nuevas funciones aleatorias en CSS y cómo funcionan. En este artículo, exploraremos los desafíos de la aleatoriedad en CSS, cómo el concepto ha evolucionado con el tiempo y por qué esta característica nativa es importante.
Cuando comencé a desarrollar un sitio web, lo primero que quería hacer era crear una experiencia que fuera única para cada persona. Sólo pequeñas cosas: un fondo aleatorio aquí, un color aleatorio allá… Incluso las pequeñas microinteracciones como confeti o nieve que cae necesitan un cierto nivel de aleatoriedad para parecer naturales.
¡Y no estoy solo! Rápidamente descubrí que muchos desarrolladores web (“webmasters” en ese momento) querían hacer precisamente eso: agregar un factor sorpresa y una sensación de singularidad a sus sitios web. Pero nos topamos con un problema: CSS.
CSS es un lenguaje declarativo y determinista. Dos características que entran en conflicto con la idea de variación natural:
- declarativo significa que se centra en Qué,No cómo. A diferencia de los lenguajes imperativos, los desarrolladores que utilizan CSS le dicen al navegador cuál es el resultado esperado, pero no cómo lograrlo.
- certeza significa que para una entrada determinada, obtendremos la misma salida. Siempre es lo mismo. Si especifica que el color sea rojo, el color será rojo, no azul ni amarillo.
Esto es así por diseño y es una de las cosas que hace que CSS sea predecible y confiable. Si comprende cómo funciona el motor de diseño, podrá saber qué estilos se aplicarán en un momento dado. Esto es genial… pero no tanto si quieres generar contenido aleatorio.
Como resultado, los diseñadores y desarrolladores comenzaron un viaje desafiante (y a veces tortuoso) para lograr una variación natural en los sistemas deterministas.
El largo y tortuoso camino hacia el estilo aleatorio
El camino hacia el estilo aleatorio en CSS estuvo lleno de muchos intentos y fallas. Pero en cada paso del camino, los desarrolladores descubrieron nuevas soluciones que mejoraban las anteriores. Aunque sea un poquito.
notas: Esta línea de tiempo refleja una progresión lógica en lugar de un orden histórico o cronológico estricto.
Pseudoaleatoriedad y patrones CSS
Podemos simular la aleatoriedad en CSS creando patrones. Pero en realidad no es algo aleatorio. Los resultados son siempre los mismos y, tarde o temprano, la gente nota el patrón.
Una forma de crear esta simulación es utilizar :nth-child() selector o reproduciendo una animación. El primer método es sencillo pero no muy eficaz; el segundo puede engañar a algunas personas y dejarles una profunda impresión.
advertir: Reproducir medios automáticamente
No hace falta decir que estos son trucos que no proporcionan ningún nivel de aleatorización. Es posible que los humanos no puedan predecir con precisión qué valor vendrá después (al menos sin esforzarse), pero las máquinas ciertamente sí pueden.
Los preprocesadores vienen al rescate
Pasamos a la siguiente mejor opción: las herramientas. Especialmente preprocesadores CSS como Sass, SCSS, Less, etc. Estas herramientas incluyen módulos matemáticos que proporcionan funciones aleatorias que podemos usar en tiempo de compilación.
La palabra clave del párrafo anterior es “en tiempo de compilación.“Sí, estamos generando valores aleatorios para las propiedades CSS. Pero una vez que esos valores se generan durante la compilación, se congelan para siempre (o, más exactamente, hasta la siguiente compilación). Como un mosquito atrapado en ámbar.
Estos valores son aleatorios cuando se genera el CSS, pero obtendrá los mismos valores cada vez que un visitante visite o actualice la página. Para generar nuevos valores necesitamos volver a compilar la hoja de estilo.
Es un pequeño paso hacia looks aleatorios, pero aún queda un largo camino por recorrer.
Aleatoriedad del lado del servidor
Pasemos a la siguiente mejor opción: usar algún otro lenguaje para generar valores aleatorios y pasarlos a CSS a través de HTML. Los lenguajes del lado del servidor como PHP, Java, ASP, etc. son muy adecuados para esta tarea al generar HTML (o incluso el propio CSS).
Este enfoque funciona bien: cada vez que se genera la página (lo que generalmente significa cada vez que se visita o actualiza la página) obtenemos nuevos valores aleatorios. También tenemos control total sobre la aleatorización ya que podemos implementar nuestras propias funciones.
También tiene desventajas. Si se agrega contenido nuevo dinámicamente a la página, caerá en el valor “congelado” generado durante la carga inicial de la página. Mejor que los patrones, mejor que los preprocesadores… pero aún no es perfecto.
Con el aumento y la adopción generalizada de aplicaciones de una sola página y arquitecturas JavaScript del lado del cliente, esta limitación se convierte en un problema mayor.
Y JavaScript…¡por fin!
A medida que proliferan las aplicaciones web, tiene sentido trasladar la aleatoriedad a JavaScript. El lenguaje ya se usa mucho y agregar algunas funciones aleatorias no parece difícil.
¡JavaScript finalmente resuelve este problema! Por primera vez, los estilos pueden exhibir una variación natural: aleatoriamente cuando se crean, cuando se actualizan e incluso cuando se modifican.
También se puede hacer de diversas formas: utilizando marcos, bibliotecas CSS-in-JS o JavaScript simple. Hay muchas formas de combinar estilos a través de este lenguaje y están bien soportadas. Hay algunos problemas de rendimiento y complejidad, pero JavaScript hace el trabajo.
Finalmente tenemos una verdadera aleatorización en los estilos web… pero no en el CSS mismo.
Un problema web y una solución web
La última parte es importante. Hicimos aleatorización en la web (JavaScript hizo el trabajo), pero algo no parecía bien. Algo no se siente bien. Básicamente, este malestar proviene de dos cosas:
- Estamos aplicando soluciones imperativas a problemas declarativos.
- Estamos trasladando las decisiones de diseño de CSS a JavaScript.
Solución obligatoria a cuestiones declarativas.
Mencionamos anteriormente que CSS es un lenguaje declarativo que se centra en Quémientras que JavaScript es un lenguaje imperativo centrado en cómo.
Al trasladar la aleatorización a JavaScript, intentamos responder la pregunta Qué problema con cómo respuesta. Funciona, pero no es lo ideal.
Al usar JavaScript, terminamos con estilos aleatorios en todos los niveles: cuando se crea la página, cuando se actualiza y cuando se agregan o cambian (mutan) elementos. Pero al hacerlo, estamos rompiendo moldes.
CSS maneja el diseño y JavaScript maneja la lógica. Solucionamos las limitaciones de CSS trasladando las decisiones de diseño a JavaScript, creando una falta de coincidencia que crea una sensación sutil de “esto no está del todo bien”, aunque todo está técnicamente bien.
solución CSS
Resolver el problema de la falta de coincidencia de modelos es simple: Mover la aleatorización a CSS. Resuelva problemas de diseño directamente en la capa de diseño en lugar de delegarlos a diferentes herramientas o lenguajes. Esto sucede al introducir dos nuevas funciones aleatorias como Valores y Unidades CSS Mod Nivel 5:
random(): Genera un valor aleatorio entre los valores mínimo y máximo.random-item(): Seleccione un valor aleatorio de la lista dada.
Este método también es consistente con regla de potencia mínimaque sugiere elegir el lenguaje menos potente y adecuado para un propósito determinado. En la práctica, esto significa resolver un problema utilizando el lenguaje más débil capaz de expresar y resolver el problema.
Generalmente, ese lenguaje es más adecuado para la tarea. Sus funciones se ajustarán según su nivel de aplicación, haciéndolo más sencillo, más eficiente y más eficaz. Si bien un lenguaje más potente ciertamente puede hacer el trabajo, a menudo introduce complejidad y capas de abstracción innecesarias.
En la plataforma online tenemos lenguaje de marcado de hipertexto Para estructuras (más débiles), CSS para estilo y diseño (más potente), y javascript (significativamente más potente). Al implementar la aleatorización en CSS, trasladamos la solución a la capa apropiada mientras cumplimos con las reglas de potencia mínima.
Esta es una de las razones por las que las nuevas funciones CSS aleatorias son tan importantes… y por las que representan algo más que simplemente otra característica.
evento
CSS siempre ha sido determinista por diseño y la aleatoriedad nativa rompe esa tradición. No es una característica más, representa un cambio en la forma en que pensamos sobre CSS como lenguaje y la plataforma web en sí.
Por primera vez, CSS puede modelar directamente sistemas naturales con variación: sin hacks, sin herramientas, sin necesidad de subcontratar las decisiones de diseño a otros lenguajes. La aleatorización ocupa un lugar importante en la capa de estilo, donde siempre ha pertenecido.
Esto abre posibilidades creativas: diseños generativos, patrones orgánicos, microinteracciones interesantes y sistemas de diseño dinámicos y únicos. Pero también restaura la claridad arquitectónica: cada capa de la red vuelve a hacer el trabajo para el que fue diseñada.
Con este cambio, CSS pasó de un lenguaje de estilo puro a un sistema de diseño generativo. Ya no es sólo un participante pasivo en el desarrollo web; se convierte en un participante activo en el proceso de renderizado, definiendo el espacio de posibles resultados que el navegador analiza en una página específica.
Ese es el verdadero problema. La aleatoriedad nativa no sólo hace que las cosas parezcan diferentes; Esto es para hacer que la plataforma sea más coherente y expresiva.
También es un recordatorio de que CSS todavía está evolucionando y, a veces, las características que se pasan por alto pueden cambiar nuestra forma de pensar sobre el lenguaje y cómo imaginamos la web.
