¡Compártelo!
Share on facebook
Share on google
Share on twitter
Share on linkedin

Últimas tendencias en CSS3 por Statesoffcss

Statesoffcss es una encuesta de desarrollo web a nivel mundial que se realiza una vez al año para valorar y analizar la evolución, en este caso, tendencias en el lenguaje de estilos CSS3. Este estudio, realizado a 11.492 personas en 102 países diferentes, recoge datos que muestran las propiedades que han evolucionado adquiriendo peso en el desarrollo Front y las que han perdido uso o desaparecido totalmente .

Tendencias CSS3

A continuación, mostramos un resumen de algunas curiosidades que se han dado en este 2020 y que probablemente sigan adquiriendo relevancia en el estilado de interfaces.

Tendencias en css3

 

Estructura y distribución

Empezamos por cómo ha cambiado la construcción de los layouts  mediante css, viendo que el uso de Grid  ha vencido a cualquier otro posible sistema de estructuración. Esto puede ser debido al definitivo “cierre” de Internet Explorer con el lanzamiento de Edge Chromium, vemos que la diferencia con 2019 en el porcentaje de personas que no conocían esta propiedad ha variado notablemente y ya lo usan más del 70%.

tendencias css3

Dentro de la distribución de elementos destaca la propiedad position sticky  y es que esta nueva propiedad ha llegado para quedarse, un 75% de los encuestados dice haberla usado y es que, esta magnífica forma de posicionar un elemento sin usar JavaScript, es pura magia para el día a día de los cssDevelopers.

tendencias css3

Media Queries

En este apartado se han basado en la forma especial que existe para adaptar las páginas web a las preferencias o dispositivos de los usuarios.

Este 2020 ha sido el año del inicio de la adaptabilidad y preferencias por lo que el uso de las @media (prefers-xxx) ha llegado para quedarse. Posiblemente en el próximo año veremos cómo va a ser cada vez más necesario el uso de estas media queries ya que la experiencia de usuario cada vez va más encaminada a personalización de nuestros proyectos a las diferentes especificaciones que pueda tener el usuario en su dispositivo o sistema predeterminado. Por ejemplo, daltónicos, epilépticos, etc.

  • Prefers-reduced-motion

Para cancelar o reducir animaciones o efectos de una o varias clases específicas según la configuración que pueda tener el usuario en su dispositivo o sistema.

Un 15% la ha usado, un 33% dice conocerla y un 51% no la ha usado nunca.

tendencias css3

Prefers-color-scheme

Adaptar el tema de nuestras aplicaciones web según la configuración del usuario en su sistema operativo siempre ha sido un tema pendiente. Ahí queda el intento de Microsoft con la media feature -ms-high-contrast que nos permitía adaptar nuestro CSS dependiendo del contraste que tenía configurado nuestro sistema operativo.
El 18% ya la ha usado estos últimos 12 meses y en aumento.

Prefers-color-scheme

Unidades de medida y selectores

Píxel o porcentaje sigue siendo la unidad de medida más utilizada, pero aumenta em y rem respecto a 2019 y 2018. Hay que tener en cuenta que muchos desarrolladores sass ya usan funciones de cálculo dentro de sus arquitecturas que automáticamente transforman la medida pixeles a rem o em.

em y rem

Otras características

Es muy interesante como sigue aumentado el uso de Variables en css en la mayoría de los casos apoyados de sass. Y es que aún está por ver hasta qué punto pueden evolucionar los preprocesadores para convertirse en un lenguaje de programación completo.

variables css3

Tecnologías

En stateofcss no pierden la oportunidad para analizar las tecnologías más usadas. Nos presentan este apartado con un gráfico que muestra el ratio de satisfacción frente al número total de usuarios de cada tecnología en cuatro cuadrantes:

EVALUAR | ADOPTAR | EVITAR | ANALIZAR

stateofcss

Tailwind CSS, PostCSS y Sass se llevan el pódium de las más usadas con sus pro y contras según los datos recogidos.

Pero cabe destacar que PostCSS es la tecnología más usada y a la derecha del cuadrante por lo que es la más recomendada para adoptar en los proyectos y la más satisfactoria de cara a los resultados.

¡Galardonados!

Para finalizar, hacemos un repaso visual a lo más destacado de la encuesta del 2020.

galardonados

¿Trabajas en el desarrollo Front? ¿Qué te parecen las últimas tendencias recogidas en la encuesta de desarrollo web del lenguaje de estilos CSS3?

Artículos relacionados

Qué es Ionic

Qué es Ionic y por qué utilizarlo para desarrollar aplicaciones móviles híbridas

Ionic es un SDK de front-end de código abierto basado en tecnologías web (HTML, CSS y JS) que es utilizado para desarrollar aplicaciones móviles híbridas. Ionic proporciona una librería de componentes híbridos optimizada para dispositivos móviles. Su compatibilidad y, gracias a la implementación de Cordova

Ejecutar aplicaciones Spring Boot como imágenes nativas de GraalVM

Ejecutar aplicaciones Spring Boot como imágenes nativas de GraalVM

En este post te mostramos paso a paso cómo ejecutar aplicaciones Spring Boot como imágenes nativas de GraalVM, para conseguir que nuestras aplicaciones arranquen más rápido y tengan un menor consumo de memoria. Uso de memoria en Java Como todos sabemos, Java es uno de

extensiones Chrome Front End

13 extensiones de Chrome para desarrolladores Front End

Google Chrome es el navegador más popular usado del mercado y esto hace que también sea el que mayor número de extensiones tiene disponible en su catálogo. Las hay de todo tipo y para innumerables usos. A continuación repasamos las extensiones de Chrome para desarrolladores

Deja un comentario