Hay personas a las que les gusta estar al día de todas las novedades y tendencias del mundo de la programación. Si tú eres una de esas personas, este artículo es para ti, pues vamos a tratar una novedad de CSS.
Se trata de la propiedad condicional if(), que ya está disponible en CSS en algunos navegadores, especialmente en Google Chrome a partir de su versión 137.
En el siguiente vídeo, uno de los profesores de nuestro Bootcamp Full Stack Web Developer, Sergio Jiménez, enseña esta actualización de CSS.
Aceptar el consentimiento para ver esto
Como se comenta en el vídeo, la información proporcionada hasta ahora es limitada. Sin embargo, Sergio consigue hacer unos ejemplos en los que se utilizan las tres funciones siguientes:
- style() – Si se cumple un estilo concreto.
- supports() – Si el navegador soporta una característica.
- media() – Si se cumple una condición de dispositivo o de ventana gráfica.
En los ejemplos que expone Sergio para la explicación, utiliza tres div del archivo HTML.
En el primer caso, realiza el siguiente ejemplo para la función style(), donde dependiendo del background-color se aplica un color u otro:
body {
background-color: darkmagenta;
}
div {
padding-block: 4rem;
margin-block-end: 1rem;
}
div {
color: var(--color);
background-color: if(
style(--color: white): black;
style(--color: darkblue): red;
else white
);
}
.dark {
--color: orange;
}
.light {
--color: white;
}
.red {
--color: darkblue;
}
Por otro lado, para el ejemplo de la función media() se añade el siguiente código, que permite cambiar el tamaño de la fuente que utiliza letra dependiendo del dispositivo o la ventana gráfica:
body {
background-color: darkmagenta;
}
div {
padding-block: 4rem;
margin-block-end: 1rem;
}
div {
color: var(--color);
background-color: if(
style(--color: white): black;
style(--color: darkblue): red;
else white
);
font-size: if(
media(width < 600px): 1.5rem;
else 3rem
);
}
.dark {
--color: orange;
}
.light {
--color: white;
}
.red {
--color: darkblue;
}
Finalmente, en el ejemplo para supports() vuelve a usar background-color, con lo que se pretende aplicar la condición en el caso de que el navegador lo soporte:
body {
background-color: darkmagenta;
}
div {
padding-block: 4rem;
margin-block-end: 1rem;
}
div {
color: var(--color);
background-color: if(
style(--color: white): black;
style(--color: darkblue): red;
else white
);
font-size: if(
media(width < 600px): 1.5rem;
else 3rem
);
background-color: if(
supports(color: color-mix(in srgb, #02b5d5, #01a9ff)): color-mix(in srgb, #02b5d5, #01a9ff);
else #0cafeb
);
}
.dark {
--color: orange;
}
.light {
--color: white;
}
.red {
--color: darkblue;
}
Estos son algunas de las funciones que ya se pueden empezar a utilizar con if() en CSS y donde seguro que poco a poco se irán incorporando nuevas actualizaciones.
Recuerda que si quieres estar al día de las novedades de estas tecnologías y convertirte en profesional de la programación, en SocraTech contamos con un Bootcamp Full Stack Web Developer con el que formarte en 16 semanas. Échale un vistazo y comprueba que aprender a programar es fácil cuando te lo explican bien.
