Diseño web de nueva generación

Familiarízate con algunas de las interesantes funciones del CSS moderno.

Adam Argyle

Una Kravets

Actualmente, hay muchas actividades emocionantes en CSS, y muchas de ellas ya son compatibles con los navegadores actuales. Nuestra charla en CDS 2019, que puedes mirar a continuación, aborda varias funciones nuevas y futuras que pensamos que deberían llamar la atención.

Esta publicación se enfoca en las funciones que puedes usar en la actualidad, así que asegúrate de mirar la charla para obtener un análisis más detallado 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 de desplazamiento
• :focus-within
• Consultas de medios nivel 5
• Propiedades lógicas
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS Houdini
• Desbordamiento

Snap de desplazamiento

Scroll Snap te permite definir puntos de ajuste a medida que el usuario se desplaza por tu contenido en sentido vertical, horizontal o ambos. Ofrece inercia de desplazamiento y desaceleración integradas y está habilitada para el tacto.

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

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

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

Aquí te mostramos cómo funciona:

• En el elemento <section> superior, haz lo siguiente:
  • overflow-x se configuró en auto para permitir el desplazamiento horizontal.
  • overscroll-behavior-x se configura como contain para evitar que cualquier elemento superior se desplace 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 configura en x (para el ajuste horizontal) y en mandatory para garantizar que el viewport siempre se ajuste al punto de ajuste más cercano.
• En los elementos secundarios <picture>, se configura scroll-snap-align para comenzar, lo que establece los puntos de ajuste del lado izquierdo de cada imagen (suponiendo que direction esté establecido en ltr).

Y aquí hay una demostración en vivo:

También puedes consultar las demostraciones de ajuste de desplazamiento vertical y ajuste de desplazamiento de matriz.

Nota: Si bien el ajuste con desplazamiento admite esta opción, ten cuidado cuando lo uses a nivel de la página, ya que, en algunos casos, puede parecer que el usuario le está controlando. En general, es mejor aplicar ajustes a un componente de tu página en lugar de la página en sí.

:focus-within

:focus-within aborda 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ú debe 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 se enfoca en cualquier elemento secundario de un elemento especificado. Si volvemos al ejemplo del menú, si configuras :focus-within en el elemento de menú, puedes asegurarte de que se mantenga visible cuando un elemento de menú esté enfocado:

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

Intenta navegar con tabulación por los elementos enfocables en la siguiente demostración. Notarás que los menús permanecen visibles a medida que te enfocas en los elementos del menú:

Nivel 5 de consultas de medios

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

Estas son las búsquedas nuevas que creemos que más entusiasmarán a los desarrolladores:

• prefers-reduced-motion
• prefers-color-scheme
• prefiere-contraste
• prefers-reduced-transparency
• colores-forzados
• colores-invertidos

Estas consultas son una gran victoria en la accesibilidad. Anteriormente, no teníamos forma de saber, por ejemplo, si 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 mantuviera fiel a tu marca, tenías que pedirles a los usuarios que lo elijan desde la IU de tu app. Ahora puedes detectar la configuración de contraste alto del SO mediante prefers-contrast.

Una implicación interesante de estas consultas de medios es que podemos diseñar para múltiples combinaciones de preferencias del usuario a nivel del sistema para adaptarse a la amplia gama de preferencias del usuario y necesidades de accesibilidad. Puedes usar el modo oscuro de contraste alto en entornos con iluminación tenue.

Es importante para Adam que la frase "prefiere el movimiento reducido" no se implemente como "sin movimiento". El usuario afirma que prefiere tener menos movimiento y no que no desea ninguna animación. Afirma que el movimiento reducido no es movimiento. A continuación, te mostramos un ejemplo en el que se usa una animación de encadenado cuando el usuario prefiere un movimiento reducido:

Nota: En Chrome Canary, puedes probar las CSS que usan prefers-reduced-motion o prefers-color-scheme. Para ello, selecciona la configuración apropiada en el panel lateral Renderización de Herramientas para desarrolladores. Para acceder a Renderización, abre el Menú de comandos y ejecuta el comando Show Rendering.

