Diseño web de nueva generación

Entérate de algunas de las interesantes funciones del CSS moderno.

Adam Argyle
Una Kravets

Hay toneladas de cosas emocionantes en CSS en este momento, y muchos de ellos ya son compatibles con los navegadores actuales. Nuestra charla en CDS 2019, que puedes mirar a continuación, abarca varias funciones nuevas y futuras que pensamos que debían llamar la atención.

Esta publicación se enfoca en las funciones que puedes usar actualmente así que asegúrense de ver la charla para discutir más detalladamente sobre las próximas funciones, como Houdini. También puedes encontrar demostraciones de todas las funciones de las que hablamos en nuestra Página de CSS@CDS.

Contenido

Ajuste de desplazamiento

Ajuste de desplazamiento te permite definir puntos de ajuste a medida que el usuario se desplaza por tu contenido de forma vertical, horizontal o ambas. Ofrece inercia de desplazamiento y desaceleración integradas, además de habilitar el tacto.

En este código de ejemplo, se configura el desplazamiento horizontal en un elemento <section> con puntos de ajuste alineados a los lados izquierdos de los elementos <picture> secundarios:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

A continuación, le indicamos cómo funciona:

  • En el elemento superior <section>,
    • overflow-x se establece en auto para permitir el desplazamiento horizontal.
    • overscroll-behavior-x se establece en contain para evitar que se desplacen los elementos superiores cuando el usuario alcanza los límites del área de desplazamiento del elemento <section>. (Esto no es estrictamente necesario para el ajuste, pero suele ser una buena idea).
    • scroll-snap-type se establece en x (para el ajuste horizontal) y en mandatory, a fin de garantizar que el viewport siempre se ajuste al punto de ajuste más cercano.
  • En los elementos <picture> secundarios, scroll-snap-align se configura como inicio, lo que establece los puntos de ajuste en el lado izquierdo de cada foto (suponiendo que direction se establezca en ltr).

Y aquí hay una demostración en vivo:

También puedes ver las demostraciones del ajuste de desplazamiento vertical y el ajuste de desplazamiento matricial.

:focus-within

:focus-within soluciona un problema de accesibilidad de larga data: hay muchos casos en los que enfocar un elemento secundario debería afectar la presentación de un elemento superior para que los usuarios de tecnologías de accesibilidad puedan acceder a la IU.

Por ejemplo, si tienes un menú desplegable con varios elementos, el menú debería permanecer visible mientras cualquiera de los elementos esté enfocado. De lo contrario, el menú desaparecerá para los usuarios de teclado.

:focus-within le indica al navegador que aplique un estilo cuando el enfoque está en cualquier elemento secundario de un elemento especificado. Volviendo al ejemplo del menú, cuando configuras :focus-within en el elemento de menú, puedes asegurarte de que permanezca visible cuando se enfoque un elemento de menú:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

Una ilustración que muestra la diferencia de comportamiento entre enfoque y enfoque interno.

Prueba desplazarte con tabulación por los elementos enfocables en la demostración a continuación. Notarás que los menús permanecen visibles mientras te enfocas en los elementos del menú:

Nivel 5 de las consultas de medios

Las nuevas consultas de medios nos brindan formas eficaces de ajustar la experiencia del usuario en nuestras apps según sus preferencias de dispositivo. Básicamente, el navegador sirve como proxy de las preferencias de nivel del sistema a las que podemos responder en nuestro CSS mediante el grupo de consultas de medios prefers-*:

Diagrama que muestra consultas de medios en las que se interpretan las preferencias del usuario a nivel del sistema.

Estas son las nuevas consultas que creemos que les encantarán a los desarrolladores:

Estas consultas son un gran logro para la accesibilidad. Antes no teníamos manera de saber, por ejemplo, que un usuario había configurado su SO en el modo de contraste alto. Si querías proporcionar un modo de contraste alto para una app web que se mantuvo fiel a tu marca, tenías que pedirles a los usuarios que lo eligieran en la IU de tu app. Ahora puedes detectar la configuración de contraste alto del SO con prefers-contrast.

Una implicación emocionante de estas consultas de medios es que podemos diseñar para múltiples combinaciones de preferencias del usuario a nivel del sistema para adaptarnos a la amplia gama de preferencias del usuario y necesidades de accesibilidad. Si un usuario quiere el modo oscuro de alto contraste en entornos con iluminación tenue, puedes hacerlo.

