color-adjustWłaściwość jest opisany w specyfikacji jako „konserwujące kolorów w urządzeniach różnej zdolności”. Wiesz, jakie są telefony, tablety i inne urządzenia bez ekranów o jakości siatkówki? Cóż, ta właściwość daje przeglądarce podpowiedź do podejmowania decyzji dotyczących obsługi kolorów w oparciu o tę jakość.
Możesz pomyśleć coś w rodzaju: „Czekaj, czy czerwony nie jest tylko czerwony?” I tak, to absolutna prawda. Jaki jest sens optymalizacji lub dostosowywania koloru, który jest prawdziwy bez względu na to, gdzie jest wyświetlany?
Chodzi o to, że przeglądarki już mają tendencję do samodzielnego określania i dostosowywania kolorów, na przykład wyświetlając nieco inną czerwień, jeśli program użytkownika nie jest w stanie wyrenderować określonego hexa z powodu jakości ekranu innego czynnika. Właściwość skutecznie mówi do przeglądarki: „Hej, chciałbym, żebyś użył tego koloru, ale fajnie, jeśli nie możesz i chcesz zastosować najlepszą alternatywę dla danej sytuacji”. Lub odwrotnie, może nakazać przeglądarce dokładne dopasowanie koloru za wszelką cenę.
Style drukowane
Co ciekawe, specyfikacja używa przykładu drukowania stron internetowych w całej definicji color-adjust. Jednak nie ma faktycznej dokumentacji, która jest przeznaczona do drukowania. Nie powstrzymało to Chrome i Safari przed wdrożeniem wersji o nazwie z prefiksem webkit-print-color-adjust, co jest mocną wskazówką, że jest przeznaczona do celów drukowania.
Dlaczego to ma znaczenie? Specyfikacja opisuje przypadek użycia, w którym zachowanie pasków zebry stylizowanej tabeli na wydrukowanej stronie może pomóc w czytelności:
Na przykład witryna z mapami oferująca drukowane wskazówki może „pasować zebry” kroki w kierunkach, na przemian z białym i jasnoszarym tłem. Utrata pasków zebry i czysto białe tło utrudniłoby odczytywanie wskazówek przy szybkim spojrzeniu, gdy ktoś rozprasza się w samochodzie.
color-adjustjest ustawiona na economy.
Składnia
.my-element ( color-adjust: (economy | exact); )Wartości
economy(wartość początkowa): Ta wartość umożliwia przeglądarce dostosowanie koloru i stylu elementu tam, gdzie uzna to za konieczne, czy to w celu poprawienia czytelności, zastąpienia koloru, którego urządzenie nie jest w stanie wyświetlić, czy też innego czynnika. Zauważ, że jest to wartość domyślna i nawet jeśli właściwość nie zostanie zastosowana, tak będą się zachowywać przeglądarki.exact: Ta wartość nakazuje przeglądarce dopasowanie koloru za wszelką cenę w celu zachowania zadeklarowanego stylu. Byłoby używane do przywoływania stylów, które są „ważne” lub „znaczące” dla elementu.
Zwróć uwagę, że domyślne użycie tego, economyczy właściwość jest wywoływana, czy nie, sugeruje, że color-adjustma ona na celu dostarczenie przeglądarkom sygnału wskazującego style, które są wystarczająco ważne, aby je zachować.
Stan specyfikacji
color-adjustNieruchomość jest zdefiniowane w CSS modułu Kolor Level 4, który jest w pierwszym projekcie statusu roboczego publicznej w momencie pisania tego tekstu. Oznacza to, że nie został jeszcze zatwierdzony przez W3C i może zostać zaktualizowany, zmieniony lub nawet usunięty w późniejszych wersjach. W związku z tym ta właściwość nie jest gotowa do produkcji i jest uważana za eksperymentalną.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 19 * | 48 | Nie | 79 * | 6 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Więcej informacji
- Moduł kolorów CSS Poziom 4 Pierwszy publiczny projekt roboczy
- Statystyki użytkowania Microsoft Edge
- Dokumentacja MDN
- Możliwości właściwości dopasowania koloru