Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証

UI開発者 佐竹

containプロパティにstylesizeを指定した場合に、どうレンダリングされるかをご紹介します。

CSS Containmentの概要については「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」をご確認ください。

タイトルを「レンダリングパフォーマンスをアップする」としていますが、今回ご紹介するstylesizeはパフォーマンスを向上するものというよりは、包含ブロックの内外でスタイルの計算やサイズの計算を分けることを目的としています。

「HTML軽視されすぎ問題」講演概要

エグゼクティブ・フェロー 木達

3カ月ほど前にさかのぼりますが、2023年11月2日に開催されたCSS Nite主催のイベント「#朝までマークアップ」において、私は「HTML軽視されすぎ問題」と題した講演を行いました(#朝までマークアップ 開催のお知らせ参照)。講演の録画や、使用したスライドは共有できませんが(セミナーアーカイブ:#朝までマークアップ(2023年11月2日開催)で販売中)、本記事では講演の概要をご紹介します。

まず、業界的にHTMLが軽視されていると考える根拠として、The WebAIM Millionの調査結果Jens Oliver Meiert氏による調査結果を紹介。アクセシブルではない、あるいは仕様に準拠していないHTMLがWebにあふれている現状を共有しました。また、CSS-Tricksの記事「The Great Divide」が論じたフロントエンド職の分断に言及しつつ、相対的にHTMLよりもJavaScriptとその周辺技術が注目されがちな傾向も共有しました。

そのうえで、HTMLを軽視すべきではない理由、HTMLの品質が重要である理由として、以下の4点を挙げました:

  • コンテンツに意味や構造を与えるのはHTML
  • HTMLを解析するのが常にメジャーな(エラー処理に優れた)Webブラウザとは限らない
  • 人間可読性と機械可読性の両立でコミュニケーション機会は最大化
  • 仕様に準拠したHTMLはWebの持続可能性にも貢献

加えて、比較的最近に仕様に追加されたsearch要素popover属性、Appleが提案するmodel要素State of HTML 2023などを引き合いに、今現在も進化し続けている技術である点でもHTMLを軽視すべきではないし、むしろHTMLにもっと注目すべきと主張しました。最後にまとめとしてHTMLを、またWebのフロントエンドを学ぶことで、Webをもっと良くしていきましょうと呼びかけ、講演を終えました。

講演の模様のスクリーンショット。スライドで、「まとめ」のページを表示させている。ページ上には「過去、HTMLは軽視されてきた。アクセシブルではない、仕様に準拠していないHTMLがWebに溢れている。しかし、HTMLを軽視すべきではない。高いHTML品質がWebコミュニケーションの可能性を広げる。HTMLは今現在も進化し続けている技術。HTMLを、フロントエンドを学び、Webをもっと良くしていきましょう。今夜の「#朝までマークアップ」が、その第一歩となりますように!」とある。

Interop 2024がスタート

UI開発者 佐竹

Interop 2022Interop 2023に続き、Interop 2024の取り組みがスタートした旨を知らせる記事が、参加組織それぞれから一斉に公開されました。

2024年1月のWebプラットフォームの新機能

エグゼクティブ・フェロー 木達

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2024年1月30日に公開された記事「New to the web platform in January」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2024年1月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

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

2024年1月にはFirefox 122Chrome 121Safari 17.3が安定版となりました。本記事では、Webプラットフォームに追加された新機能をご紹介します。

<select>要素の中の<hr>

Firefox 122では、<select>要素の子要素として<hr>要素を使用できるようになりました。これは、選択肢の多いセレクトボックスの可読性を高めるのに役立ちます。現在、すべての主要なブラウザエンジンが、この機能をサポートしています。しかし、現時点ではどのブラウザも<hr>要素をアクセシビリティツリーに含めていないことには注意が必要です。

ブラウザサポート:
  • Google Chrome119サポート済み
  • Microsoft Edge119サポート済み
  • Mozilla Firefox122サポート済み
  • Safari17サポート済み