Para Adam, es importante que "prefiera la reducción del movimiento". no se implementa como "sin movimiento". El usuario dice que prefiere menos movimiento, no que no quiere ninguna animación. Él afirma que el movimiento reducido no es movimiento. A continuación, verás un ejemplo en el que se usa una animación de encadenado cuando el usuario prefiere un movimiento reducido:

.

Propiedades lógicas

Las propiedades lógicas resuelven un problema que se ha ganado visibilidad a medida que más desarrolladores abordan la internacionalización. Muchas propiedades de diseño, como margin y padding, suponen un idioma que se lee de arriba a abajo y de izquierda a derecha.

Diagrama que muestra las propiedades tradicionales de diseño de CSS.

Al diseñar páginas para varios lenguajes con diferentes modos de escritura, los desarrolladores tuvieron que ajustar todas esas propiedades de forma individual en varios elementos, lo que rápidamente se convierte en una pesadilla para el mantenimiento.

Las propiedades lógicas te permiten mantener la integridad del diseño en las traducciones y los modos de escritura. Se actualizan de forma dinámica en función del orden semántico del contenido en lugar de su disposición espacial. Con las propiedades lógicas, cada elemento tiene dos dimensiones:

  • La dimensión del bloque es perpendicular al flujo de texto en una línea. (en inglés, block-size es lo mismo que height).
  • La dimensión inline es paralela al flujo de texto en una línea. (en inglés, inline-size es lo mismo que width).

Estos nombres de dimensiones se aplican a todas las propiedades de diseño lógicas. Por ejemplo, en inglés, block-start es lo mismo que top, y inline-end es lo mismo que right.

Diagrama que muestra las nuevas propiedades de diseño lógico de CSS.

Con las propiedades lógicas, puedes actualizar automáticamente el diseño para otros idiomas con solo cambiar las propiedades writing-mode y direction de tu página, en lugar de actualizar decenas de propiedades de diseño en elementos individuales.

Para ver cómo funcionan las propiedades lógicas en la siguiente demostración, configura la propiedad writing-mode del elemento <body> con diferentes valores:

position: sticky

Un elemento con position: sticky permanece en el flujo de bloques hasta que comienza a salir de la pantalla. A partir de ese momento, dejará de desplazarse con el resto de la página. y se queda en la posición especificada por el valor top del elemento. El espacio asignado para ese elemento permanece en el flujo y el elemento regresa a ella cuando el usuario se desplaza hacia arriba.

El posicionamiento fijo te permite crear muchos efectos útiles que antes requerían JavaScript. Para mostrar algunas de las posibilidades, hemos creado varias demostraciones. Cada demostración usa casi el mismo CSS y solo ajusta ligeramente el lenguaje de marcado HTML para crear cada efecto.

Pila fija

En esta demostración, todos los elementos fijos comparten el mismo contenedor. Eso significa que cada elemento fijo se desliza sobre el anterior a medida que el usuario se desplaza hacia abajo. Los elementos fijos comparten la misma posición fija.

Diapositiva fija

En este caso, los elementos pegajosos son primos. (Es decir, sus padres son hermanos). Cuando un elemento fijo llega al límite inferior de su contenedor, se mueve hacia arriba con el contenedor, lo que crea la impresión de que los elementos fijos inferiores están empujando hacia arriba a los más altos. En otras palabras, parecen competir por la posición de bloqueo.

Desperado pegajoso

Al igual que las diapositivas adhesivas, los elementos fijos de esta demostración son primos. Sin embargo, se colocaron en contenedores configurados con un diseño de cuadrícula de dos columnas.

backdrop-filter

La propiedad backdrop-filter te permite aplicar efectos gráficos al área detrás de un elemento, en lugar de hacerlo al elemento en sí. Esto hace que muchos efectos geniales que antes solo se podían lograr con hackeos complicados de CSS y JavaScript se pueden realizar con una línea de CSS.

Por ejemplo, en esta demostración, se usa backdrop-filter para lograr el desenfoque del estilo del SO:

Ya tenemos una excelente publicación sobre backdrop-filter, así que dirígete para obtener más información.

:is()

