フロントエンドBlog
Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証
UI開発者 佐竹
contain
プロパティにstyle
やsize
を指定した場合に、どうレンダリングされるかをご紹介します。
CSS Containmentの概要については「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」をご確認ください。
タイトルを「レンダリングパフォーマンスをアップする」としていますが、今回ご紹介するstyle
とsize
はパフォーマンスを向上するものというよりは、包含ブロックの内外でスタイルの計算やサイズの計算を分けることを目的としています。
「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をもっと良くしていきましょうと呼びかけ、講演を終えました。
Interop 2024がスタート
UI開発者 佐竹
Interop 2022、Interop 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 122、Chrome 121とSafari 17.3が安定版となりました。本記事では、Webプラットフォームに追加された新機能をご紹介します。
<select>
要素の中の<hr>
Firefox 122では、<select>
要素の子要素として<hr>
要素を使用できるようになりました。これは、選択肢の多いセレクトボックスの可読性を高めるのに役立ちます。現在、すべての主要なブラウザエンジンが、この機能をサポートしています。しかし、現時点ではどのブラウザも<hr>
要素をアクセシビリティツリーに含めていないことには注意が必要です。
- 119サポート済み
- 119サポート済み
- 122サポート済み
- 17サポート済み
HTMLSelectElement.showPicker
また、Firefoxにおいて<select>
要素にHTMLSelectElement
のshowPicker()
メソッドがサポートされています。これは、要素が選択されたときに表示されるのと同じピッカーですが、ボタンが押されたときや他のユーザー操作をトリガーにできます。
Largest Contentful Paint(LCP)API
Firefox 122はLCP APIもサポートしました。このパフォーマンスに関するAPIは、ユーザーがWebページを操作するより前の、最も面積の大きな画像やテキストの描画に関するタイミングを情報提供します。LCP についての詳細はLargest Contentful Paint (LCP)をご覧ください。
スクロールバー関連のCSSプロパティ
Chrome 121ではスクロールバー関連のCSSプロパティ、scrollbar-color
とscrollbar-width
がサポートされました。これについては、Scrollbar stylingで詳しく説明しています。
font-palette
プロパティを用いたアニメーション
font-palette
プロパティを使うと、カラーフォントをレンダリングする際のパレットを指定できます。このプロパティがアニメーションに対応したため、パレット間の切り替えが、指定した2つのパレット間のスムースなアニメーションとなります。
ArrayBuffer
のtransfer()
およびtransferToFixedLength()
メソッド
Firefoxは、JavaScriptのArrayBuffer
でtransfer()
メソッドとtransferToFixedLength()
メソッドをサポートしました。transfer()
メソッドは、現在のArrayBuffer
と同じバイト内容の新しいArrayBuffer
を作成して、元のArrayBuffer
をデタッチします。transferToFixedLength()
メソッドも同じように機能しますが、固定サイズのArrayBuffer
を作成します。
Speculation Rules APIの更新
Speculation Rules APIを使用すると、どのページを先読みするかをChromeに指示し、ページ遷移に要する時間を短縮することで、ユーザーエクスペリエンスをより優れたものにすることができます。
Chrome 121は、document ruleがサポートされています。document ruleは、推測ルール構文の拡張であり、投機的に読み込みを行うURLのリストをページ内にある要素からブラウザが取得するためのものです。document ruleには、どのリンクを使用するかの基準を含めることができます。これにより、新しいeagernessフィールドと組み合わせて、ページ上のリンクに対しマウスホバーやマウスダウン時に自動的にプリフェッチまたはプリレンダリングさせることができます。
ベータ版ブラウザのリリース
ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 123、Chrome 122とSafari 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についても、ArrayBuffer
のdetached()
、transfer()
、transferToFixedLength()
の各メソッドなど、いくつかの新機能がサポートされています。
Chrome 122のベータ版では、Async Clipboard APIのread()
メソッドで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 121、Chrome 120とSafari 17.2が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。
CSSネストの緩和解析
Chrome 120とSafari 17.2では、CSSネストの解析が緩和されました。Firefoxはこれをバージョン117からサポートしており、すべての主要エンジンが緩和解析をサポートしていることになります。
<details>
要素によるアコーディオン
Chrome 120とSafari 17.2では、<details>
要素のname
属性がサポートされています。これにより、いくつかの<details>
要素をグループ化することで、開閉が排他的なアコーディオンコンポーネントを制作できます。
詳しくはExclusive Accordionをご覧ください。
- 120サポート済み
- 120サポート済み
- ×未サポート
- 17.2サポート済み
:has()
セレクタ
Firefox 121はCSSの:has()
セレクタをサポートしました。このリリースにより、すべての主要なエンジンで:has()
が相互運用可能になりました。
詳しくは:has(): the family selectorをご覧ください。
CSSカスタムハイライトAPI
Safari 17.2はCSSカスタムハイライトAPIをサポートしており、::selection
のような標準のハイライト擬似クラスを拡張して、テキスト範囲やそのスタイルを設定できます。
- 105サポート済み
- 105サポート済み
- 👁プレビュー
- 17.2サポート済み
CloseWatcher API
Chrome 120は、(モーダルやポップアップなどを)閉じるリクエストを受信し応答するための新しいAPI、CloseWatcher APIをサポートしています。そのリクエストは、デスクトップ環境ではESC
キー、Androidでは戻るジェスチャーやボタンによってトリガーされます。
同APIに加えて、Chrome 120ではAndroidの戻るボタンに応答するよう<dialog>
とpopover
属性がアップグレードされました。
- 120サポート済み
- 120サポート済み
- ×未サポート
- ×未サポート
text-wrap
プロパティのbalance
とstable
Firefox 121は、text-wrap
プロパティの値でbalance
とstable
をサポートしています。balance
は、見出しのような短いコンテンツのブロックに有効で、より見やすく読みやすいテキストを作成します。stable
は、編集可能なコンテンツの編集中、カーソルより前の内容が安定するようにします。
詳しくはCSS text-wrap: balanceをご覧ください。
text-wrap: balance
text-wrap: stable
<iframe>
要素の遅延読み込み
Firefox 121は<iframe>
要素でloading
属性をサポートしました。これは、iframeの遅延読み込みがすべての主要なエンジンでサポートされたことを意味します。
- 77サポート済み
- 79サポート済み
- 121サポート済み
- 16.4サポート済み
イージングに用いるlinear()
関数
Safari 17.2は、バウンスやスプリングといった効果の作成に使用できるlinear()
関数もサポートしています。
- 113サポート済み
- 113サポート済み
- 112サポート済み
- 17.2サポート済み
ベータ版ブラウザのリリース
ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 122、Chrome 121とSafari 17.3です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。
Firefox 122とChrome 121では、HTMLSelectElementのshowPicker()
メソッドがサポートされています。これは、要素が選択されたときに表示されるのと同じピッカーですが、ボタンが押されたときや他のユーザー操作をトリガーにできます。
Chrome 121では、スクロールバーをスタイリングするためのプロパティ、scrollbar-color
とscrollbar-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メディア機能を使用せずに、ライトモードとダークモード向けの色を設定できるようになりました。
2つの単位、lh
とrlh
Firefoxは、CSS単位のlh
とrlh
をサポートしました。これらの単位を使用すると、ある要素の行の高さを基準とした値を設定できます。これは、背景画像とテキストの位置を揃える場合に便利です。このリリースで、3つの主要なエンジンすべてで相互運用が可能になりました。
- 109サポート済み
- 109サポート済み
- 120サポート済み
- 16.4サポート済み
HTTP 103 Early Hints
Firefoxは103 Early Hints HTTPレスポンスステータス コードをサポートしました。
ベータ版ブラウザのリリース
ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 121、Chrome 120とSafari 17.2です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。
Chrome 120とSafari 17.2には、CSSネストの緩和解析が含まれています。
Chrome 120 では-webkit-mask*
プロパティの接頭辞が削除され、現行の仕様に適合します。これにはmask-image
、mask-mode
、mask-repeat
、mask-position
、mask-clip
、mask-origin
、mask-size
、mask-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ページのレンダリングパフォーマン向上につながります。