Imprimir-color-ajustar | Trucos CSS - Trucos CSS

los print-color-adjust La propiedad CSS es algo así como una medida de reducción de costos cuando se trata de imprimir una página web. ¿Sabes cómo puedes imprimir literalmente una página web en una hoja de papel? Esto es de lo que estamos hablando. Al aplicar print-color-adjustle damos al navegador una "pista" sobre cómo manejar el color al imprimir, como ignorar un fondo oscuro, lo que puede ahorrarles a los usuarios el costo de tinta costosa.

 

.element {
  print-color-adjust: economy;
}

De acuerdo con las especificaciones, print-color-adjust reemplaza color-adjust propiedad que ha sido rechazada. Inicialmente, color-adjust está diseñado para ser una abreviatura de una colección de propiedades de ajuste de color "motivadas por el rendimiento", pero print-color-adjust fue la única propiedad compuesta admitida. Tenga en cuenta que también hay una versión con nombre webkit-print-color-adjust compatible con Chrome y Safari

Por qué esto importa

Podrías estar pensando algo como: "Espera, ¿no es rojo solo rojo?" Y sí, eso es absolutamente cierto. ¿De qué sirve optimizar o corregir un color que es verdadero sin importar dónde aparezca?

El punto es que los navegadores ya tienden a tomar estas determinaciones y ajustar los colores por sí mismos, como mostrar un rojo ligeramente diferente si el agente de usuario no puede mostrar un hexágono en particular debido a la calidad de la pantalla o algún otro factor. al navegador, "Oye, me gustaría que usaras este color, pero está bien si no puedes y quieres implementar tu mejor alternativa para la situación". O, por el contrario, puede indicarle al navegador que haga coincidir un color exactamente a toda costa.

¿Por qué importa esto? La especificación describe un caso de uso en el que mantener una tabla con estilo con rayas de cebra en una página impresa puede ayudar a la legibilidad:

Por ejemplo, un sitio web de mapas que ofrece direcciones impresas podría "cebrar" los pasos en las direcciones, alternando fondos blancos y grises claros. Perder esa cebra y tener un fondo blanco puro hará que las instrucciones sean más difíciles de leer de un vistazo rápido cuando se distrae en un automóvil.

Sintaxis

print-color-adjust: [economy | exact];

• Inicialmente: economy
• Se aplica a: todos los artículos
• Por herencia: si
• Valor calculado: palabra clave especificada
• Tipo de animación: Discreto

Valores

/* Keyword values */
print-color-adjust: economy;
print-color-adjust: exact;

/* Global values */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

• economy (valor inicial): Este valor permite que el navegador realice ajustes en el color y el estilo de un elemento cuando decide que es necesario, ya sea para mejorar la legibilidad, reemplazar un color que el dispositivo no puede mostrar o algún otro factor. Tenga en cuenta que este es el valor predeterminado e, incluso si la propiedad no está implementada, así es como se comportarán los navegadores.
• exact: Este valor indica al navegador que haga coincidir un color a toda costa en nombre de la preservación del estilo declarado. Se usará para llamar a estilos que son "importantes" o "significativos" para el elemento.

Tenga en cuenta que el uso predeterminado de economy - ya sea que la propiedad se llame o no - sugiere esto print-color-adjust está destinado a proporcionar una señal a los navegadores, mostrando estilos que son lo suficientemente importantes como para conservarlos. El navegador hace el juicio final.

Demostración

Aquí tenemos algunas secciones con un título, un párrafo y algunos colores. Los colores del texto son intencionalmente ilegibles para representar cómo el navegador lo representará cuando se imprima. print-color-adjust está configurado de forma predeterminada economy Pero comparemos algunas capturas de pantalla que muestran la diferencia entre esto y si hubiéramos declarado exact colores en su lugar.

Especificación

los print-color-adjust La propiedad se define en Nivel de especificación del módulo CSS de ajuste de color 1 que se encuentra en estado de borrador del editor en el momento de la redacción. Esto significa que aún debe ser aprobado por el W3C y puede actualizarse, cambiarse o incluso eliminarse en revisiones posteriores. Como tal, esta característica no está lista para la producción y se considera experimental.

Compatibilidad con navegador

Publicaremos los datos para admitir el navegador caniuse color-adjust aquí ya que está actualmente disponible en el momento de escribir este artículo.

Esto es lo que tenemos para el prefijo -webkit-print-color-adjust:

Compatibilidad con varios navegadores print-color-adjust y webkit-print-color-adjustcasi todo está cubierto excepto Internet Explorer.