Preload CSS file not supported on Firefox and Safa

2020-03-01 10:39发布

站内问答 / HTML/CSS
1717 6 5

I added the attribute rel="preload" to all css links like this : 

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

It works fine in Chrome but not in Safari or Firefox

6条回答
在下西门庆
2楼-- · 2020-03-01 11:00

I found a possibly best solution is to load two files as below - browsers that support preload will use it as intended and those that don't (like Firefox) will only use the regular (2nd link). This solution doesn't require using the onload="this.rel='stylesheet'" since the style is used right after the preload:

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

What I also discovered is a hacky alternative to the above could be including "rel" twice, like:

<link href="style.css" rel="stylesheet" rel="preload" as="style">
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2020-03-01 11:09

I can't think of something more explanatory than the documentation itself. On the caniuse.com site there is this http://caniuse.com/#feat=link-rel-preload and if you follow that and go to the w3c specifications you find this. https://w3c.github.io/preload/ where is clearly stated that "This is a work in progress and may change without any notices." Maybe soon when this "Draft" will be refined, support will be added.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
4楼-- · 2020-03-01 11:11

See can I use.

It is not supported in Firefox and will be added in the next release of Safari.

So what you are seeing is expected behaviour.

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2020-03-01 11:11

Reliably preload across browsers with loadCSS

One issue with preloading is that it is not supported by browsers like Firefox and Internet Explorer (as of Nov 2018). As a result, these browsers will not download the CSS file and this can result into serious display issues for your web-pages. This makes it critical to include a JavaScript polyfill for preload - loadCSS.

  • Download the loadCSS JavaScript file or simply copy it’s JS code from here.
  • Load the loadCSS polyfill wherever CSS stylesheet preload is performed:

<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>

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
6楼-- · 2020-03-01 11:11

This works <link rel="preload stylesheet" href="./style.css" as="style"> to instruct the browser to download key resources as soon as possible.

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
7楼-- · 2020-03-01 11:13

For Firefox, it's only supported in Firefox 56 Nightly. It will ship on September 26, 2017. You can download it from here.

Update: This feature is landed on FF 56 but removed in 57. Here is the reason:

This feature was available in Firefox 56, but only for cacheable resources. It has been disabled in Firefox 57 because of various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land in Firefox 59

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)