8 月にウェブ プラットフォームを導入

2022 年 8 月に安定版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。

8 月には、Firefox 104Chrome 104Chrome 105 が安定版になりました。

Chrome 104 には、CSS 変換の個々のプロパティが含まれています。プロパティは scalerotatetranslate です。これらのプロパティを使用して、変換の各部分を個別に定義できます。

これにより、Chrome は、すでにこれらのプロパティをサポートしている Firefox と Safari に加わります。

対応ブラウザ

  • Chrome: 104。
  • Edge: 104。
  • Firefox: 72.
  • Safari: 14.1。

ソース

ニューメディアのクエリ構文

Chrome 104 には、メディアクエリ範囲構文も含まれています。これは Firefox ですでにリリースされており、メディアクエリを効率化できます。たとえば、次のメディアクエリは、

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

比較演算子を使用して記述できます。

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

対応ブラウザ

  • Chrome: 104。
  • Edge: 104。
  • Firefox: 102.
  • Safari: 16.4。

ソース

コンテナクエリ

Chrome 105 は、コンテナ クエリという待望の機能をウェブ プラットフォームにもたらす、エキサイティングなリリースです。メディアクエリはビューポートのサイズに対してクエリを実行する方法ですが、コンテナクエリはコンテナのサイズに対してクエリを実行する方法です。

対応ブラウザ

  • Chrome: 105。
  • Edge: 105。
  • Firefox: 110。
  • Safari: 16。

ソース

コンテナクエリを使用するには、container-type プロパティを使用して制限を有効にします。

.card-container {
  container-type: inline-size;
}

container-typeinline-size に設定すると、親の行方向のサイズがクエリされます。英語などのラテン語では、テキストが左から右にインラインで流れるため、カードの幅になります。

これで、そのコンテナを使用して、@container を使用して子要素にスタイルを適用できるようになりました。

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

コンテナクエリの詳細については、@container と :has(): Chromium 105 に導入される 2 つの強力な新しいレスポンシブ API をご覧ください。

:has() 親疑似クラス

上記の投稿では :has() についても言及されています。この新しい疑似クラスである CSS :has() 疑似クラスを使用すると、条件に基づいて親要素と兄弟要素をターゲットにできます。詳しくは、:has() ファミリー セレクタをご覧ください。

対応ブラウザ

  • Chrome: 105。
  • Edge: 105。
  • Firefox: 121。
  • Safari: 15.4。

ソース

Sanitizer API

Chrome 105 には Sanitizer API も含まれています。この API は、クロスサイト スクリプティングの脆弱性を排除するために、プラットフォームにサニタイズを組み込みます。

Chrome 105 では、CSS 疑似クラス :modal も導入されています。これは、外部要素とのすべてのインタラクションを除外する状態にある要素に一致します。たとえば、showModal() API で開いた <dialog> などです。

対応ブラウザ

  • Chrome: 105。
  • Edge: 105。
  • Firefox: 103.
  • Safari: 15.6。

ソース

findLast() メソッドと findLastIndex() メソッド

Firefox 104 では、Array.prototype.findLast()Array.prototype.findLastIndex()TypedArray.prototype.findLast()TypedArray.prototype.findLastIndex() の各メソッドがフラグでサポートされるようになりました。これらのメソッドは、指定されたテスト関数に一致する Array または TypedArray 内の最後の要素の値とインデックスを検索するために使用されます。

対応ブラウザ

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4。

ソース

ベータ版ブラウザのリリース

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除内容をテストできます。

リリース日が 8 月をわずかに外れたため、8 月の新しいベータ版は Firefox 105 のみでした。現在、詳細は不明です。

6 月に言及した Safari 16 ベータ版も引き続き実施中です。

ウェブ初心者向けシリーズの一部