Värvi reguleerimine - CSS-trikid

Anonim

Seda color-adjustomadust kirjeldatakse spetsifikatsioonina kui „värvide säilitamine erineva võimekusega seadmetes“. Teate, kuidas on võrkkesta kvaliteediga ekraanideta telefonid, tahvelarvutid ja muud seadmed? Noh, see omadus annab brauserile vihje, et teha otsuseid selle kohta, kuidas värve käsitleda selle kvaliteedi põhjal.

Võib-olla mõtlete midagi umbes järgmiselt: "Oota, kas punane pole lihtsalt punane?" Ja jah, see on täiesti tõsi. Mis mõtet on tõelise värvi optimeerimine või kohandamine olenemata sellest, kus seda kuvatakse?

Asi on selles, et brauserid kipuvad juba neid määratlusi tegema ja värve ise reguleerima, näiteks väljastavad veidi teistsuguse punase värvi, kui kasutajaagent ei ole mõne muu teguri ekraanikvaliteedi tõttu võimeline konkreetset kuusnurka renderdama. Kinnisvara ütleb brauserile tõhusalt: "Kuule, ma tahaksin, et te seda värvi kasutaksite, kuid see on lahe, kui te ei saa ja soovite olukorrale oma parimat alternatiivi rakendada." Või vastupidi, see võib juhtida brauserit iga hinna ja värviga täpselt sobima.

Trükitud stiilid

Huvitav on see, et spetsifikatsioon kasutab veebisaidi printimise näidet kogu selle definitsioonis color-adjust. Puudub aga tegelik dokumentatsioon, mis oleks mõeldud printimiseks. See ei ole takistanud Chrome'i ja Safarit rakendamast eesliidetud versiooni nimega webkit-print-color-adjust, mis näitab kindlalt, et see on mõeldud printimiseks.

Miks see oluline on? Spetsifikatsioonis kirjeldatakse kasutamisjuhtu, kus stiili tabeli sebrariba säilitamine prinditud lehel võib aidata loetavust:

Näiteks võib prinditud juhiseid pakkuv kaardistamise veebisait „sebra triibutada” sammud suundades, vaheldumisi valge ja helehalli taustaga. Selle sebra-triibu kaotamine ja puhtavalge taustaga muutuksid suunad autos hajutatuna kiire pilguga raskemini loetavaks.

Deklareeritud ja prinditud stiilide erinevus, kui see color-adjuston seatud väärtusele economy.

Süntaks

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

Väärtused

  • economy(algväärtus): see väärtus võimaldab brauseril korrigeerida elemendi värvi ja stiili, kui ta otsustab, kas selleks on vaja loetavuse parandamist, värvi asendamist, mida seade ei suuda kuvada, või mõnda muud tegurit. Pange tähele, et see on vaikeväärtus ja brauserid käituvad ka siis, kui atribuuti ei rakendata.
  • exact: See väärtus juhendab brauserit deklareeritud stiili säilitamise huvides iga hinna eest värvi sobitama. Seda kasutatakse elemendi jaoks "oluliste" või "oluliste" stiilide väljatoomiseks.

Pange tähele, et economyatribuudi helistamise vaikekasutus viitab sellele, et see color-adjuston mõeldud brauseritele signaali andmiseks, mis näitavad stiilid, mis on säilitamiseks piisavalt olulised.

Spetsifikatsiooni olek

color-adjustVara on määratletud CSS Värv Module Level 4, mis on esimene avalik tööversiooni staatuse ajal seda kirjalikult. See tähendab, et W3C peab seda veel kinnitama ja seda saab hilisemates versioonides uuendada, muuta või isegi ära jätta. Sellisena pole see vara tootmiseks valmis ja seda peetakse eksperimentaalseks.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

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

Mobiil / tahvelarvuti

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

Rohkem informatsiooni

  • CSS-i värvimooduli 4. taseme esimene avalik töökavand
  • Microsoft Edge'i kasutusstatistika
  • MDN dokumentatsioon
  • Värvi kohandamise omaduste võimalused