Apenas hemos comenzado este año 2024 y ya podemos hablaros de las principales novedades en CSS. Una serie de mejoras incorporadas a nuestro «lenguaje estilístico web favorito», que harán las delicias de propios y ajenos al mundo del diseño web. Para nosotros ya es costumbre hablarte de las nuevas tendencias de CSS, como sabrás de otros artículos anteriores, y este año no puede ser de otra manera.
Como de costumbre, hay propiedades que aún cuentan con una compatibilidad reducida y no se han extendido aún a todos los navegadores, pero a buen seguro, no tardarán en hacerlo. ¿Nos acompañas? ¡Pues vamos allá!
Este año CSS viene cargado con bastantes mejoras y novedades de cara a la edición y estilos de los elementos de texto como párrafos, títulos o citas, entre otros. En su mayoría están enfocados a conciliar bastantes de las quejas o demandas de los diseñadores gráficos más puristas en lo que a texto se refiere, logrando ofrecer mejoras significativas que resultarán de agradecer por un sinfín de profesionales del sector editorial. Veamos algunas de ellas.
Aunque emplazamos esta novedad CSS en 2024, esta peculiar propiedad cuenta con soporte en Google Chrome y Safari desde hace varios meses. No así en Mozilla Firefox, por lo que deberíamos tenerlo en cuenta a la hora de emplearlas. Estos dos nuevos parámetros para la propiedad «text-wrap» son «balance» y «pretty».
La primera reparte de manera visualmente homogénea el texto de un bloque, lo que puede resultar muy útil, sobre todo para encabezados, puesto que en párrafos largos no funcionará. En esencia, «balance» evita que dispongamos de, por ejemplo, un bloque de dos líneas que muestre palabras huérfanas o simplemente «poca densidad de palabras» en dicha línea. Así pues, repartirá las palabras para que ambas líneas cuenten con una densidad similar.
En el caso de «pretty», podemos emplearlo en bloques de texto más densos, como párrafos, y resulta especialmente interesante y más efectivo que «balance», puesto que no altera tanto las líneas, sino que previene la creación de palabras huérfanas. Así, si encontramos párrafos con una única palabra como última línea, nuestro CSS se las arreglará para que esta no se quede sola.
Esta interesante propiedad apenas cuenta con soporte, por lo que ya te avisamos de que no podrás emplearla con libertad aún. Se trata de una propiedad proyectada desde hace al menos 3 o 4 años y seguramente, y siendo muy halagüeños, hasta finales de este presente año, no cuente con soporte en los principales navegadores.
En realidad, se trata de una corrección en la selección de los textos en la web, muy demandada por los diseñadores. En esencia, se trata de evitar ese pequeño espacio que se genera cuando se selecciona un texto, que no corresponde a la altura de la tipografía (ni de la altura X, ni de las ascendentes, ni de las mayúsculas, nada…). Esto resulta especialmente molesto en botones y otros elementos gráficos que requieren de mayor precisión y detalle. Puedes saber más acerca de esta propiedad en el siguiente enlace.
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.
Otra de las propiedades que llevan algún 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%.
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étodo de interpolación de la mezcla y la concentración de cada uno de los colores. Esto resulta especialmente útil cuando empleamos variables CSS.
Veamos un ejemplo de su funcionamiento para poder recrear la siguiente imagen:
<ul>
<li>0%</li>
<li>25%</li>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li></li>
</ul>li:nth-child(1) {
background-color: color-mix(in srgb, #34c9eb 0%, white);
}
li:nth-child(2) {
background-color: color-mix(in srgb, #34c9eb 25%, white);
}
li:nth-child(3) {
background-color: color-mix(in srgb, #34c9eb 50%, white);
}
li:nth-child(4) {
background-color: color-mix(in srgb, #34c9eb 75%, white);
}
li:nth-child(5) {
background-color: color-mix(in srgb, #34c9eb 100%, white);
}
li:nth-child(6) {
background-color: color-mix(in srgb, #34c9eb, white);
}Como se puede observar, la sintaxis consiste en especificar el modo de mezcla, que en este caso es «in srgb», el primer color con el porcentaje de concentración y el segundo, que en esta ocasión no hemos definido su concentración.
Como en el caso anterior, estas características contaban con soporte en Safari, pero solo a lo largo del año pasado comenzaron a recibir soporte en el resto de navegadores, por lo que este es su año y la emplazaremos como otras de las interesantes novedades CSS para 2024.
Para empezar, LCH hace referencia a «lightness, Chroma and Hue», o lo que es lo mismo; luminosidad, croma y tono. Resulta similar a HSL, pero curiosamente se asemeja más a la percepción de color de la mayoría de la gente, resultando muy intuitivo.
Si quieres saber de qué estamos hablando, en este enlace podrás comprobar de primera mano la diferencia entre los sistemas de color habituales y el LCH. Este permite cambiar de tono sin ese ligero desfase de luminosidad y saturación entre colores que presenta el resto de sistemas.
Por otro lado, tenemos la notación LAB, que en teoría 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ás, podemos agregar un canal alfa mediante un paréntesis. Se emplea de la siguiente manera:
.color-lab-1 {
background-color: lab(100 125 125);
}
.color-lab-2 {
background-color: lab(100 125 125 / 0.4);
}
No obstante, las nuevas especificaciones de color, CSS Color 4, están tratando de estandarizar un sistema mejorado, evolución del LCH, llamado OKLCH, del cual hablaremos largo y cuando cuente con un nivel de soporte más firme en los distintos navegadores. Mientras tanto, puedes saber más en este enlace.
Una de las nuevas capacidades de CSS más ansiadas es la de los colores relativos. Resulta especialmente útil al trabajar con variables de color. Veamos cómo nos puede ayudar:
:root{
--clr-primary: red;
}
body{
background: hsl(from var(--clr-primary) calc(h + 100) s l/ .75);
}En el caso anterior, hemos declarado una variable de color rojo, empleando de hecho un código predefinido por CSS. Pero ¿Qué ocurre si queremos realizar una pequeña variación de esta variable, como un cambio de opacidad o una alteración dinámica, 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 «colores relativos», podemos alterar dicha variable a placer. En el casi anterior, transformamos puntualmente a HSL el color rojo de nuestra variable, y modificamos su «hue» o tono de manera relativa, con un calc, agregándole 100 unidades. Además, le hemos agregado un canal alfa al 75%. Cosa de magia, ¿no crees?
La auténtica revolución responsive está a punto de materializarse y sobre todo, de estandarizarse. Podriamos estar hablando del fin de las «mediaqueries» y por ende, de un auténtico cambio radical en el desarrollo web. Estamos hablando de las «container queries», que se presenta como una alternativa a estas primeras.
Su principal ventaja es que la condición no tiene en cuenta el tamaño del «viewport», sino del contenido y el contexto en el que se encuentra, o más bien, del contenedor del elemento en cuestión. El modo de empleo es tan sencillo como definir tres parámetros:
.contenedor{
container-name: padre;
container-type: inline-size;
}También podemos definir ambos parámetros con el atajo «container»:
.contenedor{
container: padre / inline-size;
}Ahora bastará con escribir de manera similar a las «mediaqueries» la regla o excepción. Por ejemplo, podemos limitar los hijos del contenedor cuando estos ocupen más de 20 rem de anchura:
.contenedor{
container: padre;
}
@contenedor padre (max-width: 20rem){
.hijo{
color:red;
}
}Además, una de las características más especiales de las «container queries» es que posee unidades únicas relativas a este mismo. Estas son algunas de ellas:
Puede que estés familiarizado con «valid» o «invalid», dado que navegadores como Firefox e incluso Safari cuentan con soporte para funciones similares desde algunos años (meses, en el caso de Safari). Sin embargo, este año contarán con soporte en los principales navegadores las propiedades «user-valid» e «user-invalid». ¿En qué consisten? Facilitan la validación de formularios que tantos quebraderos de cabeza nos pueden dar si, como hasta ahora, debemos recurrir a JavaScript.
De esta manera, podemos indicar de manera visual a un usuario de que el contenido insertado en un input no cumple con los requerimientos del formato, como por ejemplo, un email o un teléfono. No obstante, debes recordar que este recurso no tiene efecto de cara al servidor, ya que se trata de algo meramente estético, orientado a mejorar la UI.
Cualquier desarrollador se ha encontrado con sitios web con transiciones fluidas entre cada página y ha quedado emblesado por la suavidad con la que esto sucede. Y también ha quedado horrorizado al comprobar el coste de dicho efecto en términos de código y peso del sitio web.
Es por eso que la nueva API de CSS «view transitions» permite que las transiciones del DOM entre nuestras distintas páginas resulten fluidas como nunca sin requerir de pesadas librerias de JavaScript, entre otros. Su funcionamiento se basa en el uso de posiciones fijas y un pseudoelemento llamado «::view-transition».
Aunque aún no cuenta con un soporte extendido y es principalmente experimental, pero, a lo largo del presente año comenzaremos a presenciar una gran evolución en los principales navegadores al respecto. ¡Estamos deseandolo! Si quieres saber más al respecto, no pierdas detalle.
Este es uno de los mayores avances en CSS. Se trata de la posibilidad de indicar con mayor exactitud una regla CSS con un tipo de selector más concreto y conciso de lo habitual. Con «scope» podemos definir el alcance de los estilos que definamos a ciertos selectores, pudiendo generar rangos de acción.
Veamos un ejemplo. Supongamos que disponemos de varios encabezados de distinto nivel con una clase «.titulo». Si indicamos que dicha clase posea color rojo, estaremos de acuerdo en que todos aquellos encabezados con esta clase así se mostrarán. Sin embargo, es posible que deseemos que esta condición se cumpla únicamente en caso de cumplirse ciertas condiciones, como que estos encabezados se encuentren en un «section», pero nunca en un «article». En este caso, bastará con acotar con «scope» de la siguiente manera:
@scope(section) to (article){
.titulo{ color: red;}
}En este caso, hemos acotado el rango de acción empleando etiquetas de elementos, pero podemos apuntar a clases e ID. Ahora imagina el amplio abanico de posibilidades que supone esta nueva incorporación y la revolución que supone a la hora de redactar nuestras hojas de estilo CSS.
Un secreto a voces. A lo largo del año pasado ya se implementó la posibilidad de anidar nuestro CSS en navegadores como Chrome o Firefox, y a lo largo de este 2024 esta novedad CSS se estandarizará por completo.
Hablamos de nada más y nada menos, de una de mejores características de preprocesadores CSS como SASS o LESS. El anidamiento simplifica la redacción de CSS y aumenta la velocidad de desarrollo en sobremanera, pero ahora de manera nativa.
El funcionamiento resulta tan sencillo como apuntar a elementos anidados en nuestro HTML indicando el selector dentro de otro. Veamos un ejemplo para simplificar nuestros CSS, acortando selectores:
main{
article {
.card{
background: red;
}
}
}Mientras que hasta ahora debíamos dar estilos a «main», «article» y «.card» por separado, llegando a crear largos selectores de más de 3 o 4 niveles, ahora podemos acortarlos gracias a este útil recurso.
En este caso vamos a hablar del pseudo-selector «:has()». Cuenta con un amplio soporte ya que está entre nosotros desde hace algún tiempo, pero no ha sido hasta ahora cuando se ha estandarizado.
Lo realmente espectacular de esta herramienta es su utilidad, ya que nos sirve para crear un selector condicional. De esta manera, podemos especificar estilos en función de ciertas premisas. Por ejemplo, si deseamos que el color de elemento con clase «.card» sea distinto en función de si posee o no un elemento de clase «imagen» en su interior, bastará con generar un selector tal que así:
.card:has(.imagen){
background: red;
}Como podrás extraer de esta sintaxis, con indicar la condición entre paréntesis en el pseudo-selector, apuntaremos al elemento cuando esta se cumpla. Además, huelga decir que la condición puede ser otro pseudo-selector, multiplicando así la funcionalidad de «:has()».
Es posible que encuentres ciertas similitudes en otro viejo conocido, como es «:not», del que ya te hablamos en un artículo anterior. ¿Y tú, ya los usas?
Las nuevas funciones trigonométricas de CSS aportan un aire fresco a todos aquellos que nos hemos visto forzados a depender de JavaScript para realizar algún estilo con este tipo de funciones matemáticas. Su funcionamiento es tan sencillo como emplear una calculadora científica. En este ejemplo, damos una altura de 50px a un elemento y dejamos que la anchura se calcule en función del seno relativo a la anchura.
div{
width: calc(sin(45deg) * 50px);
height: 50px;
}Como podrás imaginar, esto resulta especialmente útil a la hora de crear animaciones y otros elementos gráficos. Por supuesto, podemos emplear la gran mayoría de funciones trigonométricas; seno, coseno, tangente, arcoseno, arcotangente, ….
Si había un deseo en nuestra carta a los reyes magos, era «animation-timeline». Y es que la incorporación de esta propiedad en CSS supone un auténtico adios a librerías como AOS JS, y otras tantas dedicadas a realizar «Parallax» y otros efectos basados en disparadores y scroll.
Gracias a esta nueva característica, podemos hacer el mencionado «Parallax» con apenas dos líneas de código:
.parallax {
animation: parallax linear;
animation-timeline: scroll();
}Además, podemos agregar condiciones a esta «timeline» como disparadores, visualizaciones en pantalla de elementos, definir desfases de dichos disparadores, … ¡Todo un juguete!
Lo sabemos, hay más, muchas más, y otras tantas en camino, pero no podemos ceder a la emoción. Esta es nuestra selección de novedades CSS para 2024 para el diseño web, pero no desesperes, porque en breve te traeremos una nueva tanda de características que te dejará boquiabierto.
Antes de despedirnos, te recordamos que para evitar desagradables sustos, sobre todo con propiedades experimentales de CSS, es recomendable comprobar en «Can I use» la compatibilidad con los principales navegadores. Al fin y al cabo, no desarrollas para ti, sino para los usuarios.
Te esperamos en el próximo artículo. ¡Hasta pronto!
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más