CODEWITHSUNDEEP
cssfirefoxsafaripreload
Afaf
Afaf

Reputation: 654

Preload CSS file not supported on Firefox and Safari Mac

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

Upvotes: 17

Views: 14554

Answers (9)

Sevban &#214;zt&#252;rk
Sevban &#214;zt&#252;rk

Reputation: 1976

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

Update 2: This feature is now supported in Firefox.

Upvotes: 8

Yawar Abbas
Yawar Abbas

Reputation: 11

As of November 2021. I've used the following and it works on Firefox/Safari/Chrome and other major browsers:

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

You don't need to double the "rel" or to use two for the same CSS file.

Upvotes: 1

Rafał Cz.
Rafał Cz.

Reputation: 787

Best solution for 2021:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Why is this best option?

Currently (in 2021) all modern browsers support preload tag but if someone visits your page with device using not updated browser, IE or some native mobile browser like Samsung Mobile your page will still look bad or wont be styled at all. On the other hand gain in page load time (and pagespeed score) using preload is too big to give it up just to support less than 1% of devices.

Top voted answer using 2x rel tag still negatively affects FCP render time (you can test that with chrome devtools performance tab). Using media attribute switch we get solution that doesnt block page render and works for older browsers.

Fetch priority

Its important to say that 'preload' tag fetches non-critical css with highest priority which can deprioritize other important downloads, but if in your case you want priority provided with preload you can use this workaround:

<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Upvotes: 0

Abhishek Jaiswal
Abhishek Jaiswal

Reputation: 1

I have soulution this is works and best for website speed This is for normal code for every browser put as a default <link rel="stylesheet" rel="preload" href="css/xyz.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <noscript><link rel="stylesheet" href="css/main.css" /></noscript> and for mozilla firefox use this, when file run in mozilla its show this code otherwise its show default css code <?php if(isset($_SERVER['HTTP_USER_AGENT'])){$agent = $_SERVER['HTTP_USER_AGENT'];} if(strlen(strstr($agent,"Firefox")) > 0 ){$browser = 'firefox';} if($browser=='firefox'){echo '<link rel="stylesheet" href="css/xyz.css" />';}?>

Upvotes: 0

Camilo.t
Camilo.t

Reputation: 9

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

Upvotes: 0

Tomasz
Tomasz

Reputation: 1368

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

Upvotes: 36

Javed Khan
Javed Khan

Reputation: 119

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>

Upvotes: 1

Dinca Adrian
Dinca Adrian

Reputation: 1230

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.

Upvotes: 1

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 4

Related Questions