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

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

TypeScriptではソースコードに型を指定でき、プログラム実行前に機械（TypeScriptコンパイラー）が一定の問題を検出できることはよく知られています。一方で、実際のソースコードに型が逐一書いてあることはまずなく、機械が型を推論できる場合は記述を省略することも多く行われています。

その結果、機械は型を推論できているものの、人間には型が分からない状況も生まれます。メインで関わっているプロジェクトではそのような状況に陥らないと思いますが、参加したばかりのプロジェクトや引き継いだばかりのプロジェクトでは一時的にでも発生しがちです。

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

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

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

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

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

Firefox 119のJavaScript機能

Firefox 119が、Object.groupByとMap.groupByの静的メソッドによるJavaScript配列のグループ化をサポートしました。

また、Firefox 119ではisWellFormed()とtoWellFormed()の両Stringメソッドがサポートされました。これらは、文字列が整形式のUnicodeを含んでいるかどうかをチェックしたり、また文字列を整形式のUnicodeにサニタイズするために使用できます。いずれのメソッドも、3つの主要なエンジンで相互運用できるようになりました。

<search>要素が相互運用可能に

Chrome 118では、WebページまたはWebアプリケーションで、検索やフィルタリングの機能を表す新しいHTML要素、<search>要素がサポートされました。この要素は、3つの主要なエンジンで相互運用が可能になりました。

select要素内におけるhr要素

10月には2度、Chromeでメジャーバージョンがリリースされました。そのうちChrome 119では、<select>要素について、ちょっとした変更が加えられています。その変更により、選択式のメニューにおいて、項目どうしを区切る水平線を表示できるようになりました。より詳しくは、Select element: now with horizontal rulesをお読みください。

スコープ付きスタイル

Chrome 118は、@scope規則によるスコープ付きスタイルをサポートしました。この規則は、DOMにおいてサブツリーにある要素に限ってスタイルを適用する手段を提供します。より詳しくは、Limit the reach of your selectors with the CSS @scope at-ruleをお読みください。

CSSのprefers-reduced-transparency

Chrome 118は、メディア機能のprefers-reduced-transparencyをサポートしました。これは、ユーザーがデバイスで設定した選好をチェックし、コードを通じてそのユーザーニーズに対応するための、一連の機能の1つです。より詳しくは、CSS prefers-reduced-transparencyをご覧ください。

CSSの相対色構文

Chrome 119は、その強力な新機能として、CSS Color Module Level 5に定義されている相対色構文をサポートしました。これにより、どの色空間や構文であっても、ある色から別の色を派生させることができます。

WebAssemblyのガベージコレクション（WasmGC）

Chrome 119は、WebAssemblyでKotlinやPHP、Javaにあるようなガベージコレクション機能を高速化するWasmGCをサポートしています。詳しくはWebAssembly Garbage Collection (WasmGC) now enabled by default in Chromeをお読みください。

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

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

Safari 17.2では多くの新機能がサポートされています。CSSについては、CSS Custom Highlight API、mask-borderプロパティ、counter-setプロパティ、その他多くの機能がサポートされています。また、相互運用性を向上させるために、既存の機能に多くの修正が加えられています。

HTMLに関して、Safari 17.2は<details>要素のname属性をサポートしています。また、Web APIではFetch Priorityがサポートされ、レスポンシブイメージが<link rel=preload>で有効になりました。

Firefox 120では、CSSのrhおよびrlh単位、text-wrap: balance、light-dark()関数のサポートが追加されました。

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

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

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

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

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

Chrome 117ではgrid-template-columnsとgrid-template-rowsの値でsubgridがサポートされ、この念願の機能が相互運用可能になりました。subgridについては、CSS subgridで詳しく紹介しています。

Chromeは、アニメーションの開始や終了を簡単に追加したり、ダイアログやポップオーバーなどの要素をトップレイヤーに表示/非表示させる際のアニメーションをスムースにする、3つの新しいCSS機能をサポートしています。transition-behaviorプロパティ、@starting-styleルール、overlayプロパティについては、Four new CSS features for entry and exit animationsをご覧ください。

