web-dev-qa-db-ja.com

プリロードCSSファイルはFirefoxおよびSafari Macではサポートされていません

このようにすべてのcssリンクに属性rel = "preload"を追加しました。

   <link rel='preload' onload='this.rel="stylesheet"' as='style' 
id='reworldmedia-style-css'  href='style.css' type='text/css' media='all' 
/>

Chromeでは正常に機能しますが、SafariまたはFirefoxでは機能しません

cssfirefoxsafaripreload
12
1616

Firefoxの場合、これは Firefox 56 Nightlyでのみサポートされます。 2017年9月26日 に発送されます。 こちら からダウンロードできます。

更新：この機能はFF 56に導入されましたが、57で削除されました。 ここ が理由です：

この機能はFirefox 56で利用できましたが、キャッシュ可能なリソースに対してのみでした。さまざまなWeb互換性の問題（たとえば、バグ1405761）のため、Firefox 57では無効になっています。キャッシュ不可のリソースで機能する改善されたバージョンは、Firefox 59にリリースされる予定です。

3
Sevban Öztürk

使用できます を参照してください。

Firefoxではサポートされておらず、Safariの次のリリースで追加される予定です。

だからあなたが見ているものは予想される行動です。

3
Quentin

LoadCSSを使用してブラウザー間で確実にプリロードする

プリロードの1つの問題は、FirefoxやInternet Explorerなどのブラウザーではサポートされていないことです（2018年11月現在）。その結果、これらのブラウザーはCSSファイルをダウンロードしないため、Webページの表示に深刻な問題が発生する可能性があります。これにより、プリロード用のJavaScriptポリフィルを含めることが重要になります- loadCSS 。

  • LoadCSS JavaScriptファイルをダウンロードするか、ここからJSコードをコピーします。
  • CSSスタイルシートのプリロードが実行される場所にloadCSSポリフィルをロードします。
<style>
[Your critical CSS goes here]
</style>


<!– Reliably defer loading of non-critical CSS with loadCSS–>
<link rel=“preload” href=”[yourcssfile]” as=“style” onload=“this.onload=null; this.rel=‘stylesheet’”>
<noscript><link rel=“stylesheet” href=”[yourcssfile]” ></noscript>



<!– Inline the loadCSS preload polyfill code or load it via external JS file–>
<script src=“./cssrelpreload.js”></script>
1
Javed Khan

ドキュメンテーション自体よりも説明的なものは考えられません。 caniuse.comサイトには、これがあります http://caniuse.com/#feat=link-rel-preload に従ってください。これに従って、w3c仕様にアクセスすると、これが見つかります。 https://w3c.github.io/preload/ 「これは進行中の作業であり、予告なしに変更される可能性があります」と明記されています。この「ドラフト」が洗練されるとすぐに、サポートが追加されます。

1
Dinca Adrian

おそらく最善の解決策は、以下のように2つのファイルをロードすることです。プリロードをサポートするブラウザーは、意図したとおりにそれを使用し、そうでないもの（Firefoxなど）は、通常の（2番目のリンク）のみを使用します。このソリューションでは、プリロードの直後にスタイルが使用されるため、onload="this.rel='stylesheet'"を使用する必要はありません。

<head>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
0
Tom

これは機能します<link rel="preload stylesheet" href="./style.css" as="style">は、主要なリソースをできるだけ早くダウンロードするようブラウザに指示します。

0
Camilo.t