Skip to main content

Safari w wersji 15 obsługuje theme-colortag zarówno w systemie macOS, jak i iOS. To ekscytująca wiadomość, ponieważ teraz pierwsza przeglądarka komputerowa obsługuje ten tag, a także obsługuje media atrybut i funkcję prefers-color-scheme multimediów.

Jak to działa?

Krótki kod który umożliwi wam dostosować nagłówek wyszukiwarki do Twojej strony internetowej.

<meta name="theme-color" content="#ff006e">


Wykonałem kilka testów we wrześniu po wydaniu Safari 15, działa na w Chrome, Brave i Samsung Internet na Androidzie, w Chrome, a teraz także w Safari.

Wszystkie obsługiwane przeglądarki obsługują również hsl()i rgb(). To jest niesamowite, ponieważ pozwala nam robić całkiem fajne rzeczy za pomocą JavaScript.

Nowe funkcje kolorów

Safari 15 jest pierwszą przeglądarką obsługującą lab(), lch() oraz hwb() funkcji koloru. Te funkcje działają, jeśli używasz ich w CSS, ale nie, jeśli używasz ich w theme-color meta tagu.

Wszystkie trzy deklaracje działają w Safari 15:

body { background-color: hwb(27 10% 28%);
background-color: lch(67.5345% 42.5 258.2);
background-color: lab(62.2345% -34.9638 47.7721); }

Jeśli użyjesz którejkolwiek z nowych funkcji koloru w theme-color meta tagu, Safari nie zinterpretuje ich i powróci do własnego algorytmu wybierania koloru. Prawdopodobnie Safari używa koloru tła dla theme-color, co oznacza, że ​​możesz uzyskać oczekiwany wynik bez zdefiniowania.

<meta name="theme-color" content="lab(29.2345% 39.3825 20.0664)">

Safari udowadnia, że theme-color działa świetnie również w przeglądarkach komputerowych. Jestem pewien, że projektanci i programiści znajdą wiele kreatywnych sposobów wykorzystania tego metatagu, zwłaszcza biorąc pod uwagę, że wartość można zmienić za pomocą JavaScript.

5/5 - (1 vote)
Mateusz Mieszalski

Mateusz Mieszalski

Pracuję jako dyrektor ds. e-marketingu: prowadzę szkolenia z reklamy na Facebooku, Google, komunikacji w social media. Mam również własną agencję interaktywną Codeasy. Wraz z zespołem planuję i realizuję kampanie, które sprzedają.