Mantente actualizado en CSS | View Transitions | State of CSS 2023

Una de las cosas que son imprescindible como desarrolladores/desarrolladoras es el estar en constante actualización, y sí, tienes que estudiar y seguir practicando aun cuando ya has dominado una tecnología.

Estar dentro de la industria significa seguir aprendiendo sobre las nuevas utilidades que se añaden a nuestras herramientas de trabajo, por ejemplo, el CSS de hace 5 años no es igual que el de ahora, poco a poco CSS a añadido nuevas funcionalidades que nos permiten trabajar de mejor manera y mejor sin cargarle el peso a nuestro código por instalar un recurso externo que vaya contra el rendimiento de nuestras aplicaciones.

State of CSS 2023

Una manera que puede ayudarte a mantenerte actualizado sobre dos tecnologías es revisar los resultados de las encuestas State of JS para el lenguaje de programación JavaScript y para nuestro tema de hoy State of CSS para el lenguaje de estilos CSS, estas dos encuestas traen un apartado interesante sobre Features, en este apartado se pregunta sobre estas funcionalidades que se van agregando al lenguaje que % de la gente encuestada las ha ocupado, esto nos sirve para darnos una ida de con qué nuevas herramientas podemos experimentar,

Hay muchas formas de lograr llevar un diseño a código, pero si no incluimos una herramienta externa o entro menos le carguemos al cliente puede llegar a ser beneficioso, hasta a nivel de SEO, la evolución de CSS también ha ido desplazando algunas funcionalidades que podíamos agregar con una librería para poder llevar el trabajo de una manera más fácil.

En este articula exploraremos un par de estas nuevas implementaciones, en concreto la página se ve de esta manera:

Y si pasas el mouse encima de cada elemento es que puedes el número de personas encuestadas que lo conocen y que lo han usado, en esta vemos que solo el 12% ha usado esta funcionalidad, muchas de estas son funcionalidades que están en pruebas, y puede que muchas lleguen a incorporarse a los navegadores tarde o temprano:

Estas las puedes comprobar en la página CanIUse , podemos ver el % de navegadores y versiones que lo han adaptado, por ejemplo de esta tecnologia:

Aqui el porcentaje de navegadores que ya aceptan esta funcionalidad es del 65% solamente, lo cual no es un buen valor, lo que he visto es con que el 90 o 95% de los navegadores ya acepten estas tecnologías puede llegar a ser suficiente para aceptar usarlas, pero ten en cuenta que si alguna no es compatible puede ser que rompa algo de nuestro diseño.

View Transitons

Esta funcionalidad que te he mostrado anteriormente ha sido muy sonada entre la comunidad y es que permite hacer una transición un tanto particular con solamente CSS entre las páginas de nuestra aplicación, vamos a verla:

Ese efecto del cambio de la IU, como más suavizado entre páginas es de esta nueva API, y puede hacerse solo con CSS, pero si no notaste que es te dejo el ejemplo de cómo se ve esta misma página sin esta funcionalidad, ya que como mencionamos, no todos los navegadores cuentan con esto implementado, afortunadamente no se rompe la aplicación, solo no se ve esa animación

Esta está hecha con Astro, que este es de los frameworsk que ya han implementado esta API en su versión 3, al igual que SvelteKit, y puedes visitar este en el siguiente enlace, y un ejemplo de blog que nos proporciona Astro para ver ejemplos.

Si quieres ver más acerca de la documentación de esta nueva funcionalidad, te dejaremos la documentacion. Para esta nueva API traeremos un ejemplo práctico de cómo usar esto más adelante.

CSS anidado

Otra de las funcionalidades más habladas es sobre el CSS anidado que nos permitirá escribir CSS como si estuviéramos haciendo uso de un preprocesador de CSS como SASS, pero de este ya hemos realizado un ejemplo de cómo se llega a utilizar para nuestros proyectos y se encuentra mucha más compatible que view transitiosns, te dejaremos el enlace a: ¿Cómo se usa el anidado en CSS nativo? | CSS Nesting.

Aprende CSS

Pronto estaremos probando estas funcionalidades y otros ejemplos para la realización de tus proyectos, ya que al investigar sobre lo nuevo en CSS hay muchas funcionalidades de las que valen la pena hacer un tutorial.

Por el momento, te dejaremos el enlace al curso CSS3: sin fronteras de la Academia Hola Mundo, por si te interesa comenzar a usar CSS para tus proyectos, o si quieres avanzar en el uso del lenguaje de programación JavaScript, tenemos el curso: Aprende Javascript, HTML5, CSS3 y NodeJS desde cero

---

Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago

O igualmente puedes optar por cada curso de manera individual en Udemy.

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo