Edited at

HTTPのLinkヘッダがFirefox以外全滅な件

More than 3 years have passed since last update.


概要

スタイルシートといえば<link>要素を使うのが一般的ですが,実はRFC的にはHTTPヘッダにLink:を使うことも出来るようになっています.ところがブラウザの対応状況が意外にも芳しく無く…

バグ報告もありますね.

rel=stylesheetだけならまだしも,rel=preloadな場合に正しく処理されていないとなるとかなり致命的な気がします.こういう自動プリロード付加処理をやろうとするとだいたいHTTPヘッダを使う方法になりがちなので.


検証用コード


test.css

h1 { color: red; }



test.php

<?php

$style = base64_encode('h2 { color: red; }');

header("Link: <test.css>; rel=stylesheet", false);
header("Link: <data:text/css;base64,$style>; rel=stylesheet", false);
header('Content-Type: text/html; charset=UTF-8');

?>
<!DOCTYPE html>
<title>Example</title>
<h1>HTTP URIのスタイルシート</h1>
<h2>DATA URIのスタイルシート</h2>


反映されればその文字列が赤くなります.


結果

HTTP URI
DATA URI

Firefox 45

Chrome 49

Safari 9

Internet Explorer 11

Edge 25


協力