またChrome 117では、Object.groupByとMap.groupByの静的メソッドによるJavaScript配列のグループ化が可能になりました。

Safari 17では、Popover APIをサポートするために、popover属性が追加されました。

Safari 17とFirefox 118には<search>要素が含まれています。この要素は、WebページまたはWebアプリケーションで、コンテンツを検索またはフィルタリングする機能を含む要素を表します。

Safari 17では多くの新たなCSS機能がサポートされましたが、そのなかに@counter-styleがあります。このルールを使用すると、リストにおいてあらかじめ定義されたものではない独自のスタイルをカウンターに定義できます。この機能は、3つのエンジンすべてで利用できるようになりました。

Firefox 118 includes several additional CSS math functions: abs(), sign(), round(), mod(), rem(), pow(), sqrt(), hypot(), log(), and exp().

Firefox 118にはabs()、sign()、round()、mod()、rem()、pow()、sqrt()、hypot()、log()、exp()といった、CSSで使える関数が複巣追加されています。

Safari 17はまた、HEIC/HEIF画像とJPEG XLもサポートしています。

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

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

今月、FirefoxとSafariでサポートされた<search>要素は、Chrome 118でレポートされました。つまり、この要素はもうじきすべてのエンジンで利用できます。

静的メソッドのObject.groupByとMap.groupByは、Firefox 119でサポートされます。

Chrome 118には、@scopeルールによるスコープ付きスタイルと、prefers-reduced-transparencyおよびscriptingの新しいメディア機能が含まれます。

目下Safari 17.1は、プラットフォーム全体に関わるさまざまな問題を修正したリリースとして準備中です。

11月2日の21:00より、CSS Niteの主催で#朝までマークアップというオンラインイベントが開催されます。

「#朝まで」シリーズをCSS Niteで開催。マークアップ（HTMLやCSSなど）について、25名の猛者が持ち時間10分、合計8時間のボリュームでお届けします。

• 当日参加できない方には、 アーカイブ視聴（有料）をご用意しています。
• アーカイブ視聴チケットはスライドやサンプルファイルなどの特典付きです。

当日の視聴は無料ですので、お早めに参加登録なさってください！

同イベントにおいて、私はキーノートを担当させていただき、「HTML軽視されすぎ問題」と題した講演を行う予定です。以下は、その概要になります：

「#朝までマークアップ」......すごい名前のイベントですよね。皆さん、どれだけHTMLが好きなんですか笑。もちろん、私はHTMLが大好きです。

けれど、皆さん！！HTMLって業界的に、ちょっと軽視されている気がしませんか。マークアップという行為の生み出す価値が、今ひとつ認められていない気がしませんか。私は、します。

しかし誤解を恐れずにいえば、Webの本質はHTMLにこそあると、私は思います。「#朝までマークアップ」の幕開けとして改めてHTMLの重要性、またHTMLを学ぶ意義を皆さんと共有させていただければと思います。

当日はHTMLに限らず、Webのフロントエンドにまつわる、さまざまなテーマのセッションが予定されています。すでに650名を超えるお申し込みをいただいているとのことですが、まだの方は是非、参加をご検討ください！

イベントの詳細のご確認や、参加登録は#朝までマークアップ - CSS Nite | Doorkeeperにてお願いいたします。

次週の9月27日19:30より、エンジニア向けオンラインコミュニティのTechFeedにおいて、TechFeed Experts Night#26が開催されます。

今回のTechFeed Experts Nightは、「Web標準技術最前線 ー HTML/CSS/JSの「いま」」がテーマです。

プログラミングのエキスパートたちが、HTML/CSS/JSのトレンドからマニアックまで12分間のLTに凝縮！それらをネタに、エキスパートたちが語り合う！

私はTechFeed公認エキスパートの1人として、主にWeb Accessibilityチャンネルで活動していますが、本イベントでは「あると便利なCSS Anchor Positioning」と題し、CSS Anchor Positioningについてのライトニングトークを行う予定です。

