{"id":8090,"date":"2022-01-04T13:30:00","date_gmt":"2022-01-04T12:30:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=8090"},"modified":"2025-01-07T14:00:48","modified_gmt":"2025-01-07T13:00:48","slug":"novedades-en-css-para-2022-css4-no-existe","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/novedades-en-css-para-2022-css4-no-existe\/","title":{"rendered":"Novedades en CSS para 2022 \u00a1CSS4 no existe!"},"content":{"rendered":"\n

Comienza 2022 y con \u00e9l, te traemos las novedades en CSS, y no, no es CSS4. Como de costumbre, te ofrecemos las tendencias de uso en CSS<\/a>, pero lamentamos comunicarte que la cuarta versi\u00f3n de CSS no existe y no tiene pinta de que vaya a existir. Es m\u00e1s, en el hipot\u00e9tico caso de que viera la luz, seguramente se denominara as\u00ed de manera simb\u00f3lica y casi injusta. \u00bfQuieres saber por qu\u00e9? Entonces acomp\u00e1\u00f1anos en nuestra gu\u00eda de novedades CSS para 2022. \u00a1Comenzamos!<\/p>\n\n\n\n\n\n\n\n

Que no, que no es CSS4<\/h2>\n\n\n\n

Antes de nada, debemos tener claro que el desarrollo de CSS no es lineal. Esto se debe a que principalmente evoluciona en distintas dimensiones, mejorando en distintos apartados como la adaptabilidad, el tratamiento de color e en incluso la interactividad. Bien mirado, esto supone una buena noticia, puesto que se encuentra en desarrollo constante,<\/strong> ofreciendo mejoras basadas en las necesidades reales de los usuarios y en la demanda de soluciones pr\u00e1cticas.<\/p>\n\n\n\n

Entonces, \u00bfPor qu\u00e9 se llama CSS3?<\/h2>\n\n\n\n

El error parte del origen de CSS. En su primera versi\u00f3n, dada su elemental y limitada naturaleza, pr\u00e1cticamente se empleaba para dar estilos al texto, colores a fondos y otros elementos. Posteriormente, se a\u00f1adieron caracter\u00edsticas m\u00e1s particulares como el uso de efectos, el modelo de caja, distinta profundidad de selectores y otros<\/a>. Este salto cualitativo supuso un aut\u00e9ntico antes y un despu\u00e9s,<\/strong> por lo que se opt\u00f3 por renombrar la versi\u00f3n. Sin embargo, con por cada nueva caracter\u00edstica, algunas de las anteriores evolucionaron a su vez. De ah\u00ed, que CSS crezca partiendo de la versi\u00f3n anterior, sumando caracter\u00edsticas nuevas y mejorando las anteriores, y no linealmente. <\/p>\n\n\n\n

Ante la visi\u00f3n de un crecimiento tan amplio y aparentemente descontrolado, se comenz\u00f3 a distribuir el desarrollo de CSS en distintos m\u00f3dulos, dando lugar a CSS3 y sus constantes mejoras.<\/p>\n\n\n\n

Caracter\u00edsticas m\u00e1s innovadoras de CSS3<\/h2>\n\n\n\n

Antes de abordar las novedades en CSS para 2022, nos gustar\u00eda repasar la trayectoria de CSS. Si prefieres ir al grano, puedes hacerlo mediante el siguiente enlace<\/a>.<\/p>\n\n\n\n

CSS3 es considerablemente longevo, datando de 1999 en su versi\u00f3n m\u00e1s elemental. Como ya hemos comentado antes, se dividi\u00f3 para desarrollar distintos m\u00f3dulos de mejora, hasta que hoy se cuentan por m\u00e1s de 50<\/strong>. Sin embargo, en el entorno de CSS, estos son los m\u00f3dulos que se consideran publicados, es decir, con un respaldo por parte de la comunidad de desarrolladores y soporte de los principales navegadores. <\/p>\n\n\n\n

\n
\n

Para que un m\u00f3dulo consiga ser publicado, ha de contar con un cierto nivel de estabilidad la hora de ser renderizados por los distintos navegadores. Si no se te ocurre ning\u00fan ejemplo, seguro que puedes recordar alg\u00fan sitio web que hayas visitado en el pasado en Internet Explorer (que tanta paz lleve, como descanso deja…) en el que cierto contenido no se mostrara correctamente, o alguna estructura se rompiera por completo.<\/p>\n\n\n\n

En cualquier caso, desde el lanzamiento de CSS3 hasta la fecha, la realidad del mundo web ha crecido y las necesidades de los usuarios con ella. Por eso, en su incesante desarrollo ha adoptado mejoras incre\u00edbles e indispensables hoy d\u00eda para muchos de los desarrolladores web profesionales<\/a>. Estas son algunas de las m\u00e1s significativas.<\/p>\n<\/div>\n\n\n\n

\n
\"Novedades<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Flexbox<\/h3>\n\n\n\n

El uso de flexbox parece de lo m\u00e1s l\u00f3gico hoy en d\u00eda, pero no somos pocos los que a\u00fan recordamos lo que supon\u00eda crear sitios web con \u00abfloats\u00bb por doquier. Mientras que el modelo de cajas m\u00e1s elemental se basaba en elementos en l\u00ednea, en bloque, en tabla o posicionados, la necesidad de dise\u00f1o web responsive trajo bajo el brazo el modelo de caja flexible o flexbox. Este modelo se basa en un contenedor capaz de organizar los elementos contenidos en \u00e9l con un control casi total. Toda una bendici\u00f3n, que se populariz\u00f3 a\u00fan m\u00e1s con el lanzamiento de frameworks tan potente como Bootstrap 4, que adapt\u00f3 su \u00fatil sistema de ret\u00edcula responsive al sistema.<\/p>\n\n\n\n

Posteriormente, se actualiz\u00f3 adoptando la ansiada caracter\u00edstica que presenta su hermano \u00abCSS Grid\u00bb, \u00abgap\u00bb. Esta propiedad permite especificar la separaci\u00f3n entre elementos hermanos contenidos en un elemento flex, sin requerir el uso de m\u00e1rgenes.<\/p>\n\n\n\n

CSS Grid<\/h3>\n\n\n\n

Si Flexbox nos gusta, CSS Grid… \u00a1Nos encanta! Este m\u00f3dulo solventa todos los inconvenientes que posee flexbox, aportando un control total a la hora de maquetar un sitio web de manera responsive. A diferencia de flexbox, en CSS Grid podemos especificar una ret\u00edcula a medida con comportamiento personalizado, permiti\u00e9ndonos en muchos casos, incluso prescindir del uso de mediaqueries.<\/p>\n\n\n\n

Otras propiedades de CSS 3<\/h3>\n\n\n\n

Como podr\u00e1s imaginar, 21 a\u00f1os de constante evoluci\u00f3n han dado para mucho, por lo que al margen de las ya mentadas, esta es nuestra selecci\u00f3n de propiedades m\u00e1s exitosas de CSS3:<\/p>\n\n\n\n