State of HTML 2025で出てきた要素を順に見ていく
dai_zabzab<datalist>
フォームコントロール内でユーザーが選択できるプリセットのリストを提供しつつ、カスタムオプションも許可する方法。
<input name="country" list="countries">
<datalist id="countries">
<option>Afghanistan</option>
...
</datalist>
FireFox以外は気にせず使える要素。
コンボボックスみたいな感じで選択肢を用意できる。
いろんなinput要素のtype属性に対応している
dai_zabzabinput.showPicker
プログラムで、カラーピッカーや日付入力など、ピッカーを備えたフォームコントロールのピッカーを開く。
<input id="dateInput" type="date">
<button onclick="dateInput.showPicker()">Select date</button>
ピッカーの表示をJS側から操作できるっぽい
dai_zabzabCustomizable Select
スタイル設定可能でカスタマイズ可能なドロップダウンコントロール。旧称<selectlist>および<selectmenu>。
select,
::picker(select) {
appearance: base-select;
}
以前selectmenuなどで、OpenUIから提唱されていた要素はCustomizable Selectになった模様
OpenUIも更新されていた
Selectlist has been renamed to customzable select. See the new explainer here.
リンク先がこちら
dai_zabzab<input type="color">
ユーザーが色値を選択できるカラーピッカーを作成します。
カラーピッカーを選択できるinput要素
dai_zabzab<input type="color" colorspace="display-p3">
広色域（P3）カラーを選択できるカラーピッカーを作成します。
カラーピッカーでdisplay-p3というものを扱えるらしい
display-p3 カラースペース
Appleによって定義されたDisplay P3カラースペースは、DCI-P3色域、D65白色点、sRGBガンマ曲線を組み合わせたものです。これは現在の広色域モニターに典型的な広色域空間であり、sRGB色域よりも鮮やかな緑と赤を表現できます。display-p3はr、g、bを基にしており、色域内の値は0から1の範囲です。白色点はD65です。
dai_zabzab<input type="color" alpha>
半透明の色を選択できるカラーピッカーを作成します。
カラーピッカーで半透明を扱えるらしい
ほとんどのブラウザで未対応
dai_zabzabcontenteditable="plaintext-only"
要素の生テキストの編集は許可しますが、リッチテキストの書式設定は許可しません。
<h2 class="title" contenteditable="plaintext-only"></h2>
<details> and <summary>
インタラクティブにコンテンツの表示/非表示を切り替えられる開示ウィジェット。
<details>
<summary>Details</summary>
Longer content
</details>
知らない人の方が少ないはず、、
<details name>
<details>要素をグループ化し、グループ内で同時に開くことができるのは最大1つだけとなるようにする。
<details open name="sidebar_panel">
<summary>Main info</summary>
<!-- controls -->
</details>
<details name="sidebar_panel">
<summary>Style</summary>
<!-- controls -->
</details>
JSの制御をせずに開閉する要素を一つにできる。
nameがないものがディスクロージャー、nameがあるものがアコーディオンと
区別できるのかもしれない
dai_zabzab<dialog closedby="any">
ダイアログの外側をクリックすることで閉じられるようにする（ライトディスマイス）。
外側クリックでダイアログを非表示したりすることをlight dismissっていうのか、、
dai_zabzabdialog.requestClose()
ダイアログをキャンセル可能な方法で閉じます（dialog.close()とは異なります）。
Escapeをした時と同じような挙動で、ダイアログを閉じれるっぽい
dai_zabzabPopover API
オーバーレイ、ポップアップ、メニューなどのポップオーバーを実現するHTML構文とJS API
popovertarget属性とpopover属性の組み合わせで、ポップオーバーを表現できる
dai_zabzabpopover="hint"
より一時的なポップオーバー（例：ツールチップ）を作成する方法。
ツールチップ的な扱いができるポップオーバー
dai_zabzabcommand and commandfor attributes (Command Invokers)
<button>が事前定義されたカスタムコマンドを呼び出す宣言的な方法。
現状、実験的な機能の様子
ダイアログのような元々あるイベントであれば、キーワードを使用することで制御可能
カスタムコマンドを使う場合にはJSでの登録が必要っぽい
dai_zabzabelement.before()
要素を別の要素の前に移動するDOMメソッド。
dai_zabzabelement.moveBefore()
要素を別の要素の前に移動させつつ、状態（フォーカス、iframeの読み込み状態、アニメーションフレームなど）を維持する。
dai_zabzabcolorSpace for 2D canvas
<canvas>要素上に描画されるグラフィックの色空間を設定します。
dai_zabzabctx.drawElement() (HTML in canvas)
<canvas>上にHTML要素を描画し、再描画とヒットテストを容易に行えるようにする。
drawElementsとは違う？？
dai_zabzab<model> for AR/VR/3D content
HTMLに組み込みコントロール付きの3Dモデルを埋め込むことを可能にします。
3Dモデルを簡単に埋め込めることができそう
画像みたいに使えるようになる？？
まだ検討中かもしれない
dai_zabzabnavigator.xr (WebXR Device API)
互換性のある出力デバイスでAR/VRセッションを作成する。
Web上でARやVRを使えるようにするもののようです。
WebXRは、 WebXR 機器 API を中核として、拡張現実と仮想現実（AR および VR）の両方をウェブ上で実現するために必要な機能を提供します。これらの技術を合わせて、複合現実 (MR) またはクロス現実 (XR) と呼びます。
dai_zabzabWebGPU
ブラウザ内で高性能グラフィックスと並列計算を実現するため、GPUへの低レベルアクセスを提供するJavaScript API。
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter?.requestDevice();
WebGLの後継？のよう
dai_zabzabWebGL
OpenGLを基盤とした、<canvas>上でGPUを用いて2Dおよび3Dグラフィックスをレンダリングするための低レベルAPI。
const gl = canvas.getContext("webgl");
dai_zabzabJPEG XL
ウェブ環境向けに最適化された画像フォーマット。
JPEG XLはJPEGやPNGなどの従来の形式よりも高い圧縮率を実現しており、非可逆圧縮と可逆圧縮、アニメーション、アルファチャンネル、HDR、広色域などのモダンな機能を提供していますが、これらは部分的も含めてAVIFやWebPでも対応しています。
dai_zabzab<math> (inline MathML)
MathMLを使用して、数式をHTMLで直接表示する。
<!-- x² + 1 -->
<math>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo><mn>1</mn>
</math>
dai_zabzab<mapviewer> (inline MapML)
HTMLにインタラクティブマップを埋め込む。
そもそもMapMLを知らなかった
dai_zabzabContent-Security Policy (CSP)
ウェブサイトからブラウザへの一連の指示で、XSS攻撃の検出と軽減に役立つもの。
Content-Security-Policy: script-src 'self';
dai_zabzabSanitizer API
element.setHTML() および Document.parseHTML()。信頼できないHTML文字列をサニタイズすることでXSS攻撃を防ぐAPI。
greeting.setHTML('Hello ' + nameInput.value);
dai_zabzabhidden="until-found"
要素が見つかるまで非表示にする（例：ページ内検索による検索時や、URLハッシュでターゲットにされた時など）。
<section class="drawer" aria-expanded="false" hidden="until-found">
<!-- content -->
</section>
dai_zabzabIntl.Segmenter API
言語に依存したテキストのセグメンテーション（文字単位、単語単位、文単位への分割）
Intl自体は国際化のためのAPI
const segmenterFr = new Intl.Segmenter("fr", { granularity: "word" });
const string1 = "Que ma joie demeure";
const iterator1 = segmenterFr.segment(string1)[Symbol.iterator]();
console.log(iterator1.next().value.segment);
// Expected output: 'Que'
console.log(iterator1.next().value.segment);
// Expected output: ' '
dai_zabzabIntl.Locale API
Intl.Locale APIは、言語、地域、スクリプトコードを含むUnicodeロケール識別子（例：zh-Hans-CNやen-GB）を解析します。
const us = new Intl.Locale("en-US");
dai_zabzabHTML Modules
JavaScriptインポート経由でHTMLファイルをインポートし、その要素とJavaScriptエクスポートにアクセスする。
<script type="module">
import { TabList } from "./tablist.html" with { type: 'html' };
customElements.define("tab-list", TabList);
</script>
dai_zabzab<template>
すぐにレンダリングされないが、後でJS経由で利用される可能性があるHTMLを保持する仕組み。
<template id="counter">
<div class="counter">Clicked {{ times }} times</div>
</template>
dai_zabzab遅延読み込み
特定のリソースは必要な時のみ読み込む。
<img src="picture.jpg" loading="lazy" />
<iframe src="supplementary.html" loading="lazy"></iframe>
srcset and sizes attributes
複数のソース画像を提供し、ブラウザが適切な画像を選択するのに役立つヒントを付与できる属性。
<img
srcset="fairy-med.jpg 480w, fairy-large.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="fairy-large.jpg"
alt="Elva dressed as a fairy" />
dai_zabzab<img sizes="auto" loading="lazy">
sizes="auto"属性は、画像が読み込まれる前にレイアウトスペースを確保し、レイアウトのずれを回避します。
これ一つでレイアウトシフト解決しそう
dai_zabzabfetchpriority attribute
ブラウザが各種リソースの取得優先順位を決定する際に役立つヒントを指定できるようにします。
<img src="logo.svg" fetchpriority="high" />
dai_zabzabblocking="render"
特定のリソースが読み込まれるまで、ブロックのレンダリング（ただし解析は除く）を遅延させる。<link>、<script>、<style> で利用可能。
<script blocking="render" async src="async-script.js"></script>
<link rel="expect">
href値で参照される要素が接続され、完全に解析されるまでレンダリングをブロックする。
<link rel="expect" href="#hero" blocking="render">
文書の重要な部分が解釈できるまで、ページがレンダリングブロックされるようにします。これにより、ページは一貫性を保ってレンダリングされます。レンダリングブロックは、 blocking="render" 属性が追加されている場合にのみ発生することに注意してください。
dai_zabzabSpeculation Rules
ブラウザがパフォーマンス向上のために、バックグラウンドでページを積極的にダウンロードするよう促すヒント。
<script type="speculationrules">
{
"prefetch": [{ "urls": ["/about", "/pricing"] }],
"prerender": [
{
"where": {
"href_matches": "^/product/\\d+$",
"selector_matches": "a.nav-link"
}
}
]
}
</script>
dai_zabzabカスタム要素の使用
カスタム要素を使用する（あなたまたは他の誰かが定義したもの）。
<my-switch start="On" end="Off">Wi-Fi</my-switch>
dai_zabzabカスタム要素の定義
他者が使用するためのカスタム要素の定義。
class MyElement extends HTMLElement { … }
customElements.define("my-element", MyElement);
dai_zabzabDeclarative Custom Elements
HTMLを通じて宣言的にWebコンポーネントを作成します。JavaScriptの有無は問いません。
<definition name="progress-ring">
<template shadowmode="open">
<div id="base" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{root.attributes.percentage.value}}">
<slot>{{ root.attributes.percentage.value }}%</slot>
</div>
<style>#base { /* ... */ }</style>
</template>
</definition>
<progress-ring value="50"></progress-ring>
dai_zabzabScoped Custom Element Registries
1つのタグ名に対して、ページ内に複数のカスタム要素定義が存在することを許可する。
const registry = new CustomElementRegistry();
registry.define('sub-element', SubElement);
dai_zabzabShadow DOM
外部から見えにくい要素をカプセル化し、ページの他の部分に影響を与えないCSSでスタイルを設定する。
this.shadowRoot = this.attachShadow({mode: "open"});
dai_zabzab宣言的Shadow DOM
サーバーサイドレンダリングを行うWebコンポーネントなどにおいて、HTMLでシャドウツリーを定義する。
<host-element>
<template shadowrootmode="open">
<!-- Shadow content -->
</template>
</host-element>
slot attribute
コンポーネントUIの事前定義された部分を独自の要素で置き換えること。
<my-switch>
Wi-Fi
<i slot="start" class="icon-on">On</i>
<i slot="end" class="icon-off">Off</i>
</my-switch>
dai_zabzab命令的スロット割り当て
JSを介して要素を手動でスロットに割り当てる方法。これにより、コンポーネントの利用者がスロットの割り当てを管理する必要がなくなります。
this.attachShadow({mode: "open", slotAssignment: "manual" });
let headerSlot = this.shadowRoot.querySelector("slot[name=header]");
let header = this.querySelector("header");
if (header) headerSlot.assign(header);
dai_zabzabElementInternals API
カスタム要素に隠れた意味を割り当て、アクセシビリティを促進し、フォームに完全に参加できるようにします。
this._internals = this.attachInternals();
this._internals.role = "progressbar";
dai_zabzabReference Target API
コンポーネントのID参照を、そのシャドウDOM内の要素（ARIA、ラベル、ポップオーバーなど）へ「リダイレクト」する方法。
this.attachShadow({
mode: "open",
referenceTarget: "real-input",
});
this.shadowRoot.innerHTML = `<input id="real-input">`;
:has-slotted
スロット要素にスロットされたノードが存在する場合にのみターゲットとするCSS疑似クラス。
slot[name=icon]:not(:has-slotted) + .icon-label {
display: none;
}
dai_zabzabfocusgroup attribute
フォーカス可能な要素群において、キーボードの矢印キーを使用したフォーカスナビゲーションを容易にする。
<div focusgroup="wrap horizontal">
<!-- child elements -->
</div>
dai_zabzabprefers-color-scheme
dai_zabzabprefers-contrast
dai_zabzabアクセシビリティテストツール一覧
dai_zabzabスクリーンリーダー
dai_zabzabFile System Access API
ユーザーのローカルデバイス上のファイルやディレクトリにアクセスし、更新可能な書き込み可能なファイルを作成する。
const handle = await window.showSaveFilePicker();
const writable = await handle.createWritable();
await writable.write("Hello, world!");
await writable.close();
dai_zabzabWeb Share API
ユーザーが選択した様々なターゲットにコンテンツを共有する仕組みを公開します。
navigator.share(shareData)
dai_zabzabshare_target manifest field
PWAがシステム共有ダイアログを介して他のアプリから共有されたデータ（テキスト、ファイル、URL）を受け取れるようにします。
dai_zabzabWebUSB API
USBデバイスと直接通信し、ドライバーやネイティブアプリなしでデータ交換を可能にします。
const device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] });
await device.open();
dai_zabzabSpeechRecognition
マイク入力をテキストに変換するAPI。
const rec = new SpeechRecognition();
rec.lang = "en-US";
rec.addEventListener("result", e => console.log(e.results[0][0].transcript));
rec.start();
dai_zabzabPaymentRequest API
ウェブサイトがブラウザのネイティブUIを使用して支払いを要求するための一貫性のある安全な方法を実現します。
const request = new PaymentRequest(
[{ supportedMethods: "basic-card" }],
{ total: { label: "Total", amount: { currency: "USD", value: "9.99" } } }
);
let response = await request.show();
response.complete("success"));
dai_zabzabWeb NFC
デバイスの内蔵NFCリーダーを使用して、NFCタグの読み取りと書き込みを行います。
const reader = new NDEFReader();
await reader.scan();
reader.onreading = e => console.log(e.message.records);