イナヅマTVログ

iOS 7 mobile SafariのURLバー背景色を設定するCSS

| 1件のコメント

不思議な iOS 7 mobile Safari。
URLバー(URL text field)背景に色を設定できる様子。

元ネタ
Safari on iOS 7 and HTML5: problems, changes and new APIs: TOOLBARS’ TINT

以前の投稿「iOS 7, mobile SafariのURLバーは消せない」で紹介させて頂いたサイトの記事です。

background-color: red;
background-image: linear-gradient(to bottom, green 0%, green 100%);

background-color が URLバー(URL text field)背景色。
background-image が背景色です。
始まりと終わりが同色の inear-gradient 設定をするんですねー。

背景画像は URLバー(URL text field) の下にまで回り込まないことを使ったテクニックらしいです。
それとiOS 7からアプリ画面が Status bar 下まで使えることとの兼ね合いなのでしょう。
背景画像が URLバー(URL text field) の下にあると見にくいからかなー。
色はOKで画像がダメな理由はわかんないけど…

背景色と言っても元々のURLバー(URL text field)色と合成されて表示されます。
ios7_safari_with_bg_color

背景色設定前はこんな感じです。
ios7_safari_url

色が薄いところ: #f8f8f8
色が濃いところ: #e6e6e8

この箇所がもともとアルファ値を持っているのかは不明なのですが、背景に色を設定すると設定値の値のままでは表示されません。
上側の色とアルファ合成されてるのではと思い調べてみました。

色が薄いところ: opacity: 0.9
色が濃いところ: opacity: 0.83*

* 色が濃いところは 0.83 の透明度を設定しても若干色味が違います。
0.83 ~ 0.84 の間のどこかかとと思うのですがジャストのところを見つけられませんでした。
単純なアルファ合成では無いのかもです。

何の役にも立ちそうにない知識をひとつ増やしましたとさ。
気になったら調べ隊活動報告でした。