次世代のウェブスタイル設定

最新の CSS の優れた機能の一部をご紹介します。

Adam Argyle
Una Kravets

現在、CSS ではたくさんの興味深いことが起こっています。 その多くが今日のブラウザですでにサポートされています。 CDS 2019 での講演の様子は では、注目すべき新機能や今後の機能を取り上げています。

この投稿では、現在使用できる機能に焦点を当てています。 ご視聴ありがとうございました をご覧ください。 また、 CSS@CDS ページをご覧ください。

目次

スクロールスナップ

スクロール スナップを使用すると、ユーザーがコンテンツを垂直、水平、またはその両方にスクロールしたときのスナップ ポイントを定義できます。スクロールの慣性と減速機能が組み込まれており、タップ操作に対応しています。

次のサンプルコードは、スナップ ポイントを <picture> 子要素の左側に揃えて <section> 要素に水平スクロールを設定します。

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

仕組みは次のとおりです。

  • 親 <section> 要素で、次のようにします。 <ph type="x-smartling-placeholder">
      </ph>
    • 水平スクロールを可能にするため、overflow-x は auto に設定されています。
    • overscroll-behavior-x を contain に設定して、ユーザーが <section> 要素のスクロール領域の境界に達したときに親要素がスクロールされないようにします。（これは、スナップでは厳密には必要ありませんが、使用するのが一般的です）。
    • 水平方向のスナップの場合、scroll-snap-type を x に設定し、ビューポートが常に最も近いスナップ ポイントにスナップされるように mandatory に設定します。
  • <picture> 子要素では、scroll-snap-align が start に設定されています。これにより、各画像の左側にスナップ ポイントが設定されます（direction が ltr に設定されている場合）。

こちらはライブデモです。

<ph type="x-smartling-placeholder">

また、縦方向のスクロール スナップとマトリックス スクロール スナップのデモもご覧いただけます。

:focus-within

:focus-within は、以前から存在していたユーザー補助の問題に対処します。支援技術のユーザーが UI にアクセスできるように、子要素のフォーカスが親要素の表示に影響を与えるケースが多数あります。

たとえば、複数のアイテムを含むプルダウン メニューがある場合は、いずれかのアイテムがフォーカスされている間、メニューを表示したままにします。そうしないと、キーボード ユーザーに対してメニューは表示されません。

:focus-within は、指定された要素の子要素にフォーカスがあるときにスタイルを適用するようブラウザに指示します。メニューの例に戻ると、メニュー要素で :focus-within を設定することで、メニュー項目にフォーカスがあっても表示状態を維持できます。

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

フォーカスと内部フォーカスの動作の違いを示すイラスト。

以下のデモで、フォーカス可能な要素をタブで確認してみてください。メニュー項目にフォーカスを移しても、メニューは表示されたままになります。

<ph type="x-smartling-placeholder">

メディアクエリ レベル 5

新しいメディアクエリは、ユーザーのデバイス設定に基づいてアプリのユーザー エクスペリエンスを調整する強力な方法を提供します。基本的に、ブラウザはシステムレベル設定のプロキシとして機能し、CSS でメディアクエリの prefers-* グループを使用して応答できます。

システムレベルのユーザー設定を解釈するメディアクエリを示す図。

ここでは、デベロッパーの皆様が最も興味を持つと思われる新しいクエリをご紹介します。

こうしたクエリはアクセシビリティにとって大きな利点となります。これまでは、ユーザーが OS を高コントラスト モードに設定した場合などは、知る手段がありませんでした。ブランドに忠実なウェブアプリに高コントラスト モードを提供したい場合は、ユーザーにアプリ内の UI で選択してもらう必要がありました。これで、prefers-contrast を使用して OS から高コントラスト設定を検出できるようになりました。

このようなメディアクエリの重要な意味として、システム レベルのユーザー設定の複数の組み合わせを設計し、幅広いユーザー設定とアクセシビリティ ニーズに対応できます。薄暗い環境でも高コントラストのダークモードを使用できます。

