Diseño web de nueva generación

Mantente al día sobre algunas de las funciones interesantes del CSS moderno.

Adam Argyle
Una Kravets

En este momento, hay una gran cantidad de novedades interesantes en CSS, y muchas de ellas ya son compatibles con los navegadores actuales. En nuestra charla en CDS 2019, que puedes mirar a continuación, se abarcan varias funciones nuevas y próximas que pensamos que deberían recibir atención.

En esta publicación, se enfocan las funciones que puedes usar hoy mismo, así que asegúrate de mirar la charla para obtener una explicación más detallada de las próximas funciones, como Houdini. También puedes encontrar demostraciones de todas las funciones que analizamos en nuestra página CSS@CDS.

Contenido

Ajuste del 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 muestra, se configura el desplazamiento horizontal en un elemento <section> con puntos de ajuste alineados con 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 <section> superior, haz lo siguiente:
    • 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 llega a 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 mandatory (para garantizar que la vista del puerto siempre se ajuste al punto de ajuste más cercano).
  • En los elementos secundarios <picture>, scroll-snap-align se establece para comenzar, lo que establece los puntos de ajuste en el lado izquierdo de cada imagen (suponiendo que direction esté configurado 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 aborda un problema de accesibilidad de larga data: hay muchos casos en los que enfocar un elemento secundario debe 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ú, si configuras :focus-within en el elemento del menú, puedes asegurarte de que permanezca visible cuando un elemento del menú tenga el foco:

.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ú:

Consultas de medios de nivel 5

Las nuevas consultas de contenido multimedia nos brindan formas eficaces de ajustar la experiencia del usuario de nuestras apps en función de las preferencias de su dispositivo. Básicamente, el navegador funciona como un proxy para las preferencias a nivel del sistema a las que podemos responder en nuestro CSS con el grupo de consultas de medios prefers-*:

Un diagrama que muestra las consultas de contenido multimedia que interpretan las preferencias del usuario a nivel del sistema.

Estas son las consultas nuevas que creemos que más entusiasmarán a los desarrolladores:

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

Una implicación interesante de estas consultas de medios es que podemos diseñar para varias combinaciones de preferencias del usuario a nivel del sistema para adaptarse a la amplia variedad de preferencias y necesidades de accesibilidad de los usuarios. Si un usuario quiere el modo oscuro de alto contraste en entornos con iluminación tenue, puedes hacerlo.

Para Adam, es importante que la opción “Prefiere movimiento reducido” no se implemente como “Sin movimiento”. El usuario dice que prefiere menos movimiento, no que no quiere ninguna animación. Afirma que el movimiento reducido no es la ausencia de movimiento. Este es un ejemplo que usa una animación de transición cuando el usuario prefiere reducir el movimiento:

Propiedades lógicas

Las propiedades lógicas resuelven un problema que 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 abajo y de izquierda a derecha.

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

Cuando se diseñan páginas para varios idiomas con diferentes modos de escritura, los desarrolladores deben ajustar todas esas propiedades de forma individual en varios elementos, lo que se convierte rápidamente en una pesadilla de mantenimiento.

Las propiedades lógicas te permiten mantener la integridad del diseño en todas las traducciones y 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 de bloque es perpendicular al flujo de texto en una línea. (En inglés, block-size es igual a height).
  • La dimensión inline es paralela al flujo de texto en una línea. (En inglés, inline-size es igual a 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.

Un diagrama que muestra las nuevas propiedades de diseño lógico del CSS.

Con las propiedades lógicas, puedes actualizar automáticamente el diseño para otros idiomas simplemente cambiando 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, establece la propiedad writing-mode en el elemento <body> en diferentes valores:

position: sticky

Un elemento con position: sticky permanece en el flujo de bloques hasta que comienza a salir de la pantalla, en cuyo punto deja de desplazarse con el resto de la página y se adhiere a la posición especificada por el valor top del elemento. El espacio asignado para ese elemento permanece en el flujo, y el elemento vuelve a él cuando el usuario se desplaza hacia arriba.

La posición fija 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 en gran medida el mismo CSS y solo ajusta ligeramente el marcado HTML para crear cada efecto.

Pila fija

En esta demostración, todos los elementos fijos comparten el mismo contenedor. Esto 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

Aquí, los elementos fijos 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 empujan hacia arriba los más altos. En otras palabras, parecen competir por la posición bloqueada.

Sticky Desperado

Al igual que la diapositiva fija, los elementos fijos de esta demostración son primos. Sin embargo, se han colocado 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 trucos complicados de CSS y JavaScript se pueden realizar con una línea de CSS.

Por ejemplo, esta demostración usa backdrop-filter para lograr un desenfoque al estilo del SO:

Ya tenemos una gran publicación sobre backdrop-filter, así que visita esta página 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 útil 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 el espacio, no tienes que preocuparte por los márgenes en los elementos secundarios que causan 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

Tenemos mejores noticias: gap llegará a flexbox y traerá todas las mismas ventajas de espaciado que tiene la cuadrícula:

  • Hay 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 cambio, el elemento contenedor es el 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 la CSS personalizada. En otras palabras, te brinda acceso al modelo de objetos de CSS, lo que te permite extend CSS a través de JavaScript. Esto tiene varios beneficios, como los siguientes:

  • Te brinda mucho más poder para crear funciones de CSS personalizadas.
  • Es más fácil separar las inquietudes de renderización de la lógica de la aplicación.
  • Tiene un mejor rendimiento que el polyfilling de CSS que hacemos actualmente con JavaScript, ya que el navegador ya no tendrá que analizar secuencias de comandos ni realizar un segundo ciclo de renderización. El código de Houdini se analiza en el primer ciclo de renderización.

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

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 Properties and Values, la API de Paint y la Worklet de animación porque, actualmente, son las más compatibles. Podríamos dedicar fácilmente una publicación completa sobre 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(): Son funciones que te permitirán establecer restricciones numéricas en cualquier propiedad CSS, no solo en 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, lo que te permitirá especificar explícitamente sus diseños externos e internos en lugar de usar palabras clave compuestas como inline-flex.
  • Regiones de CSS: Te permitirán completar un área no rectangular especificada en la que el contenido puede entrar y salir.
  • Módulos CSS: JavaScript podrá solicitar un módulo CSS y obtener un objeto enriquecido en el que sea fácil realizar operaciones.