Коригиране на цвета - CSS-трикове

Anonim

В color-adjustимота е описан от спецификациите за "запазване на цветове в различни способности-устройства." Знаете ли как има телефони, таблети и други устройства без екрани с качество на ретината? Е, това свойство предоставя на браузъра подсказка за вземане на решения за това как да борави с цветовете въз основа на това качество.

Може би си мислите нещо в духа на „Чакай, не е ли червено само червено?“ И да, това е абсолютно вярно. Какъв е смисълът да оптимизирате или коригирате цвят, който е верен, независимо къде се показва?

Въпросът е, че браузърите вече са склонни да правят тези определения и да регулират цветовете сами, като извеждат малко по-различно червено, ако потребителският агент не е в състояние да изобрази конкретен шестнадесетичен, поради качеството на екрана на някакъв друг фактор. Свойството ефективно казва на браузъра: „Хей, бих искал да използвате този цвят, но е страхотно, ако не можете и искате да приложите най-добрата си алтернатива за ситуацията.“ Или, обратно, може да инструктира браузъра да съвпада точно с цвета на всяка цена.

Печатни стилове

Интересно е, че спецификацията използва примера за отпечатване на уеб страници през цялото определение на color-adjust. Няма обаче действителна документация, че е предназначена за печат. Това не попречи на Chrome и Safari да внедрят предварително зададена версия с име webkit-print-color-adjust, което е силна индикация, че е предназначена за печат.

Защо това има значение? Спецификацията описва случай на употреба, при който поддържането на зебра на стилизирана таблица на отпечатана страница може да помогне за четливост:

Например уебсайт за картографиране, предлагащ отпечатани упътвания, може да „зебрира“ стъпките в упътванията, редувайки се между бял и светлосив фон. Загубата на тази зебра и чисто бял фон би направила упътванията по-трудни за четене с бърз поглед, когато се разсейвате в кола.

Разликата между декларираните и отпечатаните стилове, когато color-adjustе зададена на economy.

Синтаксис

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

Стойности

  • economy(начална стойност): Тази стойност позволява на браузъра да прави корекции в цвета и стила на елемент, когато той реши, че трябва, независимо дали е за подобряване на четливостта, замяна на цвят, който дадено устройство не може да покаже, или някакъв друг фактор. Имайте предвид, че това е стойността по подразбиране и, дори ако свойството не е приложено, по този начин ще се държат браузърите.
  • exact: Тази стойност инструктира браузъра да съвпада с цвят на всяка цена, за да запази декларирания стил. Ще се използва за извикване на стилове, които са „важни“ или „значими“ за елемента.

Обърнете внимание, че използването по подразбиране economyдали свойството се извиква или не предполага, че color-adjustе проектирано да предостави сигнал на браузърите, посочвайки стилове, които са достатъчно важни за запазване.

Състояние на спецификацията

В color-adjustимота се определя в CSS Цвят Модул ниво 4, което е в първия проект на обществената работа по време на това писание. Това означава, че тепърва ще бъде одобрен от W3C и може да бъде актуализиран, променен или дори отпаднал при по-късни ревизии. Като такова това свойство не е готово за производство и се счита за експериментално.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
19 * 48 Не 79 * 6 *

Мобилен / таблет

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

Повече информация

  • CSS Цветен модул Ниво 4 Първа обществена работна чернова
  • Статистика за използването на Microsoft Edge
  • Документация за MDN
  • Възможностите на свойството за настройка на цветовете