Upravit barvu - Triky CSS

Anonim

color-adjustVlastnost je popsána spec jako „Zachování barvy v zařízeních různě schopností.“ Víte, jak jsou tam telefony, tablety a další zařízení bez obrazovek v kvalitě sítnice? Tato vlastnost poskytuje prohlížeči nápovědu k rozhodování o tom, jak zacházet s barvami na základě této kvality.

Možná si myslíte něco v duchu: „Počkejte, není červená jen červená?“ A ano, to je naprosto pravda. Jaký má smysl optimalizovat nebo upravit barvu, která je pravdivá bez ohledu na to, kde je zobrazena?

Jde o to, že prohlížeče již mají tendenci provádět tato stanovení a upravovat barvy samostatně, jako je výstup mírně odlišné červené barvy, pokud uživatelský agent není schopen vykreslit konkrétní hex kvůli kvalitě obrazovky nějakého jiného faktoru. Vlastnost v podstatě říká prohlížeči: „Hej, chtěl bych, abys použil tuto barvu, ale je skvělé, pokud nemůžeš a chceš použít tu nejlepší alternativu pro danou situaci.“ Nebo naopak může prohlížeč nařídit, aby za každou cenu přesně odpovídal barvě.

Tištěné styly

Je zajímavé, že specifikace používá příklad tisku webových stránek v celé definici color-adjust. Neexistuje však žádná skutečná dokumentace, která je určena k tisku. To nezabránilo prohlížečům Chrome a Safari v implementaci předponové verze s názvem webkit-print-color-adjust, což silně naznačuje, že je určena pro tiskové účely.

Proč na tom záleží? Specifikace popisuje případ použití, kde zachování čitelnosti zebřeného stylu tabulky na vytištěné stránce může pomoci čitelnosti:

Například webová stránka s mapami nabízející tištěné pokyny by mohla „zebra-stripe“ kroky v těchto směrech střídat bílé a světle šedé pozadí. Ztráta tohoto pruhu zebry a čistě bílé pozadí by způsobila, že při těžkém pozorování v autě by se pokyny při krátkém pohledu těžší čily.

Rozdíl mezi deklarovanými a tištěnými styly, když color-adjustje nastaven na economy.

Syntax

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

Hodnoty

  • economy(počáteční hodnota): Tato hodnota umožňuje prohlížeči provádět úpravy barev a stylů prvků tam, kde se rozhodne, že to potřebuje, ať už jde o zlepšení čitelnosti, nahrazení barvy, kterou zařízení není schopno zobrazit, nebo nějaký jiný faktor. Všimněte si, že se jedná o výchozí hodnotu, ai když se vlastnost nepoužije, tak se budou prohlížeče chovat.
  • exact: Tato hodnota dává prohlížeči pokyn, aby za každou cenu odpovídal barvě, aby byl zachován deklarovaný styl. Používá se k vyvolání stylů, které jsou pro prvek „důležité“ nebo „významné“.

Všimněte si, že výchozí použití toho, economyzda je vlastnost volána nebo ne, naznačuje, že color-adjustje navrženo tak, aby poskytovalo signál prohlížečům označujícím styly, které jsou dostatečně důležité k zachování.

Stav specifikace

Tato color-adjustvlastnost je definována v CSS Color Module Level 4, který je v době psaní tohoto dokumentu ve stavu prvního veřejného pracovního konceptu. To znamená, že jej W3C ještě nepotvrdí a v pozdějších revizích jej bude možné aktualizovat, změnit nebo dokonce zrušit. Tato vlastnost proto není připravená na produkci a je považována za experimentální.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
19 * 48 Ne 79 * 6 *

Mobilní / Tablet

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

Více informací

  • CSS Barevný modul úrovně 4, první veřejný pracovní koncept
  • Statistiky využití Microsoft Edge
  • Dokumentace MDN
  • Možnosti vlastnosti pro úpravu barev