Podešavanje boje - CSS-trikovi

Anonim

color-adjustObjekt je opisao spec kao „očuvanje boje u različitim sposobnostima i uređajima.” Znate li kako vani postoje telefoni, tableti i drugi uređaji bez zaslona kvalitete mrežnice? Pa, ovo svojstvo pruža pregledniku savjet da donosi odluke o načinu rukovanja bojama na temelju te kvalitete.

Možda razmišljate nešto poput: "Čekaj, nije li crvena samo crvena?" I da, to je apsolutno točno. Kakva je svrha optimiziranja ili podešavanja boje koja je istinita bez obzira gdje se prikazuje?

Poanta je u tome da preglednici već imaju tendenciju donijeti te odredbe i sami prilagođavati boje, poput izbacivanja malo drugačije crvene boje ako korisnički agent nije sposoban generirati određeni hex zbog kvalitete zaslona nekog drugog faktora. Svojstvo pregledniku učinkovito govori: "Hej, volio bih da koristite ovu boju, ali u redu je ako ne možete i želite primijeniti svoju najbolju alternativu za situaciju." Ili, obrnuto, pregledniku može naložiti da se točno podudara s bojom pod bilo koji trošak.

Tiskani stilovi

Zanimljivo je da specifikacija koristi primjer ispisa web stranica tijekom definicije color-adjust. Međutim, ne postoji stvarna dokumentacija da je namijenjena ispisu. To nije spriječilo Chrome i Safari u primjeni prefiksirane verzije pod nazivom webkit-print-color-adjust, što je snažan pokazatelj da je namijenjen ispisu.

Zašto je ovo važno? Specifikacija opisuje slučaj upotrebe u kojem bi održavanje zebrastih pruga stiliziranog stola na ispisanoj stranici moglo pomoći u čitljivosti:

Na primjer, web mjesto za mapiranje koje nudi ispisane upute može "zebra-prugati" korake u uputama, izmjenjujući bijelu i svijetlo sivu pozadinu. Gubitak ovog zebrastog pruga i čisto bijele pozadine otežao bi čitanje uputa brzim pogledom kad se u automobilu odvrati pozornost.

Razlika između deklariranog i tiskanog stila kada color-adjustje postavljeno na economy.

Sintaksa

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

Vrijednosti

  • economy(početna vrijednost): Ova vrijednost omogućuje pregledniku da izvrši prilagodbe boje i stila elementa tamo gdje odluči da treba, bilo da se radi o poboljšanju čitljivosti, zamjeni boje koju uređaj nije u stanju prikazati ili nekom drugom čimbeniku. Imajte na umu da je ovo zadana vrijednost i, čak i ako se svojstvo ne primijeni, ovako će se ponašati preglednici.
  • exact: Ova vrijednost navodi da preglednik podudara boju pod svaku cijenu radi očuvanja deklariranog stila. Koristila bi se za pozivanje stilova koji su "važni" ili "značajni" za element.

Imajte na umu da zadana upotreba economynaziva li se svojstvo sugerira da color-adjustje dizajnirana da pruži signal preglednicima koji ukazuju na stilove koji su dovoljno važni za očuvanje.

Status specifikacije

color-adjustImovina definirana u CSS Boja Modul Level 4, koji je u prvom nacrtu status javnog radio u vrijeme pisanja ovog teksta. To znači da ga W3C tek treba odobriti i da bi mogao biti ažuriran, promijenjen ili čak odbačen u kasnijim revizijama. Kao takvo, ovo svojstvo nije spremno za proizvodnju i smatra se eksperimentalnim.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
19 * 48 Ne 79 * 6 *

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4

Više informacija

  • CSS modul u boji, razina 4, prvi javni radni nacrt
  • Statistika upotrebe Microsoft Edgea
  • MDN dokumentacija
  • Mogućnosti svojstva prilagodbe boje