Googleさんが90を記念し、90年代スタイルで撮影した動画を公開しています。

Chrome90のリリースで知っておくべきこと

Pete LePageさんが書いた記事の中で、「Chrome90のリリースで知っておくべきこと」として、Googleが以下の５つを挙げていますが、4番目の情報はスルーします。(;^ω^)

ということで、上から３つ。

  • CSS overflowプロパティの新しい値
  • The Feature Policy APIからPermissions Policyに名前の変更
  • ShadowDMをHTMLで直接実装する方法

CSS overflowとShadowDMは詳しく見ておくべきとこなので、まずは、CSS overflowについて復習を兼ねてご紹介していきます。

CSS overflowプロパティとは

CSS overflowプロパティとは、ボックス内にテキストなどの内容が収まることができない場合に、ボックスからはみ出した部分の表示をどのようにするのか？を指定した値です。

CSS overflowを指定しない場合は、visibleがDefaultの値として指定され、visible以外の値を指定すると、新たなブロック成型コンテキストを生成することになります。

他のプロパティにもあるように、CSS overflowプロパティも左右・上下の指定をまとめておこなうことができます。（overflow-x: 左右）（overflow-y: 上下）

CSS overflowの構文

キーワード値

  • overflow: visible;
  • overflow: hidden;
  • overflow: scroll;
  • overflow: auto;
  • overflow: no-display
  • overflow: no-content

グローバル値

  • overflow: inherit;
  • overflow: initial;
  • overflow: unset;

その他にもMozilla拡張がありますが、キーワード値で書き換えることができますので、割愛します。

CSS overflowプロパティの値

visible（テキスト等のコンテンツが収まり切れない場合）は、パンディングボックスからはみ出して（外側に）表示される。
visibleはDefaultの値です。何も指定しなければvisibleとなります。
hidden（テキスト等のコンテンツが収まり切れない場合）は、表示しない。非表示にする。
scroll（テキスト等のコンテンツが収まり切れない場合）は、スクロールバーが表示され、スクロールバーを移動させることで表示することができる。スクロールバーは常に表示された状態になります。
autoユーザーエージェントに依存する。多くの場合は、スクロールバーが表示されます。
no-display（テキスト等のコンテンツが収まり切れない場合）は、ボックス全体が削除されます。
no-content（テキスト等のコンテンツが収まり切れない場合）は、ボックス全体が非表示となる。

overflowプロパティの使い方

overflow: auto;

以下のようにCSSに追加してやるだけで、簡単にパンディングボックスからはみ出したコンテンツの扱いを明示的に指定することができます。コンテンツがWebデザイナーや開発者の意図する通りに表示されないと、情報を伝えるという大事な機会の損失につながりますので、細かい部分ですが、意外に重要なのが”overflowプロパティ”の設定なのです。

styleに入れた例も挙げておきましょう。

<p class=”hoge” style=”overflow: scroll;”>すもももももももものうち もももすももももものうち</p>

Chrome 90で新しく追加されたCSS overflowプロパティの新しい値 ”clip”

Chrome 90で新しく追加されたoverflowプロパティの値が「clip」です。

clipがどんな値なのかというと、hiddenと同様にコンテンツを非表示にします。hiddenとの大きな違いですが、clipは、ドラッグやスクロールホイールなどのすべてのスクロールを禁止しています。つまり、ボックスをスクロールコンテナとは認識しないということです。

構文は以下の通りです。

overflow: clip;

Googleの記事の中にもありますが、clipには境界線を拡張することができるそうです。

overflow: clip;
overflow-clip-margin: 25px;

overflowプロパティについて書いていたら、長くなってしまいましたので、”ShadowDMをHTMLで直接実装する方法”については別の記事でご紹介します。

今日も一日頑張りましょう！

Have a great day!