Si bien la pseudoclase :is() tiene más de diez años de antigüedad, aún no le da tanto uso como creemos que se merece. Toma una lista de selectores separados por comas como su argumento y hace coincidir cualquier selector en esa lista. Esa flexibilidad lo hace increíblemente práctico y puede reducir significativamente la cantidad de CSS que envías.

A continuación, le mostramos un ejemplo simple:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

El diseño de cuadrícula de CSS ha tenido gap (antes grid-gap) durante un tiempo. Cuando se especifica el espaciado interno de un elemento contenedor en lugar del espaciado alrededor de los elementos secundarios, gap resuelve muchos problemas comunes de diseño. Por ejemplo, con los espacios, no tienes que preocuparte por que los márgenes en los elementos secundarios causen espacios en blanco no deseados alrededor de los bordes de un elemento contenedor:

Ilustración que muestra cómo la propiedad de separación evita los espacios no deseados alrededor de los bordes de un elemento de contenedor

Noticias aún mejores: gap llegará a flexbox, con las mismas ventajas de espaciado que tiene la cuadrícula:

  • Existe una declaración de espaciado en lugar de muchas.
  • No es necesario establecer convenciones para tu proyecto sobre qué elementos secundarios deben tener espaciado; en su lugar, el elemento contenedor es propietario del espaciado.
  • El código es más fácil de entender que las estrategias más antiguas, como el búho lobotomizado.

En el siguiente video, se muestran los beneficios de usar una sola propiedad gap para dos elementos, uno con un diseño de cuadrícula y otro con un diseño flexible:

Por el momento, solo FireFox admite gap en diseños flexibles, pero experimenta con esta demostración para ver cómo funciona:

CSS Houdini

Houdini es un conjunto de APIs de bajo nivel para el motor de renderización del navegador que te permite indicarle al navegador cómo interpretar el código CSS personalizado. En otras palabras, te brinda acceso al modelo de objetos de CSS, lo que te permite extender CSS mediante JavaScript. Esto tiene varios beneficios, como los siguientes:

  • Proporciona mucha más potencia para crear funciones de CSS personalizadas.
  • Resulta más fácil separar los problemas de renderización de la lógica de la aplicación.
  • Es más eficaz que el polyfilling CSS que actualmente realizamos con JavaScript, ya que el navegador ya no tendrá que analizar secuencias de comandos y realizar un segundo ciclo de renderización. El código Houdini se analiza en el primer ciclo de renderización.

Ilustración que muestra cómo funciona Houdini en comparación con los polyfills tradicionales de JavaScript.

Houdini es un nombre general para varias APIs. Si quieres obtener más información al respecto y su estado actual, consulta el artículo Is Houdini Ready Yet? (¿Es Houdini está listo todavía?). En nuestra charla, hablamos de la API de propiedades y valores, la API de pintura y el Worklet de animación porque son las más compatibles en la actualidad. Podríamos dedicar fácilmente una publicación completa a cada una de estas interesantes APIs, pero, por ahora, consulten nuestra charla para ver una descripción general y algunas demostraciones interesantes que comienzan a dar una idea de lo que pueden hacer con las APIs.

Menú ampliado

Queríamos analizar algunas cuestiones más, pero no tuvimos tiempo de verlas en profundidad, así que las analizamos en una ronda rápida.⚡ Si todavía no conoces algunas de estas funciones, mira la última parte de la charla.

  • size: Una propiedad que te permitirá establecer alto y ancho al mismo tiempo
  • aspect-ratio: Es una propiedad que establece una relación de aspecto para los elementos que no tienen uno intrínseco.
  • min(), max() y clamp(): Funciones que te permitirán establecer restricciones numéricas en cualquier propiedad de CSS, no solo el ancho y la altura
  • list-style-type es una propiedad existente, pero pronto admitirá un rango más amplio de valores, incluidos emojis y SVG.
  • display: outer inner: La propiedad display pronto aceptará dos parámetros, que te permitirán especificar de forma explícita sus diseños internos y externos, en lugar de usar palabras clave compuestas, como inline-flex.
  • Regiones de CSS: Te permiten rellenar un área no rectangular específica por la que puede fluir el contenido.
  • Módulos CSS: JavaScript podrá solicitar un módulo CSS y recuperar un objeto enriquecido en el que es fácil realizar operaciones.