10 nuevas funciones de CSS que quizás no conocías (ediciónActualizado)

La web moderna no sería posible sin CSS. El lenguaje de marcado es responsable de que los sitios web tengan un buen aspecto, un diseño agradable y que cada elemento permanezca en su lugar. Sin embargo, ¿sabías que todo el tiempo aparecen nuevas funciones de CSS?

A lo largo de los años, CSS ha ido mucho más allá de los colores de fondo, los bordes, el estilo del texto, los márgenes yEl modelo de cajaEl CSS moderno es capaz de ofrecer una amplia gama de funciones para las que, en el pasado, se necesitaba JavaScript o soluciones alternativas.

Para celebrar lo mucho que ha avanzado, en esta publicación queremos analizar algunas de las increíbles novedades que CSS ofrece Actualizado y que quizás no conozcas. Destacaremos cosas interesantesdiseñadores y desarrolladores webPuede trabajar con CSS moderno, hablar sobre casos de uso, compatibilidad con navegadores y también brindarle un ejemplo rápido.

Vamos a empezar.

Nuevas funciones CSS: qué puede hacer el CSS moderno

Estas son algunas de las cosas sorprendentes que CSS es capaz de hacer hoy en día.

Propiedades/Variables personalizadas

Las propiedades personalizadas básicamente te permiten definir sustitutos de las propiedades CSS en un lugar central para usarlas en tu diseño. La mejor manera de entender por qué esto es útil es ver un ejemplo.

Por lo general, al crear un tema, elegirías unesquema de coloresy luego declarar esos colores cada vez que sea necesario.

