Safari nam od objave iOS 7 naprej na napravah Phone, iPad in iPod touch omogoča, da barva strani obarva delno prosojen okvir brskalnika. Logika barvanja je enostavna, pri nalaganju strani Safari preveri barvo ozadja strani in temu primerno priredi barvo okna. Trenutno ne obstaja nobena rešitev, ki bi nam to barvanje omogočala programsko ali s pomočjo značke. S pomočjo manjšega CSS trika pa lahko dosežemo poljubno barvanje okna.

Barvanje oz. brendiranje okvirja brskalnika na drugih napravah smo si že ogledali v članku “Spreminjanje barve okvirja brskalnika na mobilnih napravah”, kjer omenjene efekte dosežemo programsko oz. z uporabo meta značk. Tokrat pa se bomo posvetili le iOS napravam, kjer namesto programskih tehnik ali meta značk uporabimo CSS trik. Vse kar potrebujemo je dvojno definiranja ozadja oz. v primerih, kjer že samo oblikovanje strani v ozadju uporablja želeno barvo to ni potrebno in uporabimo le to.

CSS za barvanje okvirja Safari okna

body {
/* Barvanje Safari okna na iOS napravah */
background-color: blue;
/* Za dejansko ozadje strani (ta del ni nujno potreben, odvisno od oblikovanja) */
background-image: linear-gradient(to bottom, red 0%, red 100%);
}

Zgornja slika prikazuje primer, kjer je celotno ozadje strani rdečo, zato je tudi okno Safarija obarvano v rdečo bravo. Z uporabo naše CSS kode, pa nam je uspelo barvo Safarija spremeniti v odtenek modre barve. Zaradi uporabe “linear-gradient-ta” pred implementacijo zgornje kode preverite podporo v brskalnikih za vaš projekt. http://caniuse.com/#search=linear-gradient