HTMLSelectElement.showPicker

また、Firefoxにおいて<select>要素にHTMLSelectElementshowPicker()メソッドがサポートされています。これは、要素が選択されたときに表示されるのと同じピッカーですが、ボタンが押されたときや他のユーザー操作をトリガーにできます。

ブラウザサポート:
  • Google Chrome121サポート済み
  • Microsoft Edge121サポート済み
  • Mozilla Firefox122サポート済み
  • Safari実験的な機能

Largest Contentful Paint(LCP)API

Firefox 122はLCP APIもサポートしました。このパフォーマンスに関するAPIは、ユーザーがWebページを操作するより前の、最も面積の大きな画像やテキストの描画に関するタイミングを情報提供します。LCP についての詳細はLargest Contentful Paint (LCP)をご覧ください。

ブラウザサポート:
  • Google Chrome77サポート済み
  • Microsoft Edge79サポート済み
  • Mozilla Firefox122サポート済み
  • Safari×未サポート

スクロールバー関連のCSSプロパティ

Chrome 121ではスクロールバー関連のCSSプロパティ、scrollbar-colorscrollbar-widthがサポートされました。これについては、Scrollbar stylingで詳しく説明しています。

ブラウザサポート:
  • Google Chrome121サポート済み
  • Microsoft Edge121サポート済み
  • Mozilla Firefox64サポート済み
  • Safari×未サポート

font-paletteプロパティを用いたアニメーション

font-paletteプロパティを使うと、カラーフォントをレンダリングする際のパレットを指定できます。このプロパティがアニメーションに対応したため、パレット間の切り替えが、指定した2つのパレット間のスムースなアニメーションとなります。

ArrayBuffertransfer()およびtransferToFixedLength()メソッド

Firefoxは、JavaScriptのArrayBuffertransfer()メソッドとtransferToFixedLength()メソッドをサポートしました。transfer()メソッドは、現在のArrayBufferと同じバイト内容の新しいArrayBufferを作成して、元のArrayBufferをデタッチします。transferToFixedLength()メソッドも同じように機能しますが、固定サイズのArrayBufferを作成します。

ブラウザサポート:
  • Google Chrome114サポート済み
  • Microsoft Edge114サポート済み
  • Mozilla Firefox122サポート済み
  • Safari👁プレビュー

Speculation Rules APIの更新

Speculation Rules APIを使用すると、どのページを先読みするかをChromeに指示し、ページ遷移に要する時間を短縮することで、ユーザーエクスペリエンスをより優れたものにすることができます。

Chrome 121は、document ruleがサポートされています。document ruleは、推測ルール構文の拡張であり、投機的に読み込みを行うURLのリストをページ内にある要素からブラウザが取得するためのものです。document ruleには、どのリンクを使用するかの基準を含めることができます。これにより、新しいeagernessフィールドと組み合わせて、ページ上のリンクに対しマウスホバーやマウスダウン時に自動的にプリフェッチまたはプリレンダリングさせることができます。

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

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 123Chrome 122Safari 17.4です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。

Firefox 123のベータ版は、宣言型のShadow DOMをサポートしました。

またFirefox 123では、サーバーが完全なレスポンスを準備するあいだに、ページが必要とする可能性のあるリソースをプリロードするための103 Early HintsというHTTPインフォメーションレスポンスステータスコードがサポートされています。

Safari 17.4のベータ版には、素晴らしい機能が数多く盛り込まれています。CSSについては@scope、ブロックコンテナやテーブルセルでのalign-content::grammar-errorおよび::spelling-error擬似要素、ほか多数がサポートされています。

フォームについては、フォームコントロールにおける縦書きモードのサポート、<input type="date">showPicker()メソッド、iOSにおける<select>要素内の<hr>がサポートされています。

