Clever Geek Handbook

Preliminary CSS CSS file is not supported in Firefox and Safari Mac

I've added rel = "preload" attribute 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 Safari or Firefox

+3


source to share


4 answers


For Firefox, it is only supported in Firefox 56 Night. It will depart on September 26, 2017 . You can download it from here .

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



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

+3


source


See if I can use .

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



So the expected behavior is expected.

+3


source


I can't think of anything more explanatory than the documentation itself. The caniuse.com site has http://caniuse.com/#feat=link-rel-preload and if you follow this and go to the w3c specs you will find this. https://w3c.github.io/preload/ , which clearly states that "this is work in progress and is subject to change without notice." Perhaps soon, when this "Draft" is improved, support will be added.

+1


source


I found perhaps a better solution - download two files as shown below: browsers that support preloading will use it as intended, and those that don't (like Firefox) will only use regular ones (second link). This solution does not need to be used onload="this.rel='stylesheet'"

as the style is used immediately after preloading:

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


source






More articles:


All Articles