RESUMEN RÁPIDO ↬ 2022 se perfila como un gran año para CSS, con una plétora de nuevas características en el horizonte. Algunos ya están comenzando a aterrizar en los navegadores, es probable que otros obtengan una amplia compatibilidad con los navegadores en 2022, mientras que para uno o dos el proceso puede ser un poco más largo. En este artículo vamos a echar un vistazo a algunos de ellos.
Las consultas de contenedor nos permiten diseñar un elemento según el tamaño de su padre, una diferencia crucial con las consultas de medios, que solo consultan la ventana gráfica. Esto ha sido durante mucho tiempo un problema para el diseño receptivo, ya que a menudo queremos que un componente se adapte a su contexto.
Piense en una tarjeta que podría mostrarse en un área de contenido amplia o en una barra lateral estrecha. Probablemente querríamos mostrar algo más parecido al diseño móvil de la tarjeta en la barra lateral, mientras mostramos estilo cuando hay suficiente espacio horizontal. Pero las consultas de medios no conocen el contexto del componente. Por esta razón, las consultas de contenedores han estado en la lista de deseos de muchos desarrolladores durante algún tiempo.
Consultas De Contenedores #
¿CÓMO LOS USAMOS? #
Para una consulta de contenedor, necesitamos especificar un elemento como nuestro contenedor, usando la containerpropiedad (abreviatura de container-typey container-name). El container-typepuede ser width, heighto . y son propiedades lógicas , que pueden producir resultados diferentes según el modo de escritura del documento .inline-sizeblock-sizeinline-sizeblock-size
main, aside {
container: inline-size;
}
Copiar
Entonces podemos usar la @containerregla arroba de una manera similar a una consulta de medios. Tenga en cuenta la forma diferente en que la regla se puede expresar entre paréntesis ( inline-size > 30emen lugar de min-width: 30em). Esto es parte de la especificación Media Queries Level 4 . Para el ejemplo de diseño de tarjeta anterior, cuando el contenedor es más ancho que 30 rem, cambiamos a un diseño horizontal usando flexbox:
@container (inline-size > 30em) {
.card {
display: flex;
}
}
Copiar
La especificación CSS Containment Level 3 se encuentra actualmente en un borrador de trabajo, lo que significa que la sintaxis podría cambiar en cualquier momento; de hecho, ha cambiado desde que se publicaron algunos artículos sobre consultas de contenedores el año pasado. Los ejemplos aquí están en línea con la sintaxis propuesta en el momento de escribir este artículo.
¿PUEDO USARLOS? #
Chrome afirma admitir consultas de contenedores detrás de una bandera, pero la implementación funcional no parece ser consistente con la especificación actual. Hay un polyfill , pero no funciona con la sintaxis más reciente. Entonces, la respuesta corta es "no", definitivamente le insto a que espere un poco antes de usarlos en producción. Pero hay mucho impulso detrás de las consultas de contenedores, por lo que espero más soporte general pronto.
RECURSOS #
Módulo de contención CSS nivel 3 (especificación oficial)
Introducción a las consultas de contenedores por Stephanie Eckles
Consultas de contenedor CSS: un primer vistazo por Bramus Van Damme
Say Hello to Container Queries por Ahmad Shadeed (La sintaxis a la que se hace referencia en esta publicación ahora está desactualizada, pero aún contiene algunos buenos ejemplos).
:has() #
¿QUÉ ES? #
¿CÓMO LO USAMOS? #
Para diseñar elementos que contienen un
:
section:has(h2) {
background: lightgray;
}
Copiar
Para aplicar estilo a un , solo si su padre también contiene un
:
section:has(h2) img {
border: 5px solid lime;
}
Copiar
¿PUEDO USARLO? #
Aún no es compatible con los principales navegadores, pero puedes jugar con él al contenido de tu corazón en Safari Technology Preview . Consulte esta demostración en navegadores compatibles.
RECURSOS #
Selectores CSS Nivel 4 (especificaciones oficiales)
El selector CSS :has() es mucho más que un "Selector principal" de Bramus van Damme
El selector CSS :has() de Robin Rendle (CSS Tricks)
¡Más después del salto! Continúe leyendo a continuación ↓
Conozca Smashing Online Workshops sobre front-end y UX , con lecciones prácticas, sesiones en vivo, grabaciones de video y preguntas y respuestas amigables. Sobre sistemas de diseño, UX, rendimiento web y CSS/JS. Con Brad Frost, Stephanie Troeth y tantos otros .
Saltar a los talleres en línea ↬
Panel de funciones
@when/@else #
¿QUÉ ES? #
Una regla arroba para condicionales en CSS, similar a la lógica if/else en otros lenguajes de programación. Podría hacer que escribir consultas de medios complejas sea mucho más lógico, por ejemplo. @whenFue elegido en lugar de @ifpara evitar un conflicto con Sass.
¿CÓMO LO USAMOS? #
Podemos consultar múltiples condiciones de medios o características admitidas, como si la ventana gráfica de un usuario tiene un ancho determinado y su navegador admite subcuadrícula. Cuando usamos @when/@else, eliminamos @la regla de la consulta:
@when media(min-width: 30em) and supports(display: subgrid) {
/* Styles for viewports over 30em, where the browser also supports subgrid /
} @else {
/ Styles for browsers that do not meet the condition */
}
Copiar
¿PUEDO USARLO? #
No todavía. Es muy pronto, y todavía está en discusión. No esperaría que la compatibilidad con los navegadores se implementara ampliamente este año, pero definitivamente es algo a tener en cuenta.
RECURSOS #
Módulo de reglas condicionales CSS Nivel 5 (especificación oficial)
Ampliación de las cadenas when/else de CSS: un primer vistazo de Kingsley Ubah (blog de LogRocket)
Propuesta para CSS @when por Chris Coyier (CSS Tricks)
Universidad de Belmont
Belmont va por el oro en los Premios Nacionales ADDY
Eche un vistazo a nuestro trabajo estudiantil ganador del premio Regional
VER TRABAJO GANADOR
accent-color #
¿QUÉ ES? #
La accent-colorpropiedad hace que sea rápido y fácil implementar los colores de nuestra marca en ciertas entradas de formulario al aprovechar los estilos de agente de usuario. Piense en casillas de verificación, botones de radio, entradas de rango y barras de progreso. Históricamente, estos son un poco difíciles de diseñar, y todos los navegadores los representan de manera ligeramente diferente. Como desarrolladores, la opción de acceso, la mayoría de las veces, es ocultar la entrada predeterminada y desplegar la nuestra usando pseudo-elementos . accent-colornos permite mantener la entrada predeterminada del navegador, pero aplicar un color que encaje con nuestra marca.
¿CÓMO LO USAMOS? #
El uso es simple y la propiedad se hereda, por lo que puede configurarla en el nivel raíz para aplicarla en todas partes:
:root {
accent-color: lime;
}
Copiar
O en elementos individuales:
form {
accent-color: lime;
}
input[type="checkbox"] {
accent-color: hotpink;
}
Copiar
¿PUEDO USARLO? #
¡Sí! accent-colores compatible con Chrome, Edge, Firefox y Safari Technology Preview. Los navegadores que no lo admitan simplemente obtendrán los colores predeterminados y las entradas seguirán siendo perfectamente utilizables, excelente para la mejora progresiva.
RECURSOS #
Módulo de interfaz de usuario básico de CSS Nivel 4 (especificación oficial)
“ Color de acento CSS ”, Adam Argyle
“ Simplificando los estilos de formas con acentos de color ”, Michelle Barker
Nuevas Funciones De Color CSS #
¿QUÉ SON? #
Es posible que ya esté familiarizado con los formatos de color Hex, RGB y HSL. Los niveles 4 y 5 del módulo de color CSS incluyen una gran cantidad de nuevas funciones de color que nos permiten especificar y manipular colores en CSS como nunca antes. Incluyen:
hwb(): Matiz, Blancura, Negrura.
lab(): Luminosidad, junto con los valores a y b , que determinan el tono.
lch(): Luminosidad, Chroma, Matiz.
color-mix(): Mezcla dos colores juntos.
color-contrast(): de una lista de colores, genera el que tiene el mayor contraste en comparación con el primer argumento.
color(): especifique un color en un espacio de color diferente (p. ej display-p3., ).
Hay mucho que profundizar en este tema esclarecedor: escribí un artículo al respecto el año pasado. Además de eso, también hay una sintaxis de color relativa , que nos permite tomar un color y modificarlo para crear otro.
¿CÓMO LO USAMOS? #
hwb(), lab()y lch()se puede usar de la misma manera que las funciones rgb()y hsl()a las que estamos acostumbrados, con un parámetro alfa opcional:
.my-element {
background-color: lch(80% 100 50); // opaque color
}
.my-element {
background-color: lch(80% 100 50 / 0.5); // color with 50% transparency
}
Copiar
color-mix()produce un color como resultado de mezclar otros dos. Necesitamos especificar un método de interpolación de color como primer argumento:
.my-element {
background-color: color-mix(in lch, blue, lime);
}
Copiar
color-contrast()requiere un color base con el que comparar los demás. Dará como resultado el color con el contraste más alto o, en el caso de que se proporcione una palabra clave adicional, el primer color de la lista que cumpla con la relación de contraste correspondiente:
/* Output the color with the highest contrast */
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue);
}
/* Output the first color that meets AA contrast ratio */
.my-element {
color: white;
background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}
Copiar
Esto es ideal para esquemas de color accesibles. Por ejemplo, podemos dejar que nuestro CSS seleccione si el texto en blanco o negro es el más adecuado (es decir, proporciona el mayor contraste) para un botón con un color de fondo determinado.
¿PUEDO USARLOS? #
Safari está a la vanguardia en compatibilidad con navegadores en este momento, con hwb(), lch(), lab()y color()todos compatibles desde la versión 15. color-mix()y color-contrast()se puede habilitar con una bandera. Firefox es compatible hwb()y también ha marcado la compatibilidad con color-mix()y color-contrast(). El sorprendente valor atípico es Chrome, que no es compatible con ninguno de estos en este momento. Sin embargo, no es demasiado difícil proporcionar alternativas en su código: dadas dos reglas de color, el navegador ignorará la segunda si no la admite.
.my-element {
background-color: rgb(84.08% 0% 77.36%);
background-color: lch(50% 100 331);
}
Copiar
Significa que cuando llegue el soporte, su código estará listo.
RECURSOS #
Módulo de color CSS nivel 4 (especificación oficial)
Módulo de color CSS Nivel 5 (especificación oficial)
Una guía de colores CSS modernos con RGB, HSL, HWB, LAB y LCH por Michelle Barker
Colores LCH en CSS: ¿qué, por qué y cómo? por Lea Verou
Selector de color LCH de Lea Verou
Cree un tema de color con CSS Relative Color Syntax, CSS color-mix() y CSS color-contrast() de Bramus van Damme
Capas En Cascada #
¿QUÉ SON? #
Las capas en cascada nos dan más poder para administrar la parte "en cascada" de CSS. Actualmente, hay varios factores que determinan qué estilos se aplicarán en su código CSS, incluida la especificidad del selector y el orden de aparición. Las capas en cascada nos permiten agrupar efectivamente nuestro CSS en fragmentos (o "capas", por así decirlo). El código dentro de una capa inferior en el orden tendrá prioridad sobre el código en una capa superior, incluso si un selector en la capa superior tiene mayor especificidad. Si todo esto es un poco difícil de entender, Miriam Suzanne ha escrito una guía completa para CSS-Tricks .
Me gusta pensar en ello como una especie de z-indexcascada. Si comprende cómo z-indexfunciona, probablemente comprenderá las capas en cascada con bastante rapidez.
¿CÓMO LOS USO? #
Como explica Bramus en su tutorial, podría crear capas discretas consistentes con la metodología ITCSS.
/* Create the layers, in the desired order */
@layer reset, base, theme;
/* Append the CSS to each of the layers /
@layer reset {
/ Append to 'reset' layer */
}
@layer base {
/* Append to 'base' layer */
h1.title {
font-size: 5rem;
}
}
@layer theme {
/* Append to 'theme' layer */
h1 {
font-size: 3rem;
}
}
Copiar
font-sizeLa declaración de CSS para h1en la themecapa ganaría a la de base, a pesar de que esta última tiene una mayor especificidad.
¿PUEDO USARLOS? #
Las capas en cascada son compatibles con la última versión de Firefox y se pueden habilitar con una bandera en Chrome y Edge (con soporte completo para Chrome en la versión 99). Parece que todos los principales navegadores se están sumando a esta especificación, por lo que pronto se espera una mayor compatibilidad. Por lo tanto, puede comenzar a jugar con Cascade Layers de inmediato, pero puede pasar algún tiempo antes de que podamos usarlos con confianza en producción. Es difícil ver cómo proporcionar fácilmente respaldos a los navegadores más antiguos sin incluir una hoja de estilo separada, o tal vez surjan polirrellenos con el tiempo. Miriam Suzanne tiene algunas ideas en este explicador .
RECURSOS #
CSS en cascada y herencia nivel 5 (especificación oficial)
Una guía completa para las capas en cascada de CSS por Miriam Suzanne (trucos de CSS)
Las capas en cascada están llegando a su navegador por Una Kravets (blog del desarrollador de Chrome)
El futuro de CSS: Capas en cascada (CSS @layer) por Bramus van Damme
Introducción a las capas en cascada de CSS por Stephanie Eckles
KendoUI para reaccionar
¿Un React Data Grid que facilita la vida de un desarrollador? Sí, hay uno: el KendoReact Grid.
¡OBTENGA UNA CUADRÍCULA DE DATOS!
Subcuadrícula #
¿QUÉ ES? #
Cuando se habló por primera vez de CSS Grid hace años, muchos desarrolladores pensaron que nos permitiría diseñar cada parte de nuestra interfaz de usuario en una sola cuadrícula, al igual que los diseños típicos de 12 columnas que recibimos de los diseñadores. En la práctica, eso implicaría aplanar completamente su marcado, romper la semántica, ¡no recomendado! Como parte de la especificación del módulo 2 de diseño de cuadrícula CSS, la subcuadrícula permite que un elemento herede la cuadrícula de su padre, ya sea en el eje de fila o columna. En teoría, podría anidar cuadrículas completamente hacia abajo, alineando cada componente en la misma cuadrícula. En realidad, probablemente no necesitemos hacer esto tan a menudo como pensábamos, ya que (con suerte) adoptamos un diseño web intrínseco más flexible que prioriza el contenido, la UX y la accesibilidad sobre la adherencia rígida a una cuadrícula. Pero la subcuadrícula sigue siendo increíblemente útil para resolver todo tipo de desafíos de interfaz de usuario.
Por ejemplo, tome esta fila de imágenes con subtítulos. Los subtítulos tienen diferentes longitudes, pero al usar una subcuadrícula podemos alinearlos entre sí, sin codificar una altura fija.
Tres imágenes de pájaros con subtítulos que varían según la longitud.
( Vista previa grande )
¿CÓMO LO USAMOS? #
Especifique la cuadrícula del elemento principal utilizando las propiedades regulares de Grid. Use la palabra clave subgridpara la propiedad grid-template-columnso grid-template-rowsen el elemento anidado que desea heredar de la cuadrícula principal:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
}
.grid > figure {
display: grid;
grid-template-rows: subgrid;
}
.grid figcaption {
grid-row: 2;
}
Copiar
Vea los subtítulos de Pen Subgrid por Michelle Barker .
¿PUEDO USARLO? #
Sorprendentemente, Subgrid ha sido compatible con Firefox desde 2019, pero ningún otro navegador ha seguido su ejemplo casi tres años después. Hay indicios de que el equipo de Chromium finalmente está implementándolo, por lo que podríamos tener la suerte de verlo aterrizar en Chrome y Edge este año. ( Haga un seguimiento del problema aquí ). No tengo muchas esperanzas en el soporte de Safari, pero con Jen Simmons encabezando el esfuerzo de CSS en Apple, todo es posible. No hay nada que le impida usar subgrid en producción, pero por ahora es mejor tratarlo como una mejora progresiva.
RECURSOS #
Módulo de diseño de cuadrícula CSS Nivel 2 (especificación oficial)
Página de subcuadrícula de MDN
“ CSS Grid Level 2: Here Comes Subgrid ”, Rachel Andrew
Desplazar Línea De Tiempo #
¿QUÉ ES? #
Probablemente haya visto muchos sitios web geniales que implementan animaciones elegantes con enlaces de desplazamiento. Hay muchas bibliotecas JS para ayudarnos a implementar este tipo de cosas: soy un gran admirador del complemento ScrollTrigger de [Greensock]. ¿Imagina si pudiéramos hacer todo eso dentro de CSS? ¡ Con @scroll-timelinenosotros podemos!
¿CÓMO LO USAMOS? #
Necesitamos algunas cosas:
una animación de fotogramas clave,
la @scroll-timelineregla-at,
la animation-timelinepropiedad en el elemento que estamos animando (o especifique la línea de tiempo en la animationpropiedad abreviada).
Aquí hay un ejemplo:
/* Set up keyframe animation */
@keyframes slide {
to { transform: translateX(calc(100vw - 2rem)); }
}
/* Configure our scroll timeline. Here we're giving it the name slide-timeline /
@scroll-timeline slide-timeline {
source: auto; / the scrollable element that triggers the scroll-linked animation (the document by default) /
orientation: vertical; / the scroll orientation (vertical by default) /
scroll-offsets: 0%, 100%; / an array of progress intervals in which the timeline is active */
}
/* Specify the keyframe animation and the scroll timeline */
.animated-element {
animation: 1s linear forwards slide slide-timeline;
}
Copiar
Alternativamente, podemos usar compensaciones basadas en elementos para la scroll-offsetspropiedad, para activar la línea de tiempo cuando un elemento en particular se desplaza a la vista:
@scroll-timeline slide-timeline {
scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}
Copiar
Una vez más, Bramus nos tiene cubiertos con una introducción completa y algunos casos de uso excelentes.
¿PUEDO USARLO? #
Si está interesado en jugar con @scroll-timelineél, puede habilitarlo con una bandera en Chrome. La especificación está en el borrador del editor, por lo que es muy probable que cambie antes de que obtenga el estado recomendado.
Es probable que haya casos que requieran buscar una biblioteca JS para la animación basada en desplazamiento (piense en administrar líneas de tiempo de animación complejas). Pero para casos relativamente simples, esto podría ahorrar una gran cantidad de importaciones innecesarias.
RECURSOS #
Animaciones con enlaces de desplazamiento (especificaciones oficiales)
página MDN
“ Casos prácticos de uso para animaciones con enlaces de desplazamiento en CSS con líneas de tiempo de desplazamiento ”, Bramus Van Damme
N.º De Anidamiento
¿QUÉ ES? #
Si está familiarizado con Sass, conocerá la conveniencia de poder anidar selectores; esencialmente, escribir una regla secundaria dentro de una principal. El anidamiento nos ayuda a mantener nuestro código organizado, ¡aunque si se usa en exceso a veces puede ser un obstáculo! Ahora parece que el anidamiento finalmente está llegando a CSS nativo.
¿CÓMO LO USAMOS? #
Sintácticamente, es similar a Sass, por lo que no debería parecer un gran salto. La regla anidada aquí tiene como objetivo un h2 dentro de un elemento con una clase de card:
.card {
color: red;
& h2 {
color: blue;
}
}
Copiar
O podemos usarlo para pseudoclases y pseudoelementos:
.link {
color: red;
&:hover,
&:focus {
color: blue;
}
}
Copiar
El equivalente en el CSS de hoy sería:
.link {
color: red;
}
.link:hover,
.link:focus {
color: blue;
}
Copiar
¿PUEDO USARLO? #
No de forma nativa. Ningún navegador lo admite todavía, incluso detrás de una bandera. Pero si usa PostCSS, puede probarlo con el postcss-preset-envcomplemento.
RECURSOS #
Módulo de anidamiento CSS
“ CSS Nesting, especificidad y tú ”, Killian Valkhof
El Futuro De CSS #
Es justo decir que estamos en una era de auge para CSS en este momento. Mientras escribo esto, me doy cuenta de que muchas de estas nuevas características tienen algunas cosas en común. Sí, a menudo nos ayudan a escribir código mejor, más limpio y más eficiente. Algunos se basan en las características de las herramientas de preprocesamiento (como Sass), lo que hace que estas herramientas sean menos necesarias a medida que pasa el tiempo. Pero también nos permiten, incluso nos alientan, a adoptar la flexibilidad inherente de la web y ser considerados con las diferentes formas en que nuestros usuarios pueden navegar. Los usuarios de hoy pueden estar usando cualquiera de los millones de dispositivos diferentes disponibles. Es posible que prefieran un mayor contraste, un esquema de color oscuro o un movimiento reducido. Pueden usar un lector de pantalla, un dispositivo más antiguo o una combinación de todos los anteriores.
En lugar de ser prescriptivos con nuestros diseños y lamentarnos por una "perfección de píxeles" inalcanzable, podemos usar CSS para dar pistas y sugerencias, y dejar que el navegador decida cómo mostrar mejor nuestra página web. Estas ideas han sido resumidas por Jen Simmons y Una Kravets (entre otros), quienes han acuñado los términos diseño web “ intrínseco ” y “ nuevo diseño web receptivo ” respectivamente.
CSS parece estar alcanzando un nivel de madurez en el que el desafío ya no es si se puede hacer algo en CSS, sino capacitar y armar a una nueva generación de desarrolladores para comprender las herramientas que tenemos a nuestra disposición, saber cuándo utilizarlas , y cómo tomar decisiones de desarrollo centradas en el usuario.
Top comments (0)