En los últimos meses no dejan de aparecer novedades sobre CSS. Hace poco hablamos sobre la nueva sintaxis de los media queries que podremos empezar a usar en un futuro próximo. Pero hoy os traemos una nueva propiedad que puedes aplicar ya a tus proyectos, y con la que podemos cambiar el color a ciertos inputs de HTML de forma muy sencilla. Nos referimos a la nueva propiedad CSS accent-color.
¿Y que supone esta nueva propiedad para los que sois diseñadores web?. Aunque en un principio puede suponer poca cosa, los que alguna vez hayáis tenido que customizar formularios y sus elementos, seguro que sabéis que puede resultar bastante pesado. Una tarea que en principio puede resultar tan nimia como cambiar un color, involucra muchas propiedades y líneas en nuestro CSS.
Como siempre que hablamos de HTML y CSS, para todos aquellos que nunca habéis usado estos lenguajes, podéis mirar nuestros artículos de introducción a HTML e introducción a CSS. Seguro que os sirven para entender mejor todos los términos sobre los que vamos a hablar de aquí en adelante.
¿Cómo cambiabamos el color de estos elementos hasta ahora?
Imaginemos por un momento que tenemos un radio button y que para que sea homogéneo con el diseño de nuestra web, queremos que tenga otro color. Esta sería la estrategia a seguir:
- Esconder el radio button original.
- Crear un elemento que se muestre al tener el radio button sin marcar. Este elemento lo podemos construir directamente en CSS, o que sea una imagen.
- Crear otro elemento que se muestre al tener el radio button marcado. Al igual que el anterior, lo podemos construir directamente en CSS, o que sea una imagen.
Y para esto, lo más seguro es que necesitemos usar pseudo-elementos, pseudo-clases, tener que alinear los nuevos elementos dentro de sus contenedores correspondientes, etc. Es decir, un trabajo bastante tedioso. Por suerte, al menos para los cambios de color, con la propiedad CSS accent-color es más sencillo.
Elementos HTML sobre los que podemos aplicar accent-color
Antes de ver como funciona esta nueva propiedad CSS, veamos sobre que elementos HTML podemos aplicarla.
- Radio button –
<input type="radio"> - Checkboxes –
<input type="checkbox"> - Slider de rango –
<input type="range"> - Barra de progreso –
<progress>
Por el momento, estos son los cuatro elementos HTML que vamos a poder modificar su color mediante accent-color. Aunque no se descarta que se haya nuevos añadidos a esta lista en el futuro. A continuación, veamos como funciona accent-color.
Cambiando el color con accent-color
En primer lugar, veamos la sintaxis de la propiedad CSS accent-color.
Tenemos dos valores que podemos usar. Por una parte, con el valor auto obtenemos el aspecto original del elemento HTML. Y si queremos cambiar el color de dicho elemento, simplemente añadiremos como valor el color que queramos. Este color se puede introducir como rgb, rgba, hex, hsl, hsla, o su nombre de color.
Por ejemplo, vamos a ver las diferencias en tendríamos entre el aspecto original y un color al azar, de un radio button, checkbox, slider de rango y barra de progreso, tanto en Firefox como en Chrome.
En la imagen no solo podemos comprobar el cambio de color de los elementos gracias a accent-color, sino que si nos vamos al detalle, veremos que de forma predeterminada, Chrome y Firefox no rederizan estos elementos HTML de la misma forma: diferente tonalidades de azul entre uno y otro, grosor y color de los bordes diferentes, el botón del slider… Por eso, con accent-color tambi;en vamos a conseguir que el diseño de estos elementos sea más homogéneo sea cual sea el navegador desde donde veamos la web.
Por cierto, este es el código CSS que hemos escrito para aplicar esa tonalidad de rosa, con la clase custom-color que le hemos puesto a a esos elementos HTML:
.custom-color {
accent-color: hsl(301, 82%, 50%);
}Para los más curiosos, siempre podéis echar entrar en la web de la W3C, y tener un visión general más técnica de esta propiedad CSS.
Compatibilidad y futuros añadidos
Si solo hemos hablado hasta ahora de Chrome y Firefox no es casualidad, ya que por el momento son los dos únicos navegadores web que soportan accent-color, tanto en sus versiones de escritorio como para móviles. Microsoft Edge, al estar basado en Chromium como Chrome, también está soportado. Esto nos deja fuera otros navegadores como Safari, Opera e Internet Explorer, que esperamos que se sumen no dentro de mucho, al menos los dos primeros.
Los que queráis empezar a usarlo pero os preocupa este tipo de incompatibilidades, siempre podéis echar mano de la reglas CSS @supports, para que sea el propio navegador el que compruebe si es compatible o no, y use las líneas de código adecuadas. Si queréis saber más sobre esta regla @supports, os recomendamos echar un vistazo a MDN Web Docs.
Y con esto terminamos. Como hemos podido comprobar, gracias a la propiedad CSS accent-color, cambiar el color a ciertos elementos e inputs HTML es ahora más sencillo que nunca. Lo que antes involucraba esconder elementos, y volverlos a crear desde cero, ahora puede realizarse con una simple línea de código. Todo los que hacéis formularios, y os guste personalizar hasta el más mínimo detalle, seguro que os va a encantar esta nueva incorporación.
Como siempre, tenéis abiertos los comentarios para hacernos llegar vuestras dudas y experiencias, que seguro que nos ayudan a todos para crear un mejor CSS.