Adam にとって重要なのは、「動きの少ない動作を好む」ことです。「モーションなし」として実装されませんユーザーは、アニメーションが不要ではなく、動きの少ない方が好ましいと話しています。彼は、縮小運動は運動ではないと主張しています。次に、ユーザーが動きの軽減を望んでいる場合にクロスフェード アニメーションを使用する例を示します。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">

論理プロパティ

論理的プロパティは、国際化に取り組むデベロッパーが増えるにつれ注目されてきた問題を解決します。margin や padding など、多くのレイアウト プロパティは、上から下、左から右に読む言語を想定しています。

従来の CSS レイアウト プロパティを示す図。

さまざまな書き込みモードの複数の言語のページを設計する場合、デベロッパーは、複数の要素にわたってすべてのプロパティを個別に調整する必要がありました。これはすぐに、保守性の悪夢になります。

論理プロパティを使用すると、翻訳モードと書き込みモード間でレイアウトの整合性を維持できます。空間配置ではなく、コンテンツのセマンティックな順序に基づいて動的に更新されます。論理プロパティでは、各要素に次の 2 つのディメンションがあります。

  • ブロックのディメンションは、行内のテキストの流れに対して垂直です。（英語では、block-size は height と同じです）。
  • 「インライン」ディメンションは、行内のテキストの流れと「平行」なディメンションです。（英語では、inline-size は width と同じです）。

これらのディメンション名は、すべての論理レイアウト プロパティに適用されます。そのため、たとえば英語では、block-start は top と同等で、inline-end は right と同じです。

CSS の新しい論理レイアウト プロパティを示す図。

論理プロパティを使用すると、個々の要素の多数のレイアウト プロパティを更新するのではなく、ページの writing-mode プロパティと direction プロパティを変更するだけで、他の言語用にレイアウトを自動的に更新できます。

以下のデモでは、<body> 要素の writing-mode プロパティに異なる値を設定して、論理プロパティがどのように機能するかを確認できます。

<ph type="x-smartling-placeholder">

position: sticky

position: sticky の付いた要素は、画面外に出始めるまでブロックフローに残ります。 その時点でページの他の部分でのスクロールが停止します 要素の top 値で指定された位置に固定されます。 その要素に割り当てられたスペースはフロー内に残ります。 ユーザーが上にスクロールすると要素が戻ります。

固定配置を使用すると、これまで JavaScript で必要だったさまざまなエフェクトを作成できます。その可能性を示すために、いくつかのデモを作成しました。各デモではほぼ同じ CSS を使用し、HTML マークアップをわずかに調整して各エフェクトを作成するだけです。

固定スタック

このデモでは、すべてのスティッキー要素が同じコンテナを共有しています。つまり、ユーザーが下にスクロールすると、それぞれの固定要素が前の要素の上へとスライドします。スティッキー要素は同じ固定位置を共有します。

固定スライド

ここで、スティッキー要素はいとこです。（つまり、両親は兄弟姉妹です）。スティッキー要素がコンテナの下限に達すると、コンテナとともに上に移動します。これは、スティッキー要素がコンテナの下側に来ると、それよりも上のスティッキー要素が押し上げられているような印象を与えます。言い換えれば、停滞している位置をめぐって争っているように見えます。

スティッキー デスペラード

固定スライドと同様に、このデモの固定要素は従順です。ただし、2 列のグリッド レイアウトに設定されたコンテナに配置されています。

backdrop-filter

backdrop-filter プロパティを使用すると、要素自体ではなく、要素の背後の領域にグラフィック効果を適用できます。これにより、以前は複雑な CSS や JavaScript のハッキングでしか実現できなかった多くの優れた効果を、1 行の CSS で実現できました。

たとえば、このデモでは backdrop-filter を使用して OS スタイルのぼかし処理を実現しています。

<ph type="x-smartling-placeholder">

すでに backdrop-filter に関する投稿がありますので、そちらをご確認ください。