a {color: #cd2653;}.social-icons a {background: #cd2653;}.wp-block-button.is-style-outline {color: #cd2653;}

El problema con este enfoque es que, si quieres hacer cambios en uno de los colores, tienes que cambiar cada una de las instancias del mismo.editores de códigoPuedes hacerlo fácilmente mediante la función de búsqueda y reemplazo, pero sigue siendo molesto, especialmente si solo quieres hacer una prueba rápida y tienes que revertir todo nuevamente.

Hay una mejor solución

Las propiedades personalizadas evitan este problema. Con su ayuda, puedes asignar los colores en cuestión a una variable una vez y luego simplemente ingresar esa variable como propiedad CSS cada vez que la uses, de la siguiente manera:

:root {--global--color-primary: #28303d;}a {color: var(--global--color-primary);}.social-icons a {background: var(--global--color-primary);}

De esa manera, cuando quieras hacer un cambio, solo tienes que hacerlo en un lugar. Genial, ¿verdad? En el pasado, necesitabas emplear un preprocesador comoHABLAR CON DESCARO Autilizar variables, ahora es una funcionalidad nativa de CSS.

Como puede ver arriba, las propiedades personalizadas también son muy fáciles de usar. Defina sus variables al comienzo del documento bajo el :rootselector (observe el doble guión --delante de las variables, esto es lo que las define como propiedades personalizadas, ¡además, distinguen entre mayúsculas y minúsculas!). Después de eso, puede usarlas en todo el documento a través de la var()función.

Si quieres cambiar una variable, simplemente cambia la declaración :rooty listo. Un tema que aprovecha mucho las propiedades personalizadas es Twenty Twenty-One. Si quieres verlas en acción, te recomiendo que leasNuestra reseña.

En cuanto a la cuestión de qué tan bien se ha adoptado esta característica CSS,compatibilidad del navegadores muy bueno:

@apoya

A continuación, tenemos una regla CSS similar a las consultas de medios. Sin embargo, en lugar de hacer que las reglas CSS dependan del tamaño de la pantalla o del tipo de teléfono, @supportspermite hacer lo mismo según las propiedades y valores CSS que admita el navegador del usuario.

¿Para qué sirve esto?

Como verás a lo largo de esta publicación, no todas las funciones CSS son compatibles con todos los navegadores y dispositivos. Si bien a menudo puedes solucionar esto mediante declaraciones de respaldo, en algunos casos, si no incluyes específicamente compatibilidad con tecnología más antigua, tu sitio puede verse seriamente afectado.

Además, puedes usarlo @supportspara agregar funciones adicionales o estilos para navegadores más modernos que puedan manejarlos (razón por la cual las consultas con @supportstambién se conocen como “consultas de funciones”).

Cómo utilizar consultas de características

Si está familiarizado con las consultas de medios, utilizar la comprobación de compatibilidad le resultará muy fácil. A continuación, le indicamos cómo utilizarla:

@supports (display: grid) {.site-content {display: grid;}}

Como puede ver, es simplemente la regla seguida por la propiedad o el par propiedad-valor que desea verificar entre paréntesis. Después de eso viene la declaración CSS habitual para las reglas que se deben aplicar si se cumple la condición.

El ejemplo anterior indica que si el navegador admite la cuadrícula CSS (más sobre esto en un minuto), debería aplicarse display: grid;al elemento con la clase .site-content.

También es importante tener en cuenta que @supportscomprende los operadores not, andy or(que también se pueden combinar) para crear reglas más específicas, como una alternativa para los navegadores que no admiten esa función en particular:

@supports not (display: grid) {.site-content {float: left;}}

Para usarlo @supportscorrectamente, debes saber qué navegadores lo admiten (lo sé, esto es un poco metafórico). La buena noticia es queTodos los navegadores modernos lo hacen.

Sin embargo, dado que el objetivo de estas consultas es habilitar o deshabilitar funciones que los navegadores más antiguos no pueden manejar, asegúrese de crearlas correctamente. Esto significa que, si va a utilizar una consulta de función, créela para navegadores que las entiendan. No sirve de nada decirle a un navegador que ignore algo de una manera que no puede entender.

Brechas de Flexbox

Flexbox es otro módulo de diseño CSS que hemos discutidoPor mucho tiempoantes. Uno de sus puntos débiles han sido durante mucho tiempo los espacios en blanco de flexbox, es decir, la posibilidad de definir saltos entre filas y columnas.

Afortunadamente, la compatibilidad de los navegadores con esta función CSS está mejorando. Ahora puedes comenzar a usarbrecha,brecha entre filas, yhueco entre columnaspara crear espacio en diseños creados con diseños de cuadrícula, Flexbox y de varias columnas.

A continuación se muestra un ejemplo rápido de cómo podría verse esto en flexbox:

.flex-gap-test {display: inline-flex;flex-wrap: wrap;gap: 16px;}divdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/div/div

Y aquí está en la página:

Si bien es posible lograr el mismo diseño a través de los márgenes, se necesitan mucho más marcado y soluciones alternativas que simplemente declarar el tamaño del espacio.

visibilidad del contenido

content-visibilityes una nueva característica CSS realmente genial paramejorar el rendimiento del sitioBásicamente funciona así:carga diferida, no solo para imágenes sino para cualquier elemento HTML. Puedes usarlo para evitar que se cargue cualquier parte de tu sitio hasta que se vuelva visible.

Su uso también es muy sencillo. Solo tienes que aplicarlo a un elemento de tu elección de la siguiente manera:

.content-below-fold {content-visibility: auto;}

content-visibilitytoma tres valores. De forma predeterminada, se establece en visible, en cuyo caso el elemento se carga de la forma habitual. Alternativamente, puede establecerlo en hidden, en cuyo caso el elemento no se representa, sin importar si es visible o no. autoPor otro lado, cuando se establece en , los elementos fuera del área visible se omitirán y luego se representarán una vez que aparezcan en la pantalla.

Cosas bastante interesantes, ¿verdad?

Una cosa que también podría ser importante en este caso es contain-intrinsic-size. Dado que los elementos configurados content-visibility: hidden;como tienen un tamaño cero, esto le permite aplicar una altura y un ancho teóricos a los elementos ocultos para que el navegador pueda tenerlos en cuenta desde el principio en lugar de en el momento en que se renderiza el elemento. De esta manera, puede evitar cambios repentinos en el diseño durante el desplazamiento.

Compatibilidad del navegador con content-visibilityAún es un poco irregular, pero va por buen camino. Lo mismo ocurre con contain-intrinsic-size.

Una vez que se adopte más ampliamente, predigo que se convertirá en una de las herramientas más efectivas para acelerar el proceso de renderizado.

Transiciones, transformaciones, animaciones

Antiguamente, si querías que algo se moviera en tu sitio web, normalmente tenías que recurrir a JavaScript (o a GIF animados, para los que formáis parte de la generación MySpace). Sin embargo, lo que quizá no sepas es que CSS también tiene la capacidad de hacer que las cosas se muevan desde hace años. Las tres herramientas principales para lograr este tipo de cosas son:

• Transiciones— Le permite realizar un cambio de un valor de propiedad a otro (por ejemplo, efectos de desplazamiento) de manera suave en lugar de abrupta.
• Transformaciones: le permite mover, rotar y escalar elementos tanto en2Dy3Despacio.
• Animaciones— Configure animaciones simples o complejas en CSS y configure cómo y cuándo deben ejecutarse.

Naturalmente, no tenemos espacio para analizar los tres en detalle aquí. Asegúrate de consultar los enlaces anteriores si quieres obtener más información. Sin embargo, vamos a hacer algunos ejemplos rápidos de cada uno para que tengas una idea de lo que es posible.

Transición CSS

A continuación se muestra un ejemplo rápido de una transición CSS:

div {width: 100px;height: 100px;transition: height 3s;}div:hover {height: 500px;}

El marcado anterior ralentizará el aumento de divaltura a tres segundos cuando alguien pase el cursor sobre el elemento.

Transformación CSS

A continuación se muestra un ejemplo de una transformación CSS. Girará el elemento 30 grados en el sentido de las agujas del reloj cuando alguien pase el ratón sobre él:

div:hover {transform: rotate(30deg);}

Animación CSS

Y finalmente, un pequeño fragmento que muestra una animación CSS:

@keyframes color-change {from {background-color: blue;}to {background-color: yellow;}}div:hover {animation-name: color-change;animation-duration: 3s;}

Observa cómo se suele @keyframesnombrar la animación y definir lo que hace y luego aplicarla a un elemento utilizando animation-name. animation-durationcontrola cuánto tiempo tarda en completarse. Hay otras propiedades como esta.

Si quieres probar todo esto, la buena noticia es que la compatibilidad con los navegadores es excelente (consultaaquí,aquí,aquíyaquí). Por lo tanto, nada te impide probar transiciones, transformaciones y animaciones CSS.

Desplazamiento rápido

El desplazamiento hacia abajo te da la opción de bloquear la ventana gráfica del usuario en determinadas partes o elementos de tu sitio. Es muy útil para crear transiciones interesantes y ayudar a los usuarios a centrarse en los elementos más importantes de la página mientras se desplazan hacia abajo. Puedes encontrar una demostración sencilla de este método.aquí.

Este efecto es muy visible en las aplicaciones móviles, pero con el desplazamiento hacia atrás también puedes llevarlo a los sitios web.

El uso también es relativamente sencillo en el nivel más básico. Simplemente se aplica el tipo de desplazamiento a un contenedor y se define dónde deben ajustarse sus elementos secundarios.

.container {scroll-snap-type: y mandatory;}.container div {scroll-snap-align: start;}

Por supuesto, hay más. Si quieres aprender más sobre el tema, CSS Tricks tiene excelentes trucos.escribir.

Eso sólo deja un vistazo a la compatibilidad del navegador, que esbastante bien.

Sin embargo, tenga en cuenta que el soporte es un poco desigual entre todas scroll-snaplas propiedades disponibles. Por lo tanto, asegúrese de comprobarlo para su caso de uso particular.

:es y :donde

Las últimas entradas de nuestra lista de nuevas funciones CSS que quizás no conozca son las pseudoclases :isy . Le permiten reducir la repetición en el marcado CSS al acortar las listas de selectores CSS.:where

Por ejemplo, compare esto:

.main a:hover,.sidebar a:hover,.site-footer a:hover {/* markup goes here */}

A esto:

:is(.main, .sidebar, .site-footer) a:hover {/* markup goes here */}

Lo mismo funciona con :where:

:where(.main, .sidebar, .site-footer) a:hover {/* markup goes here */}

Si el marcado es el mismo, ¿cuál es la diferencia? La diferencia es que :ises mucho más específico. Toma el nivel de especificidad del elemento más específico entre paréntesis. En contraste, la especificidad de :wherees siempre cero. En consecuencia, es mucho más fácil anularlo más adelante.

La adopción del navegador todavía es un poco irregular, perodespacioconseguiralláAsí que siéntete libre de empezar a probarlos.

¿Hay alguna otra característica nueva de CSS que valga la pena considerar?

Al igual que el resto de la tecnología web, el marcado de hojas de estilo en cascada evoluciona constantemente. Eso significa que siempre hay nuevas funciones CSS por descubrir y cosas que probar y experimentar.

Arriba, hemos visto algunos ejemplos de cosas que CSS ya puede hacer hoy en día y que quizás no hayas visto. Hay más cosas de las que hemos hablado. Nos encantaría saber qué más tienes para compartir. Aparte de eso, ¡feliz codificación!

¿Cuál es tu característica favorita del CSS moderno? ¡Compártela en la sección de comentarios a continuación!