Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

<link rel="expect">

link rel="expect" は特定の要素がDOMに存在するまでレンダリングをブロックし、重要なコンテンツの準備ができてから表示を開始します。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.expect
実験的
124
124
124
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<link rel="expect" href="#hero" blocking="render">
<!-- #hero要素がDOMに追加されるまでレンダリングをブロック -->
<section id="hero">
  <h1>Main Content</h1>
</section>

ライブデモ

Expectation hint

Describe rel=expect as a hint about the kind of content a link is expected to load.

プレビュー全画面表示

Experimental feature note

Treat rel=expect as an emerging hint rather than a broadly deployed production feature.

プレビュー全画面表示

Implementation advice

Keep ordinary navigation and loading correct even when experimental hints are ignored.

プレビュー全画面表示

実務での使いどころ

  • <link rel="expect"> の活用

    link rel=expect。レンダリングブロックの解除条件を指定するリソースヒント。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク