La color-adjustproprietà è descritta dalle specifiche come "preservare i colori in dispositivi con capacità diverse". Sai come ci sono telefoni, tablet e altri dispositivi là fuori senza schermi di qualità retina? Bene, questa proprietà fornisce al browser un suggerimento per prendere decisioni su come gestire i colori in base a quella qualità.
Potresti pensare a qualcosa del tipo: "Aspetta, il rosso non è solo rosso?" E, sì, è assolutamente vero. Qual è lo scopo di ottimizzare o regolare un colore vero, indipendentemente da dove viene visualizzato?
Il punto è che i browser tendono già a fare queste determinazioni e ad aggiustare i colori da soli, come emettere un rosso leggermente diverso se il programma utente non è in grado di rendere un esadecimale specifico a causa della qualità dello schermo di qualche altro fattore. La proprietà sta effettivamente dicendo al browser: "Ehi, vorrei che usassi questo colore, ma è bello se non puoi e vuoi applicare la tua migliore alternativa per la situazione". Oppure, al contrario, può indicare al browser di abbinare esattamente il colore a tutti i costi.
Stili stampati
È interessante notare che la specifica utilizza l'esempio della stampa di pagine Web in tutta la definizione di color-adjust. Tuttavia, non esiste alcuna documentazione effettiva che sia destinata alla stampa. Ciò non ha impedito a Chrome e Safari di implementare una versione con prefisso denominata webkit-print-color-adjust, il che è una forte indicazione che è destinata alla stampa.
Perché questo è importante? Le specifiche descrivono un caso d'uso in cui mantenere lo striping zebrato di una tabella con stile su una pagina stampata potrebbe aiutare la leggibilità:
Ad esempio, un sito Web di mappatura che offre indicazioni stampate potrebbe "zebrare" i passaggi nelle direzioni, alternando sfondi bianchi e grigio chiaro. Perdere queste strisce zebrate e avere uno sfondo bianco puro renderebbe le indicazioni più difficili da leggere con una rapida occhiata quando si è distratti in auto.
color-adjustè impostata su economy.
Sintassi
.my-element ( color-adjust: (economy | exact); )Valori
economy(valore iniziale): questo valore consente al browser di apportare modifiche al colore e allo stile di un elemento in cui decide di doverlo fare, sia che si tratti di migliorare la leggibilità, sostituire un colore che un dispositivo non è in grado di visualizzare o qualche altro fattore. Notare che questo è il valore predefinito e, anche se la proprietà non è applicata, questo è il modo in cui si comporteranno i browser.exact: Questo valore indica al browser di abbinare un colore a tutti i costi per preservare lo stile dichiarato. Sarebbe usato per richiamare gli stili che sono "importanti" o "significativi" per l'elemento.
Si noti che l'uso predefinito del economyfatto che la proprietà venga chiamata o meno suggerisce che color-adjustè progettato per fornire un segnale ai browser che indica gli stili che sono abbastanza importanti da preservare.
Stato delle specifiche
La color-adjustproprietà è definita nel CSS Color Module Level 4, che è nel primo stato di bozza di lavoro pubblico al momento della stesura di questo documento. Ciò significa che deve ancora essere approvato dal W3C e potrebbe essere aggiornato, modificato o addirittura abbandonato nelle revisioni successive. In quanto tale, questa proprietà non è pronta per la produzione ed è considerata sperimentale.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 19 * | 48 | No | 79 * | 6 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Maggiori informazioni
- CSS Color Module Livello 4 Prima bozza di lavoro pubblico
- Statistiche sull'utilizzo di Microsoft Edge
- Documentazione MDN
- Le possibilità della proprietà di regolazione del colore