¡Compártelo!
Compartir en facebook
Compartir en twitter
Compartir en 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

Oh My ZSH

Vitamina tu terminal con Oh My ZSH

Para todos los que nos dedicamos al mundo del desarrollo software, una gran parte del tiempo de nuestro trabajo pasa al lado de nuestra querida terminal. En este post hablaremos de Oh My ZSH, un paquete de utilidades, plugins y plantillas para el shell ZSH que

sdkman

SDKMAN!: ¿qué es, cómo instalarlo y utilizarlo?

En este artículo vamos a hablar un poco sobre qué es SDKMAN!, cómo se instala y qué nos ofrece. Veremos también un ejemplo real de cómo instalar varias versiones de Java utilizando esta herramienta. ¡Sigue leyendo! ¿Qué es SDKMAN!? SDKMAN! es una herramienta que nos

DevToys

DevToys, o cómo facilitar el día a día de un desarrollador software

Microsoft nos presenta, de la mano de Etienne Baudoux, DevToys, una pequeña suite de utilidades de código abierto enfocada a facilitar el día a día de los desarrolladores de software. Su creador la define como una “navaja suiza para desarrolladores” y, desde hace pocos meses,