La color-adjustpropiedad se describe en la especificación como "preservar los colores en dispositivos de diferentes capacidades". ¿Sabes que hay teléfonos, tabletas y otros dispositivos sin pantallas de calidad retina? Bueno, esta propiedad proporciona al navegador una pista para tomar decisiones sobre cómo manejar los colores en función de esa calidad.
Es posible que esté pensando en algo como, "Espera, ¿no es rojo solo rojo?" Y sí, eso es absolutamente cierto. ¿Cuál es el punto de optimizar o ajustar un color que es verdadero sin importar dónde se muestre?
El punto es que los navegadores ya tienden a tomar estas determinaciones y ajustar los colores por sí mismos, como generar un rojo ligeramente diferente si el agente de usuario es incapaz de representar un hexadecimal específico debido a la calidad de la pantalla de algún otro factor. La propiedad le dice efectivamente al navegador: "Oye, me gustaría que usaras este color, pero es genial si no puedes y quieres aplicar tu mejor alternativa para la situación". O, a la inversa, puede indicarle al navegador que coincida exactamente con el color a cualquier precio.
Estilos impresos
Curiosamente, la especificación utiliza el ejemplo de impresión de páginas web en toda la definición de color-adjust. Sin embargo, no existe documentación real de que esté destinado a imprimir. Eso no ha impedido que Chrome y Safari implementen una versión con prefijo nombrada webkit-print-color-adjust, lo cual es una fuerte indicación de que está destinado a fines de impresión.
¿Por qué importa esto? La especificación describe un caso de uso en el que mantener las rayas de cebra de una mesa con estilo en una página impresa podría ayudar a la legibilidad:
Por ejemplo, un sitio web de mapas que ofrezca direcciones impresas podría marcar los pasos en las direcciones, alternando entre fondos blancos y grises claros. Perder estas rayas de cebra y tener un fondo blanco puro haría que las instrucciones fueran más difíciles de leer con una mirada rápida cuando se distrae en un automóvil.
color-adjustse establece en economy.
Sintaxis
.my-element ( color-adjust: (economy | exact); )Valores
economy(valor inicial): este valor permite que el navegador realice ajustes en el color y el estilo de un elemento cuando lo decida, ya sea para mejorar la legibilidad, reemplazar un color que un dispositivo no puede mostrar o algún otro factor. Tenga en cuenta que este es el valor predeterminado y, incluso si la propiedad no se aplica, así es como se comportarán los navegadores.exact: Este valor indica al navegador que haga coincidir un color a toda costa con el fin de preservar el estilo declarado. Se usaría para señalar estilos que son "importantes" o "significativos" para el elemento.
Tenga en cuenta que el uso predeterminado de economysi la propiedad se llama o no sugiere que color-adjustestá diseñada para proporcionar una señal a los navegadores que indique estilos que son lo suficientemente importantes para preservar.
Estado de especificación
La color-adjustpropiedad se define en el Nivel 4 del Módulo de Color CSS, que se encuentra en estado de primer borrador de trabajo público en el momento de escribir este artículo. Esto significa que aún no ha sido respaldado por el W3C y podría actualizarse, cambiarse o incluso eliminarse en revisiones posteriores. Como tal, esta propiedad no está lista para producción y se considera experimental.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 19 * | 48 | No | 79 * | 6 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Más información
- Módulo de color CSS Nivel 4 Primer borrador de trabajo público
- Estadísticas de uso de Microsoft Edge
- Documentación MDN
- Las posibilidades de la propiedad de ajuste de color