JavaScriptについても、ArrayBufferdetached()transfer()transferToFixedLength()の各メソッドなど、いくつかの新機能がサポートされています。

Chrome 122のベータ版では、Async Clipboard APIread()メソッドでunsanitizedオプションが追加され、非サニタイズHTMLフォーマットを取得できるようになりました。JavaScriptに関して、新しいイテレータヘルパーや、組み込みのSetクラスのための新しいメソッドもサポートされています。

また、Chrome 122にはStorage Buckets APIが追加され、メモリ負荷が高い状況下で永続ストレージの退避が予測しやすくなります。

2023年12月のWebプラットフォームの新機能

エグゼクティブ・フェロー 木達

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2023年12月19日に公開された記事「New to the web platform in December」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2023年12月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

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

2023年12月にはFirefox 121Chrome 120Safari 17.2が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

CSSネストの緩和解析

Chrome 120とSafari 17.2では、CSSネストの解析が緩和されました。Firefoxはこれをバージョン117からサポートしており、すべての主要エンジンが緩和解析をサポートしていることになります。

<details>要素によるアコーディオン

Chrome 120とSafari 17.2では、<details>要素のname属性がサポートされています。これにより、いくつかの<details>要素をグループ化することで、開閉が排他的なアコーディオンコンポーネントを制作できます。

詳しくはExclusive Accordionをご覧ください。

ブラウザサポート:
  • Google Chrome120サポート済み
  • Microsoft Edge120サポート済み
  • Mozilla Firefox×未サポート
  • Safari17.2サポート済み

:has()セレクタ

Firefox 121はCSSの:has()セレクタをサポートしました。このリリースにより、すべての主要なエンジンで:has()が相互運用可能になりました。

詳しくは:has(): the family selectorをご覧ください。

ブラウザサポート:
  • Google Chrome105サポート済み
  • Microsoft Edge105サポート済み
  • Mozilla Firefox121サポート済み
  • Safari15.4サポート済み

CSSカスタムハイライトAPI

Safari 17.2はCSSカスタムハイライトAPIをサポートしており、::selectionのような標準のハイライト擬似クラスを拡張して、テキスト範囲やそのスタイルを設定できます。

ブラウザサポート:
  • Google Chrome105サポート済み
  • Microsoft Edge105サポート済み
  • Mozilla Firefox👁プレビュー
  • Safari17.2サポート済み

CloseWatcher API

Chrome 120は、(モーダルやポップアップなどを)閉じるリクエストを受信し応答するための新しいAPI、CloseWatcher APIをサポートしています。そのリクエストは、デスクトップ環境ではESCキー、Androidでは戻るジェスチャーやボタンによってトリガーされます。

同APIに加えて、Chrome 120ではAndroidの戻るボタンに応答するよう<dialog>popover属性がアップグレードされました。

ブラウザサポート:
  • Google Chrome120サポート済み
  • Microsoft Edge120サポート済み
  • Mozilla Firefox×未サポート
  • Safari×未サポート

text-wrapプロパティのbalancestable

Firefox 121は、text-wrapプロパティの値でbalancestableをサポートしています。balanceは、見出しのような短いコンテンツのブロックに有効で、より見やすく読みやすいテキストを作成します。stableは、編集可能なコンテンツの編集中、カーソルより前の内容が安定するようにします。

詳しくはCSS text-wrap: balanceをご覧ください。

text-wrap: balance

ブラウザサポート:
  • Google Chrome114サポート済み
  • Microsoft Edge114サポート済み
  • Mozilla Firefox121サポート済み
  • Safari👁プレビュー

text-wrap: stable

ブラウザサポート:
  • Google Chrome×未サポート
  • Microsoft Edge×未サポート
  • Mozilla Firefox121サポート済み
  • Safari👁プレビュー

<iframe>要素の遅延読み込み

Firefox 121は<iframe>要素でloading属性をサポートしました。これは、iframeの遅延読み込みがすべての主要なエンジンでサポートされたことを意味します。

