发表新帖
发表新帖

Preload CSS file not supported on Firefox and Safari Mac

前端 未结
关注
7 1796
日久生厌
日久生厌 2020-12-16 14:23

I added the attribute rel=\"preload\" to all css links like this :
相关标签:
7条回答
  • 南笙
    2020-12-16 14:48

    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)
  • 忘掉有多难
    2020-12-16 14:50

    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)
  • 情歌与酒
    2020-12-16 14:59

    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" />';}?>

    0 讨论(0)
  • 自闭症患者
    2020-12-16 15:01

    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)
  • 隐瞒了意图╮
    2020-12-16 15:06

    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)
  • 南笙
    2020-12-16 15:11

    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)
 看不清?
提交回复
热议问题