Design for Safari 15

ハイライト

Safari 15 ではブラウザのインターフェイスが再設計されています。 macOS のタブバーとアドレスバーは 1 行に統合され、iOS のタブバーは一番下に移動します。ウェブサイトには以下からアクセスできますtheme-colorメタタグはCSSを使用してタブバーの色を制御しますaspect-ratio属性を使用するとレイアウトが簡素化されます。env(safe-area-inset-bottom)下部のタブバーに適応します。

主な内容

Safari 15 は、Safari のビジュアルデザインに対する最大のアップデートです。ブラウザのインターフェイスは、「Web の支配」から「Web に道を譲る」へと変化します。

macOS のタブバーは別の行を占めるのではなく、アドレスバーと統合されます。ブラウザインターフェイス全体が 1 行に圧縮され、Web コンテンツの縦方向のスペースが増えます。iOSのタブバーが画面下に移動し、片手で操作できるようになりました。

これらの変更は、Web デザイナーに直接的な影響を与えます。

タブバーの色を制御する

Safari 15 では、Web ページから色を抽出し、タブバーの背景に適用します。開発者はこの色をアクティブに制御できます。

<head>
    <!-- 基本のテーマカラー -->
    <meta name="theme-color" content="#0071e3">

    <!-- ダークモードへの対応 -->
    <meta name="theme-color"
          content="#0071e3"
          media="(prefers-color-scheme: light)">
    <meta name="theme-color"
          content="#000000"
          media="(prefers-color-scheme: dark)">
</head>

（02:50）

キーポイント:

theme-colorこれを HTML ヘッドに配置し、Safari ページが読み込まれたときにすぐに取得します。
media属性は HTML 仕様に新しく追加され、Safari 15 で初めてサポートされました。
メディア属性をサポートしていないブラウザでは、最初の属性が使用されます。theme-colorしたがって、フォールバックを最初に置きます
JavaScriptを使用して動的に変更することもできます

// テーマカラーを動的に切り替える
function enterTheaterMode() {
    document.querySelector('meta[name="theme-color"]')
        .setAttribute('content', '#000000');
}

function exitTheaterMode() {
    document.querySelector('meta[name="theme-color"]')
        .setAttribute('content', '#0071e3');
}

（11:05）

iOS の下部タブバーに適応する

iOS 15 のタブバーは画面の下部にあり、ユーザーがスクロールするとドメイン名のプロンプトまで縮小します。ページ下部の内容が見えにくくなる場合があります。

CSS 環境変数を使用して以下を処理します。

