{"id":18151,"date":"2024-02-09T13:30:00","date_gmt":"2024-02-09T12:30:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=18151"},"modified":"2025-01-07T14:03:03","modified_gmt":"2025-01-07T13:03:03","slug":"novedades-css-2024","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/novedades-css-2024\/","title":{"rendered":"Novedades CSS 2024"},"content":{"rendered":"\n

Apenas hemos comenzado este a\u00f1o 2024 y ya podemos hablaros de las principales novedades en CSS<\/a><\/strong>. Una serie de mejoras incorporadas a nuestro \u00ablenguaje estil\u00edstico web favorito\u00bb, que har\u00e1n las delicias de propios y ajenos al mundo del dise\u00f1o web. Para nosotros ya es costumbre hablarte de las nuevas tendencias de CSS<\/a>, como sabr\u00e1s de otros art\u00edculos anteriores, y este a\u00f1o no puede ser de otra manera.<\/p>\n\n\n\n

Como de costumbre, hay propiedades que a\u00fan cuentan con una compatibilidad reducida y no se han extendido a\u00fan a todos los navegadores<\/strong>, pero a buen seguro, no tardar\u00e1n en hacerlo. \u00bfNos acompa\u00f1as? \u00a1Pues vamos all\u00e1!<\/p>\n\n\n\n

Mejoras y novedades CSS en texto para 2024<\/h2>\n\n\n\n

Este a\u00f1o CSS viene cargado con bastantes mejoras y novedades de cara a la edici\u00f3n y estilos de los elementos de texto como p\u00e1rrafos, t\u00edtulos o citas, entre otros. En su mayor\u00eda est\u00e1n enfocados a conciliar bastantes de las quejas o demandas de los dise\u00f1adores gr\u00e1ficos m\u00e1s puristas en lo que a texto se refiere,<\/strong> logrando ofrecer mejoras significativas que resultar\u00e1n de agradecer por un sinf\u00edn de profesionales del sector editorial. Veamos algunas de ellas.<\/p>\n\n\n\n

Text-wrap: Balance y pretty<\/h3>\n\n\n\n

Aunque emplazamos esta novedad CSS en 2024, esta peculiar propiedad cuenta con soporte en Google Chrome y Safari desde hace varios meses. No as\u00ed en Mozilla Firefox, por lo que deber\u00edamos tenerlo en cuenta a la hora de emplearlas. Estos dos nuevos par\u00e1metros para la propiedad \u00abtext-wrap\u00bb son \u00abbalance\u00bb y \u00abpretty\u00bb. <\/strong><\/p>\n\n\n\n

La primera reparte de manera visualmente homog\u00e9nea el texto de un bloque, lo que puede resultar muy \u00fatil, sobre todo para encabezados, puesto que en p\u00e1rrafos largos no funcionar\u00e1. En esencia, \u00abbalance\u00bb evita que dispongamos de, por ejemplo, un bloque de dos l\u00edneas que muestre palabras hu\u00e9rfanas o simplemente \u00abpoca densidad de palabras\u00bb en dicha l\u00ednea. As\u00ed pues, repartir\u00e1 las palabras para que ambas l\u00edneas cuenten con una densidad similar.<\/p>\n\n\n\n

En el caso de \u00abpretty\u00bb, podemos emplearlo en bloques de texto m\u00e1s densos, como p\u00e1rrafos, y resulta especialmente interesante y m\u00e1s efectivo que \u00abbalance\u00bb, puesto que no altera tanto las l\u00edneas, sino que previene la creaci\u00f3n de palabras hu\u00e9rfanas. As\u00ed, si encontramos p\u00e1rrafos con una \u00fanica palabra como \u00faltima l\u00ednea, nuestro CSS se las arreglar\u00e1 para que esta no se quede sola.<\/p>\n\n\n\n

Text-box trim y text-box-edge<\/h3>\n\n\n\n

Esta interesante propiedad apenas cuenta con soporte, por lo que ya te avisamos de que no podr\u00e1s emplearla con libertad a\u00fan. Se trata de una propiedad proyectada desde hace al menos 3 o 4 a\u00f1os y seguramente, y siendo muy halag\u00fce\u00f1os, hasta finales de este presente a\u00f1o, no cuente con soporte en los principales navegadores.<\/p>\n\n\n\n

En realidad, se trata de una correcci\u00f3n en la selecci\u00f3n de los textos en la web, muy demandada por los dise\u00f1adores<\/strong>. En esencia, se trata de evitar ese peque\u00f1o espacio que se genera cuando se selecciona un texto, que no corresponde a la altura de la tipograf\u00eda (ni de la altura X, ni de las ascendentes, ni de las may\u00fasculas, nada…). Esto resulta especialmente molesto en botones y otros elementos gr\u00e1ficos que requieren de mayor precisi\u00f3n y detalle. Puedes saber m\u00e1s acerca de esta propiedad en el siguiente enlace.<\/a><\/p>\n\n\n\n

Mejoras y novedades CSS en color para 2024<\/h2>\n\n\n\n

No todo es texto en CSS y por eso, los amantes del color tenemos mucho que celebrar con las nuevas incorporaciones relativas a estos. No pierdas detalle.<\/p>\n\n\n\n

Color-mix()<\/h3>\n\n\n\n

Otra de las propiedades que llevan alg\u00fan tiempo entre nosotros pero solo con soporte para algunos navegadores, como Safari, y hace unos meses, en Chrome y posteriormente en Firefox. Actualmente cuenta con una compatibilidad de entorno el 85%.<\/p>\n\n\n\n

Esta curiosa herramienta permite mezclar el valor de dos colores y mostrar el resultado de dicha mezcla en otro espacio o elemento. Lo realmente peculiar es que podemos especificar el m\u00e9todo de interpolaci\u00f3n de la mezcla y la concentraci\u00f3n de cada uno de los colores. Esto resulta especialmente \u00fatil cuando empleamos variables CSS. <\/p>\n\n\n\n

Veamos un ejemplo de su funcionamiento para poder recrear la siguiente imagen:<\/p>\n\n\n\n

\"Novedades<\/figure>\n\n\n\n
<ul>\n  <li>0%<\/li>\n  <li>25%<\/li>\n  <li>50%<\/li>\n  <li>75%<\/li>\n  <li>100%<\/li>\n  <li><\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
li:nth-child(1) {\n  background-color: color-mix(in srgb, #34c9eb 0%, white);\n}\n\nli:nth-child(2) {\n  background-color: color-mix(in srgb, #34c9eb 25%, white);\n}\n\nli:nth-child(3) {\n  background-color: color-mix(in srgb, #34c9eb 50%, white);\n}\n\nli:nth-child(4) {\n  background-color: color-mix(in srgb, #34c9eb 75%, white);\n}\n\nli:nth-child(5) {\n  background-color: color-mix(in srgb, #34c9eb 100%, white);\n}\n\nli:nth-child(6) {\n  background-color: color-mix(in srgb, #34c9eb, white);\n}<\/code><\/pre>\n\n\n\n
Como se puede observar, la sintaxis consiste en especificar el modo de mezcla, que en este caso es \u00abin srgb\u00bb, el primer color con el porcentaje de concentraci\u00f3n y el segundo, que en esta ocasi\u00f3n no hemos definido su concentraci\u00f3n.<\/p>\n\n\n\n
LCH y LAB<\/h3>\n\n\n\n
Como en el caso anterior, estas caracter\u00edsticas contaban con soporte en Safari, pero solo a lo largo del a\u00f1o pasado comenzaron a recibir soporte en el resto de navegadores, por lo que este es su a\u00f1o y la emplazaremos como otras de las interesantes novedades CSS para 2024<\/strong>.<\/p>\n\n\n\n
Para empezar, LCH<\/strong> hace referencia a \u00ablightness, Chroma and Hue\u00bb, o lo que es lo mismo; luminosidad, croma y tono. Resulta similar a HSL, pero curiosamente se asemeja m\u00e1s a la percepci\u00f3n de color de la mayor\u00eda de la gente, resultando muy intuitivo.<\/p>\n\n\n\n
\n
\n
Si quieres saber de qu\u00e9 estamos hablando, en este enlace podr\u00e1s comprobar de primera mano la diferencia entre los sistemas de color habituales y el LCH<\/a>. Este permite cambiar de tono sin ese ligero desfase de luminosidad y saturaci\u00f3n entre colores que presenta el resto de sistemas.<\/p>\n\n\n\n
Por otro lado, tenemos la notaci\u00f3n LAB<\/strong>, que en teor\u00eda es capaz de representar el rango completo de colores que el ojo humano puede percibir. Es un modo de color basado en un componente de luminosidad (L) y dos ejes (A y B), que distinguen entre verde y rojo, y azul y amarillo, respectivamente. Mientras que la luminosidad se expresa porcentualmente, los canales A y B, pueden poseer valores desde -125 a 125. Adem\u00e1s, podemos agregar un canal alfa mediante un par\u00e9ntesis. Se emplea de la siguiente manera:<\/p>\n\n\n\n
.color-lab-1 {\n  background-color: lab(100 125 125);\n}\n.color-lab-2 {\n  background-color: lab(100 125 125 \/ 0.4);\n}\n<\/code><\/pre>\n\n\n\n
No obstante, las nuevas especificaciones de color, CSS Color 4, est\u00e1n tratando de estandarizar un sistema mejorado, evoluci\u00f3n del LCH, llamado OKLCH, del cual hablaremos largo y cuando cuente con un nivel de soporte m\u00e1s firme en los distintos navegadores. Mientras tanto, puedes saber m\u00e1s en este enlace.<\/a><\/p>\n<\/div>\n\n\n\n
\n
\"Novedades<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Colores relativos<\/h3>\n\n\n\n
Una de las nuevas capacidades de CSS m\u00e1s ansiadas es la de los colores relativos<\/strong>. Resulta especialmente \u00fatil al trabajar con variables de color. Veamos c\u00f3mo nos puede ayudar:<\/p>\n\n\n\n
:root{\n   --clr-primary: red;\n}\nbody{\n   background: hsl(from var(--clr-primary) calc(h + 100) s l\/ .75);\n}<\/code><\/pre>\n\n\n\n
En el caso anterior, hemos declarado una variable de color rojo, empleando de hecho un c\u00f3digo predefinido por CSS. Pero \u00bfQu\u00e9 ocurre si queremos realizar una peque\u00f1a variaci\u00f3n de esta variable, como un cambio de opacidad o una alteraci\u00f3n din\u00e1mica, que funcione incluso si el valor de nuestra variable se ve alterado? Hasta ahora debiamos declarar una nueva variable para este caso, sin embargo, con los \u00abcolores relativos\u00bb, podemos alterar dicha variable a placer. En el casi anterior, transformamos puntualmente a HSL el color rojo de nuestra variable, y modificamos su \u00abhue\u00bb o tono de manera relativa, con un calc, agreg\u00e1ndole 100 unidades. Adem\u00e1s, le hemos agregado un canal alfa al 75%. Cosa de magia, \u00bfno crees?<\/p>\n\n\n\n
Novedades CSS responsive para 2024<\/h2>\n\n\n\n
Container queries<\/h3>\n\n\n\n
La aut\u00e9ntica revoluci\u00f3n responsive est\u00e1 a punto de materializarse y sobre todo, de estandarizarse. Podriamos estar hablando del fin de las \u00abmediaqueries\u00bb<\/strong> y por ende, de un aut\u00e9ntico cambio radical en el desarrollo web<\/strong>. Estamos hablando de las \u00abcontainer queries\u00bb, que se presenta como una alternativa a estas primeras.<\/p>\n\n\n\n
Su principal ventaja es que la condici\u00f3n no tiene en cuenta el tama\u00f1o del \u00abviewport\u00bb, sino del contenido y el contexto en el que se encuentra, o m\u00e1s bien, del contenedor del elemento en cuesti\u00f3n. El modo de empleo es tan sencillo como definir tres par\u00e1metros:<\/p>\n\n\n\n