Farvejustering - CSS-tricks

Den color-adjustegenskab er beskrevet af spec som ”konserverende farver i forskellige-kapacitet enheder.” Ved du, hvordan der er telefoner, tablets og andre enheder derude uden retina-kvalitetskærme? Denne egenskab giver browseren et tip til at træffe beslutninger om, hvordan man håndterer farver baseret på denne kvalitet.

Du tænker måske noget i retning af: "Vent, er ikke rød bare rød?" Og ja, det er helt sandt. Hvad er meningen med at optimere eller justere en farve, der er sand, uanset hvor den vises?

Pointen er, at browsere allerede har en tendens til at træffe disse beslutninger og justere farver på egen hånd, som at udsende en lidt anden rød, hvis brugeragenten ikke er i stand til at gengive en bestemt hex på grund af skærmkvaliteten på en anden faktor. Ejendommen siger effektivt til browseren, "Hej, jeg vil gerne have, at du bruger denne farve, men det er sejt, hvis du ikke kan og vil anvende dit bedste alternativ til situationen." Eller omvendt kan den instruere browseren om nøjagtigt at matche farven for enhver pris.

Trykte stilarter

Interessant nok bruger spec eksemplet med at udskrive websider i hele definitionen af color-adjust. Der er dog ingen egentlig dokumentation for, at den er beregnet til udskrivning. Det har ikke forhindret Chrome og Safari i at implementere en navngivet præfikset version webkit-print-color-adjust, hvilket er en stærk indikation på, at den er beregnet til udskrivningsformål.

Hvorfor betyder dette noget? Specifikationen beskriver en brugstilfælde, hvor vedligeholdelse af zebrastribning af et stylet bord på en udskrevet side kan hjælpe med at læse:

For eksempel kan en kortlægningswebsite, der tilbyder trykte anvisninger, muligvis "zebrastribe" trinene i retningerne, skiftevis mellem hvid og lysegrå baggrund. At miste denne zebrastribe og have en ren hvid baggrund ville gøre vejledningen sværere at læse med et hurtigt blik, når det distraheres i en bil.

Syntaks

.my-element ( color-adjust: (economy | exact); )

Værdier

• economy(startværdi): Denne værdi giver browseren mulighed for at foretage justeringer af farven og stylingen af ​​et element, hvor det beslutter, at det skal, uanset om det er for at forbedre læsbarheden, erstatte en farve, en enhed ikke er i stand til at vise, eller en anden faktor. Bemærk, at dette er standardværdien, og selvom ejendommen ikke anvendes, er det sådan, browsere opfører sig.
• exact: Denne værdi instruerer browseren til at matche en farve for enhver pris for at bevare den deklarerede styling. Det ville blive brugt til at kalde stilarter, der er “vigtige” eller “betydningsfulde” for elementet.

Bemærk, at standardbrugen af, economyom ejendommen kaldes eller ej, antyder, at den color-adjuster designet til at give et signal til browsere, der angiver typografier, der er vigtige nok til at bevare.

Specifikationsstatus

Den color-adjustegenskab er defineret i CSS Color modul niveau 4, som er i første offentlige arbejder udkast status på tidspunktet for dette skrives. Dette betyder, at det endnu ikke er godkendt af W3C og kan opdateres, ændres eller endda droppes i senere revisioner. Som sådan er denne ejendom ikke produktionsklar og betragtes som eksperimentel.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
19 *	48	Ingen	79 *	6 *

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

Mere information

• CSS-farvemodul Niveau 4 Første offentlige arbejdsudkast
• Microsoft Edge brugsstatistikker
• MDN-dokumentation
• Mulighederne for den farvejusterende egenskab