:is()

:is() 疑似クラスは実際には 10 年以上前のものですが、まだ十分な使用が認められていません。セレクタのカンマ区切りリストを引数として受け取り、そのリスト内のすべてのセレクタに一致します。この柔軟性は非常に便利で、配布する CSS の数を大幅に削減できます。

簡単な例:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

CSS グリッド レイアウトでは、以前から gap（以前の grid-gap）が使用されていました。gap を使用すると、レイアウトに関する多くの一般的な問題が、子要素の周囲ではなく、含まれる要素の内部間隔で解決されます。たとえば、ギャップを使用すると、子要素の余白によって親要素の端に不要な空白が生じる心配がなくなります。

ギャップ プロパティによってコンテナ要素の端の周囲に意図しないスペースが配置されなくなる仕組みを示すイラスト。

さらにうれしいお知らせ: gap が Flexbox に導入され、グリッドと同様のスペース特典をすべて利用できるようになります。

  • スペースの宣言は多数ではなく 1 つだけにしてください。
  • どの子要素が間隔を所有するかについて、プロジェクトで規則を確立する必要はありません。代わりに、要素を含む要素が間隔を所有します。
  • このコードは、ロボトムフクロウのような古い戦略よりも理解しやすいです。

次の動画では、グリッド レイアウトと Flex レイアウトの 2 つの要素に単一の gap プロパティを使用するメリットを示しています。

現時点では、Flex レイアウトで gap をサポートしているのは FireFox のみですが、このデモで動作を確認してみましょう。

<ph type="x-smartling-placeholder">

CSS Houdini

Houdini は、ブラウザのレンダリング エンジン用の低レベル API セットで、カスタム CSS の解釈方法をブラウザに指示できます。つまり、この API を使用すると CSS オブジェクト モデルにアクセスし、JavaScript で CSS を拡張できます。これには、さまざまなメリットがあります。

  • これにより、カスタム CSS 機能をより効率的に作成できます。
  • レンダリングに関する問題をアプリケーション ロジックから分離する方が簡単です。
  • これは、ブラウザがスクリプトを解析して 2 回目のレンダリング サイクルを実行する必要がなくなるため、現在 JavaScript で行っている CSS ポリフィルよりも高性能です。Houdini コードは、最初のレンダリング サイクルで解析されます。

従来の JavaScript ポリフィルと比較した Houdini の仕組みを示すイラスト。

Houdini は、複数の API の総称です。ステータスや現在のステータスの詳細については、Is Houdini Ready Yet? をご覧ください。今回の講演では、Properties and Values API、Paint API、アニメーション ワークレットについて説明しました。これらは現在最もサポートされているからです。これらの優れた API のそれぞれについて、簡単に完全な投稿を投稿できますが、当面は、この講演で概要と、API で何ができるかがわかる魅力的なデモをご覧ください。

オーバーフロー

今後、いくつかご紹介したいことが残っていたため、詳しく説明する時間がありませんでした⚡ 1 つの機能のうち、まだ聞いたことがない方は、この講演の最後の部分をご覧ください。

  • size: 高さと幅を同時に設定できるプロパティ
  • aspect-ratio: 本質的にはアスペクト比を持たない要素のアスペクト比を設定するプロパティ
  • min()、max()、clamp(): 幅と高さだけでなく、任意の CSS プロパティに数値制約を設定できる関数
  • list-style-type: 既存のプロパティですが、まもなく絵文字や SVG を含む幅広い値に対応する予定です
  • display: outer inner: display プロパティはまもなく 2 つのパラメータを受け入れるようになります。これにより、inline-flex などの複合キーワードを使用するのではなく、外部レイアウトと内部レイアウトを明示的に指定できます。
  • CSS 領域: 長方形以外の、コンテンツが出入りする特定の領域を塗りつぶすことができます
  • CSS モジュール: JavaScript で CSS モジュールをリクエストして、簡単に操作できるリッチ オブジェクトを取得できるようになります。