<link rel="expect">
link rel="expect" は特定の要素がDOMに存在するまでレンダリングをブロックし、重要なコンテンツの準備ができてから表示を開始します。
概要
link rel="expect" は特定の要素がDOMに存在するまでレンダリングをブロックし、重要なコンテンツの準備ができてから表示を開始します。
対応ブラウザ
デスクトップ
Chrome 124+
Edge 124+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 124+
Safari iOS 未対応
Firefox Android 未対応
基本構文
HTML
<link rel="expect" href="#hero" blocking="render">
<!-- #hero要素がDOMに追加されるまでレンダリングをブロック -->
<section id="hero">
<h1>メインコンテンツ</h1>
</section>実務での使いどころ
-
<link rel="expect"> の活用
link rel=expect。レンダリングブロックの解除条件を指定するリソースヒント。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。