.footer {
    position: sticky;
    bottom: 0;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

（14:21）

キーポイント:

env(safe-area-inset-bottom)の値は、タブバーが展開/縮小されると動的に変化します。
Safari はページを自動的に並べ替えます
4 つの方向に対応する変数があります。top、right、bottom、left
で見つけることができますcalc()で使用される

viewport-fit=全画面エクスペリエンスをカバーします

iPhone が横向きの場合、Safari はデフォルトで Web コンテンツを安全な領域にインデントして、前髪や丸い角によって隠れないようにします。ウェブサイトのデザインがこれらの領域を考慮している場合は、次のようにすることができます。viewport-fit=coverコンテンツを端まで拡張させます。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

（16:03）

環境変数を使用して、テキストが読み取れるようにします。

.header-text {
    margin-left: env(safe-area-inset-left);
}

.paragraph {
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
}

＃＃詳細

CSS アスペクト比プロパティ

以前は、固定アスペクト比の div を維持するには、パディングハックまたは JavaScript が必要でした。Safari 15 はネイティブをサポートしますaspect-ratio：

/* 正方形 */
.card {
    aspect-ratio: 1 / 1;
}

/* 短縮記法 */
.card {
    aspect-ratio: 1;
}

/* 16:9 の動画 */
.video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* 黄金比 */
.banner {
    aspect-ratio: 1.618;
}

（24:38）

キーポイント:

コンテンツが多すぎる場合、オーバーフローを避けるためにボックスの高さがデフォルトで大きくなります。
比例関係を強制的に維持するには (オーバーフローを許可します)、次のように追加します。min-height: 0
協力できるoverflow: scrollオーバーフローコンテンツの処理
次のような 10 進数の書き込みをサポートします。aspect-ratio: 1.618

Flexbox gap

Safari 14.1 が Flexbox のサポートを開始gap財産：

.navbar {
    display: flex;
    gap: 1rem;
}

（29:22）

子要素に個別のマージンを設定したり、エッジ要素の余分なスペースを処理したりする必要はもうありません。

フォームコントロールの更新

iOS 15 では、ネイティブ UIKit に近づくようにフォームコントロールが再設計されています。

<!-- 日付ピッカー -->
<input type="date">

<!-- 時刻ピッカー -->
<input type="time">

<!-- カラーピッカー（スポイト付き） -->
<input type="color">

（30:38）

カラーピッカーには 3 つの新しいパネルとカラーピッカー (スポイト) があります。サイトがデフォルトのスタイルをオーバーライドする場合は、カスタムスタイルが通常どおり適用されます。

ページタイトルの最適化

新しいタブバーのスペースは限られており、ページタイトルの書き方がユーザーエクスペリエンスに影響します。

<!-- 悪い例：サイト名が先頭 -->
<title>My Company - Products - Detail</title>

<!-- 良い例：コンテンツのタイトルが先頭 -->
<title>Detail - Products - My Company</title>

（07:37）

ユーザーが同時に複数のタブを開いた場合、前のコンテンツのタイトルが区別しやすくなります。

ファビコンの提案

Retina スクリーンに適応する高解像度のアイコンを提供します
背景が透明なファビコンは、新しいタブバーでより適切に機能します
自動ツールによって生成された小切手theme-color、色がウェブサイトのデザインと一致していることを確認してください

重要ポイント

1. Web サイトの没入型ブランドエクスペリエンスをデザインします

theme-color を使用して Safari のタブバーを Web サイトのメインの色と一致させます。viewport-fit=cover でヘッダー画像を画面端まで表示します。入口 API: <meta name="theme-color"> + viewport-fit=cover。

2.レスポンシブな画像ギャラリーを構築する

aspect-ratio を使用して画像カードを均一な比率に保ち、CSS グリッドを使用してウォーターフォールフローまたはグリッドレイアウトを実装します。入口 API: aspect-ratio + display: grid。

3.モバイル端末の下部ナビゲーションを最適化

iOS の下部タブバー用に安全な領域を予約し、env(safe-area-inset-bottom) を使用してナビゲーションボタンが隠れないようにします。入口 API: padding-bottom: env(safe-area-inset-bottom)。

4.ビデオ Web サイトにシアターモードを実装

JavaScript を使用してクリック時にシアターモードを切り替え、theme-color を黒にしてタブバーを暗い背景になじませ、映画鑑賞の没入感を高めます。入口 API: document.querySelector('meta').setAttribute('content', ...)。

5.クロスプラットフォームで一貫したフォームを設計

Safari 15 の新しいフォームコントロールスタイルを使用してカスタムスタイルコードを削減します。日付、時刻、カラーピッカーは、iOS でネイティブエクスペリエンスを自動的に取得します。入口 API: <input type="date"> + <input type="color">。

Design for Safari 15

ハイライト

主な内容

タブバーの色を制御する

iOS の下部タブバーに適応する

viewport-fit=全画面エクスペリエンスをカバーします

CSS アスペクト比プロパティ

Flexbox gap

フォームコントロールの更新

ページタイトルの最適化

ファビコンの提案

重要ポイント

関連セッション

コメント

ハイライト

主な内容

タブバーの色を制御する

iOS の下部タブ バーに適応する

viewport-fit=全画面エクスペリエンスをカバーします

CSS アスペクト比プロパティ

Flexbox gap

フォーム コントロールの更新

ページタイトルの最適化

ファビコンの提案

重要ポイント

関連セッション

コメント

iOS の下部タブバーに適応する

フォームコントロールの更新