Propiedades lógicas

Las propiedades lógicas resuelven un problema que se fue ganando 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.

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

Las propiedades lógicas te permiten mantener la integridad del diseño en todos los modos de traducción y 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 bloque es perpendicular al flujo de texto en una línea. (En inglés, block-size es lo mismo que height).
• La dimensión intercalada 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 igual que top, y inline-end es igual que right.

Con las propiedades lógicas, puedes actualizar automáticamente tu 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.

Puedes ver cómo funcionan las propiedades lógicas en la siguiente demostración si configuras la propiedad writing-mode en el elemento <body> con valores diferentes:

position: sticky

Un elemento con position: sticky permanece en el flujo de bloque hasta que comienza a salir de la pantalla. En ese momento, deja de desplazarse con el resto de la página y se mantiene en la posición que especifica el valor top del elemento. El espacio asignado para ese elemento permanece en el flujo, y el elemento se muestra 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 utiliza en gran medida 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 fijada.

Diapositiva adhesiva

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 a los más altos. En otras palabras, parecen competir por la posición atascada.

Sticky Desperado

Al igual que Sticky Slide, los elementos fijos de esta demostración son similares. Sin embargo, se colocaron en contenedores establecidos 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 aplicar al elemento en sí. Esto genera muchos efectos geniales que antes solo se podían lograr mediante hackeos complicados de CSS y JavaScript, con una línea de CSS.

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

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

:is()

Si bien la pseudoclase :is() tiene más de diez años de antigüedad, todavía no considera el uso que creemos que merece. Toma como argumento una lista de selectores separados por comas y coincide con cualquier selector de 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 tiene gap (anteriormente grid-gap) desde hace tiempo. Cuando se especifica el espaciado interno de un elemento contenedor en lugar del espaciado alrededor de elementos secundarios, gap soluciona muchos problemas de diseño comunes. Por ejemplo, con los espacios, no debes preocuparte por los márgenes de los elementos secundarios que generan espacios en blanco no deseados alrededor de los bordes de un elemento contenedor:

Noticias aún mejores: gap llegará a Flexbox y ofrecerá los mismos beneficios 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 poseer el espaciado; el elemento contenedor es el propietario del espaciado.
• El código es más fácil de entender que las estrategias 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:

En este momento, solo FireFox admite gap en diseños flexibles, pero prueba 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 permiten indicarle al navegador cómo interpretar las CSS personalizadas. En otras palabras, te brinda acceso al Modelo de objetos de CSS, lo que te permite extender CSS a través de JavaScript. Esto tiene varios beneficios, como los siguientes:

• Te da mucho más poder para crear funciones personalizadas de CSS.
• Es más fácil separar los problemas de renderización de la lógica de la app.
• 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 representación.

Houdini es un nombre general para varias APIs. Si quieres obtener más información sobre ellos y su estado actual, consulta ¿Ya no está listo Houdini? En nuestra charla, abordamos la API de Properties y Values, la API de Paint y el Worklet de Animation, ya que son los más compatibles en la actualidad. Podríamos dedicar fácilmente una publicación completa a cada una de estas emocionantes APIs, pero, por ahora, mira nuestra charla para obtener una descripción general y algunas demostraciones interesantes que empiezan a darte una idea de lo que puedes hacer con las APIs.

Menú ampliado

Hay un par de cosas más en el horizonte que queríamos analizar, pero no tuvimos tiempo de abordarlas en profundidad, así que las repasamos muy rápido.⚡ Si aún no conoces algunas de estas funciones, asegúrate de mirar la última parte de la charla.

• size: Es una propiedad que te permitirá establecer la altura y el ancho al mismo tiempo.
• aspect-ratio: Es una propiedad que establece una relación de aspecto para los elementos que no la tienen de forma intrínseca.
• min(), max() y clamp(): Son funciones que te permitirán establecer restricciones numéricas en cualquier propiedad de 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, 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 permitirán rellenar un área específica no rectangular desde la que pueda fluir el contenido.
• Módulos CSS: JavaScript puede solicitar un módulo de CSS y obtener un objeto enriquecido que facilita la realización de operaciones en