CSS Anchor Positioningについて、その利点、歴史と現状（ブラウザ実装状況）、使用方法などを説明します。

イベント全体のタイムスケジュールは、以下のとおりです。ややHTMLとCSSにテーマの偏りはあるものの、Webのフロントエンドに携わっていらっしゃる方であれば、きっと興味を惹かれる内容ではないかと思います。

1. 19:30〜19:35：TechFeedプログラミング界隈記事ランキング！
2. 19:36〜19:48：2023年のWeb開発のベースライン
3. 19:49〜20:01：PopoverAPI〜HTMLだけでアクセシブルなポップアップUI
4. 20:02〜20:14：あると便利なCSS Anchor Positioning
5. 20:15〜20:27：CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
6. 20:28〜20:40：Webに追加されていくhtmlタグのお話（仮）
7. 20:41〜21:00：アフタートーク

配信はYouTube Liveで行われ、参加費は無料です。ご都合がつくようでしたら、ぜひご参加ください。

W3CのSustainable Web Design Community Groupが、8月30日付けでWeb Sustainability Guidelines（WSG）1.0を公開していました。このガイドラインは、Webサイトをよりサステナブルに、つまり持続可能にするための幅広い推奨事項、ベストプラクティスを列挙したものです。

• Introducing Web Sustainability Guidelines | 2023 | Blog | W3C
• New Web Sustainability Guidelines Report | Sustainable Web Design Community Group

ガイドラインは、持続可能な社会の実現に必要な、あらゆる戦略やメカニズムを網羅しているわけではありません。しかし、ガイドラインに従うことで、Webサイトの構築・運用に伴い発生する環境負荷を最小限に抑えることが期待できる、とされています。

また副次的に、Webコンテンツがよりアクセシブルで使いやすく、パフォーマンスに優れたものになることも、ガイドラインに従うことの効果として記されています。推奨事項は

• ユーザーエクスペリエンスデザイン
• Web開発
• ホスティング、インフラストラクチャ、システム
• 事業戦略と製品管理

の4つのカテゴリに大別され、全部で93のガイドラインと、232の達成基準が定義されています。WebコンテンツのアクセシビリティについてのガイドラインであるWeb Content Accessibility Guidelines（WCAG）からインスピレーションを得ていただけあって、この構成はWCAGに近いものがあります。

個々のガイドラインには、その影響とコストがそれぞれ3段階（Low / Medium / High）で付記されています。例えば、フロントエンドに関するガイドラインを例に具体的に紹介しますと、「3.8 正しくHTML要素を使う」というガイドラインは、影響とコストともにMedium、中くらいと定義されています。ちなみに、同ガイドラインには以下の3つの達成基準が設けられています：

セマンティックなコード

コンテンツが、適切なHTML要素を使用し、意味的にマークアップされていることを確かめてください。

非標準のコードは避ける

非標準の要素や属性を使用することは避けてください。

カスタムなコード

ネイティブのHTML要素を使用できない場合や、デザインシステムに定義されたコンポーネントの使用が厳格に求められる場合にのみ、カスタム要素またはWebコンポーネントを使用してください。

既に触れたとおり、Webのフロントエンドにとどまることなく、WSG 1.0は非常に広範な内容を含んでいます。しかし、気候変動をはじめとする社会課題に取り組む意義や重要性が日増しに高まるなか、その内容について知っておくことは、フロントエンドに特化して従事する立場であっても有意義でしょう。ただし、WSG 1.0が現状、コミュニティグループのレポート草案である点には、注意が必要です。

WSG 1.0を読み始める前に、その要約版という位置付けのWeb Sustainability Guidelines（WSG）1.0 at a Glanceを読むと、全体像を掴みやすいかもしれません。また、ガイドラインの執筆者の1人で、書籍『Designing for Sustainability』の著者で知られるTim Frick氏のBlog記事、Introducing the Web Sustainability Guidelinesも、おすすめです。