このページは Cloud Translation API によって翻訳されました。

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

2022 年 8 月に Stable 版とベータ版のウェブブラウザでリリースされた興味深い機能の一部をご紹介します。

Rachel Andrew

ブラウザの安定版リリース

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

個々の変換

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

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

対応ブラウザ

ソース

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

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

対応ブラウザ

ソース

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

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

container-type を inline-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() をご覧ください。

対応ブラウザ

ソース

Sanitizer API

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

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

対応ブラウザ

ソース

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

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

対応ブラウザ

ソース

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

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

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

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

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

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

ブラウザの安定版リリース

個々の変換

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

コンテナクエリ

:has() 親疑似クラス

Sanitizer API

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

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

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