Prilagoditev barve - CSS-triki

Anonim

color-adjustLastnost je opisal spec kot »ohranjanje barv v napravah drugačen-zmogljivosti." Veste, kako obstajajo telefoni, tablični računalniki in druge naprave brez mrežničnih zaslonov? No, ta lastnost daje brskalniku namig, kako sprejeti odločitve o ravnanju z barvami glede na to kakovost.

Morda razmišljate kaj podobnega: "Počakajte, ali ni rdeča samo rdeča?" In ja, to je popolnoma res. Kakšen smisel je optimizirati ali prilagoditi barvo, ki drži, ne glede na to, kje je prikazana?

Bistvo je v tem, da brskalniki že ponavadi sprejemajo te določitve in sami prilagajajo barve, na primer izpisujejo nekoliko drugačno rdečo barvo, če uporabniški agent zaradi kakovosti zaslona nekaterih drugih dejavnikov ne more upodobiti določenega heksa. Lastnost brskalniku dejansko reče: "Hej, rad bi, da uporabiš to barvo, vendar je v redu, če ne moreš in želiš uporabiti svoje najboljše alternative za situacijo." Ali obratno, brskalniku lahko naroči, da se za vsako ceno natančno ujema z barvo.

Tiskani slogi

Zanimivo je, da spec uporablja primer tiskanja spletnih strani v celotni definiciji color-adjust. Vendar dejanske dokumentacije, da je namenjena tiskanju, ni. To Chromeu in Safariju ni preprečilo, da bi uvedli vnaprej določeno različico z imenom webkit-print-color-adjust, kar je močan znak, da je namenjen tiskanju.

Zakaj je to pomembno? Specifikacija opisuje primer uporabe, pri katerem bi lahko ohranjevanje zebraste črte stilizirane tabele na natisnjeni strani pripomoglo k čitljivosti:

Na primer, spletno mesto za preslikavo, ki ponuja natisnjena navodila, lahko korake v navodilih označi z zebrasto črto, izmenično med belo in svetlo sivo podlago. Če bi izgubili to zebrasto črto in bi imeli čisto belo ozadje, bi bilo smeri težko brati s hitrim pogledom, ko bi bili moteni v avtomobilu.

Razlika med prijavljenim in natisnjenim slogom, ko color-adjustje nastavljeno na economy.

Sintaksa

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

Vrednote

  • economy(začetna vrednost): ta vrednost omogoča brskalniku, da prilagodi barvo in slog elementa, kjer se odloči, da bo to izboljšalo, ali bo izboljšalo čitljivost, zamenjalo barvo, ki jo naprava ne more prikazati, ali kakšen drug dejavnik. Upoštevajte, da je to privzeta vrednost, in tudi če lastnost ni uporabljena, se tako obnašajo brskalniki.
  • exact: Ta vrednost brskalniku naroči, naj se za ohranitev deklariranega stila za vsako ceno ujema z barvo. Uporabljali bi ga za klicanje stilov, ki so za element "pomembni" ali "pomembni".

Upoštevajte, da privzeta uporaba, economyali je lastnost poklicana ali ne, kaže, da color-adjustje zasnovan tako, da brskalnikom daje signal, ki prikazuje sloge, ki so dovolj pomembni za ohranitev.

Stanje specifikacije

color-adjustNepremičnina se določi v CSS Color Modul ravni 4, ki je v prvem osnutku statusom javnega delovnem času tega pisanja. To pomeni, da ga W3C še ni potrdil in bi ga lahko pozneje posodobil, spremenil ali celo opustil. Ta lastnost kot taka ni pripravljena za proizvodnjo in velja za eksperimentalno.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
19 * 48 Ne 79 * 6 *

Mobilni / tablični računalnik

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

Več informacij

  • CSS Barvni modul 4. stopnja Prvi javni delovni osnutek
  • Statistika uporabe programa Microsoft Edge
  • Dokumentacija MDN
  • Možnosti lastnosti barvnega prilagajanja