ブラウザサポート:
  • Google Chrome77サポート済み
  • Microsoft Edge79サポート済み
  • Mozilla Firefox121サポート済み
  • Safari16.4サポート済み

イージングに用いるlinear()関数

Safari 17.2は、バウンスやスプリングといった効果の作成に使用できるlinear()関数もサポートしています。

ブラウザサポート:
  • Google Chrome113サポート済み
  • Microsoft Edge113サポート済み
  • Mozilla Firefox112サポート済み
  • Safari17.2サポート済み

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

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 122Chrome 121Safari 17.3です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。

Firefox 122とChrome 121では、HTMLSelectElementのshowPicker()メソッドがサポートされています。これは、要素が選択されたときに表示されるのと同じピッカーですが、ボタンが押されたときや他のユーザー操作をトリガーにできます。

Chrome 121では、スクロールバーをスタイリングするためのプロパティ、scrollbar-colorscrollbar-widthがサポートされています。また、SVGに対するCSSのマスキングが改善されたほか、スペルミスや文法的に正しくないテキストをハイライトするのに用いられる擬似要素もサポートされました。

2023年11月のWebプラットフォームの新機能

エグゼクティブ・フェロー 木達

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2023年11月30日に公開された記事「New to the web platform in November」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2023年11月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

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

2023年11月に安定版となったのは唯一、Firefox 120だけでした。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

<source>要素におけるmedia属性のサポート

Firefoxは、<source>要素のmedia属性を再びサポートしました。これに伴い、<audio>要素と<video>要素にサポートが拡張されます。今回のリリースで<audio><video><picture>要素内の<source>要素でmedia属性を使用できるようになりました。

media属性はChromeで既にサポートされており、Safari も同様です。そのため、すべてのエンジンでレスポンシブなHTML動画と音声がサポートされることになります。

CSSのlight-dark()関数

Firefoxは、CSSのカラー関数であるlight-dark()をサポートしました。つまり、prefers-color-schemeメディア機能を使用せずに、ライトモードとダークモード向けの色を設定できるようになりました。

ブラウザサポート:
  • Google Chrome×未サポート
  • Microsoft Edge×未サポート
  • Mozilla Firefox120サポート済み
  • Safari×未サポート

2つの単位、lhrlh

Firefoxは、CSS単位のlhrlhをサポートしました。これらの単位を使用すると、ある要素の行の高さを基準とした値を設定できます。これは、背景画像とテキストの位置を揃える場合に便利です。このリリースで、3つの主要なエンジンすべてで相互運用が可能になりました。

ブラウザサポート:
  • Google Chrome109サポート済み
  • Microsoft Edge109サポート済み
  • Mozilla Firefox120サポート済み
  • Safari16.4サポート済み

HTTP 103 Early Hints

Firefoxは103 Early Hints HTTPレスポンスステータス コードをサポートしました。

ブラウザサポート:
  • Google Chrome103サポート済み
  • Microsoft Edge103サポート済み
  • Mozilla Firefox120サポート済み
  • Safari17サポート済み

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

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 121Chrome 120Safari 17.2です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。

Chrome 120とSafari 17.2には、CSSネストの緩和解析が含まれています。

Chrome 120 では-webkit-mask*プロパティの接頭辞が削除され、現行の仕様に適合します。これにはmask-imagemask-modemask-repeatmask-positionmask-clipmask-originmask-sizemask-compositeおよびmaskの一括指定が含まれます。ローカルのmask-image参照がサポートされ、シリアル化が仕様に一致し、許容する値は仕様と一致するようになりました。

Chrome 120とSafari 17.2では、<details>要素のname属性がサポートされました。

Firefox 121は、CSSの:has()セレクタをサポートします。このリリースにより、:has()はすべての主要なエンジンで相互運用可能になります。

CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要

UI開発者 佐竹

Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。

CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。