🧭

Safari 15 のbeta版が使えるようになっていたので新機能を試した

2021/06/25に公開

※ 初期の beta 版の情報です。製品版が出た時には仕様が変わっている可能性があります。

こんにちは Safari 15 で色々な点で変更されました。今回はその Safari 15 の Beta 版が使えるようになったのでいくつか試してみようと思います。

Beta 版のインストールはこちらから、対応 OS は Big Sur と Monterey です

試しに Apple.com を開いてみるとこんな感じ

<meta name="theme-color" content="#ecd96f" />

でカラーコードの部分を変えるとメニューバーの色が変わるようなので

このようなカラーパレットのように theme-color と body の background-color を変えるサイト作ってみました。下のは作ったサイトです

ライトモードではモードではほぼすべての色に変わるようなんですが、ダークモードだと,下の画像のようにメニューバーを #fefefe などの明るい色になるようにしたときに、メニューバーが黒くなるようです。

次に iOS Safari です、下の画像のように何も対策をせず下側のナビゲーションバーを入れてしまうと、スクロールしたときにナビゲーションバーに隠れて押せなくなってしまいます。

ですが padding-buttom バーにこのような style と適用することによって下の画像のように Safari のナビゲーションバーの大きさが変わると自動で追従するようになります。

.hoge {
  padding-botto: env(safe-area-inset-bottom);
}

下のはそのソースコードです。

実機に iOS15 を入れるか https://developer.apple.com/download/ から Xcode のベータ版をインストールして iOS 15 の Simulator を起動して試してみてください。

変な独自機能実装するな 😡😡😡😡😡