Pielāgot krāsu - CSS-triki

Anonim

color-adjustĪpašums apraksta spec kā "saglabājot krāsas dažāda spēju ierīcēm." Jūs zināt, kā tur ir tālruņi, planšetdatori un citas ierīces bez tīklenes kvalitātes ekrāniem? Šis īpašums nodrošina pārlūkam mājienu pieņemt lēmumus par krāsu apstrādi, pamatojoties uz šo kvalitāti.

Iespējams, jūs kaut ko domājat šādi: "Pagaidiet, vai sarkans nav tikai sarkans?" Jā, tā ir absolūti taisnība. Kāda jēga optimizēt vai pielāgot patiesu krāsu neatkarīgi no tā, kur tā tiek parādīta?

Lieta ir tāda, ka pārlūkprogrammas jau mēdz veikt šīs noteikšanas un pielāgot krāsas pašas, piemēram, izdalot nedaudz atšķirīgu sarkanu krāsu, ja lietotāja aģents kāda cita faktora ekrāna kvalitātes dēļ nespēj atveidot noteiktu sešstūru. Īpašums pārlūkprogrammai efektīvi saka: “Hei, es gribētu, lai jūs izmantotu šo krāsu, bet tas ir forši, ja nevarat un vēlaties situācijai piemērot savu labāko alternatīvu.” Vai arī, gluži pretēji, tas var uzdot pārlūkprogrammai precīzi saskaņot krāsu par katru cenu.

Iespiesti stili

Interesanti, ka specifikācijā visā tīmekļa vietnes definīcijā tiek izmantots tīmekļa lapu drukāšanas piemērs color-adjust. Tomēr nav faktiskas dokumentācijas, ka tā ir paredzēta drukāšanai. Tas nav traucējis pārlūkiem Chrome un Safari ieviest prefiksu ar nosaukumu webkit-print-color-adjust, kas ir spēcīga norāde, ka tā ir paredzēta drukāšanas vajadzībām.

Kāpēc tas ir svarīgi? Specifikācijā aprakstīts lietošanas gadījums, kad stilētas tabulas zebras svītru saglabāšana uz izdrukātas lapas varētu palīdzēt salasāmību:

Piemēram, kartēšanas vietne, kurā tiek piedāvāti drukāti norādījumi, var “zebrēt ar svītru” soļus virzienos, mainot baltu un gaiši pelēku fonu. Zaudējot šo zebra svītru un iegūstot tīri baltu fonu, automašīnas uzmanību novēršot, ar ātru skatienu būtu grūtāk lasīt norādes.

Atšķirība starp deklarētajiem un drukātajiem stiliem, kad color-adjustir iestatīta uz economy.

Sintakse

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

Vērtības

  • economy(sākotnējā vērtība): šī vērtība ļauj pārlūkprogrammai pielāgot elementa krāsu un stilu, ja tā nolemj, ka tas ir nepieciešams, lai uzlabotu salasāmību, nomainītu krāsu, kuru ierīce nespēj parādīt, vai kādu citu faktoru. Ņemiet vērā, ka šī ir noklusējuma vērtība, un, pat ja īpašums netiek lietots, pārlūkprogrammas rīkosies šādi.
  • exact: Šī vērtība liek pārlūkam par katru cenu saskaņot krāsu, lai saglabātu deklarēto stilu. To izmantotu, lai izsauktu stilus, kas ir elementam “svarīgi” vai “nozīmīgi”.

Ņemiet vērā, ka pēc noklusējuma economyrekvizīta izsaukums norāda, ka tas color-adjustir paredzēts, lai pārlūkprogrammām nodrošinātu signālu, norādot stilus, kas ir pietiekami svarīgi, lai tos saglabātu.

Specifikācijas statuss

color-adjustĪpašums ir definēts CSS Color modulis Level 4, kas atrodas pirmajā sabiedriskā darba projekta statusa laikā šī rakstiski. Tas nozīmē, ka tas vēl jāapstiprina W3C un to var atjaunināt, mainīt vai pat nomest vēlākos labojumos. Šis īpašums kā tāds nav gatavs ražošanai un tiek uzskatīts par eksperimentālu.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
19 * 48 79 * 6 *

Mobilais / planšetdators

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

Vairāk informācijas

  • CSS krāsu moduļa 4. līmeņa pirmais publiskais darba projekts
  • Microsoft Edge lietošanas statistika
  • MDN dokumentācija
  • Krāsu pielāgošanas rekvizīta iespējas