De color-adjusteigenschap wordt door de specificatie beschreven als 'kleuren behouden in apparaten met verschillende capaciteiten'. Weet je hoe er telefoons, tablets en andere apparaten zijn zonder schermen van retina-kwaliteit? Welnu, deze eigenschap geeft de browser een hint om beslissingen te nemen over hoe om te gaan met kleuren op basis van die kwaliteit.
Je denkt misschien iets in de trant van: "Wacht, is rood niet gewoon rood?" En ja, dat is absoluut waar. Wat heeft het voor zin om een kleur te optimaliseren of aan te passen die waar is, ongeacht waar deze wordt weergegeven?
Het punt is dat browsers al de neiging hebben om deze bepalingen uit te voeren en kleuren zelf aan te passen, zoals het weergeven van een iets ander rood als de user-agent niet in staat is om een specifieke hexadecimaal weer te geven vanwege de schermkwaliteit van een andere factor. De accommodatie zegt in feite tegen de browser: "Hé, ik zou willen dat je deze kleur gebruikt, maar het is cool als je je beste alternatief voor de situatie niet kunt en wilt toepassen." Of omgekeerd, het kan de browser instrueren om tegen elke prijs de kleur exact te matchen.
Afgedrukte stijlen
Interessant genoeg gebruikt de specificatie het voorbeeld van het afdrukken van webpagina's in de hele definitie van color-adjust. Er is echter geen daadwerkelijke documentatie dat het bedoeld is om af te drukken. Dat heeft Chrome en Safari er niet van weerhouden om een voorvoegsel met de naam te implementeren webkit-print-color-adjust, wat een sterke indicatie is dat deze bedoeld is voor afdrukdoeleinden.
Waarom maakt dit uit? De specificatie beschrijft een use-case waarbij het handhaven van de zebrastrepen van een gestileerde tafel op een afgedrukte pagina de leesbaarheid zou kunnen helpen:
Een kaartwebsite met gedrukte routebeschrijvingen kan bijvoorbeeld de stappen in de richtingen "zebrastrepen", afwisselend in witte en lichtgrijze achtergronden. Door deze zebrastrepen te verliezen en een zuiver witte achtergrond te hebben, zouden de aanwijzingen moeilijker te lezen zijn met een snelle blik wanneer ze worden afgeleid in een auto.
color-adjustis ingesteld op economy.
Syntaxis
.my-element ( color-adjust: (economy | exact); )Waarden
economy(initiële waarde): met deze waarde kan de browser aanpassingen maken aan de kleur en stijl van een element waar hij besluit dat het nodig is, of het nu is om de leesbaarheid te verbeteren, een kleur te vervangen die een apparaat niet kan weergeven of een andere factor. Merk op dat dit de standaardwaarde is, en zelfs als de eigenschap niet wordt toegepast, zullen browsers zich zo gedragen.exact: Deze waarde geeft de browser de opdracht om koste wat het kost een kleur te matchen om de aangegeven stijl te behouden. Het zou worden gebruikt om stijlen aan te roepen die "belangrijk" of "significant" zijn voor het element.
Merk op dat het standaardgebruik van economyof de eigenschap al dan niet wordt aangeroepen suggereert dat het color-adjustis ontworpen om een signaal te geven aan browsers die stijlen aangeeft die belangrijk genoeg zijn om te behouden.
Specificatie Status
De color-adjusteigenschap is gedefinieerd in de CSS Color Module Level 4, die zich op het moment van schrijven in de status van eerste openbare werkconcept bevindt. Dit betekent dat het nog moet worden goedgekeurd door het W3C en kan worden bijgewerkt, gewijzigd of zelfs verwijderd in latere herzieningen. Als zodanig is deze eigenschap niet productieklaar en wordt als experimenteel beschouwd.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 19 * | 48 | Nee | 79 * | 6 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Meer informatie
- CSS Color Module Level 4 First Public Working Draft
- Gebruiksstatistieken van Microsoft Edge
- MDN-documentatie
- De mogelijkheden van de eigenschap voor kleuraanpassing