一个可以自动生成CSS样式前缀的脚本---Prefixfree.js

最新推荐文章于 2024-03-14 11:53:22 发布

原创最新推荐文章于 2024-03-14 11:53:22 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何通过合理放置样式表及使用特定工具来避免Flash of Unstyled Content (FOUC)现象，即页面加载过程中短暂出现样式混乱的问题。讨论了不同放置样式表位置的影响，并指出了现有解决方案的一些局限性。

首先给个链接：http://leaverou.github.io/prefixfree/ ；

使用：推荐直接在头部引用样式表之后引用该脚本文件，防止FOUC（文档样式短暂失效 Flash of Unstyled Content ；也就是浏览器会瞬间闪烁）

原因大致为：

	1、使用import方法导入样式表。
        2、将样式表放在页面底部
        3、有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂 的 花屏现象。

局限性：1、被@import的样式文件无效；2、跨域链接的样式表无效，除非是跨域资源共享的；3、在Chrome和Opera浏览器的本地环境下无前缀链接的样式文件无效；4、在IE和低于3.6版本的火狐下行内样式中无前缀的值无效，低于3.6版本的火狐下行内样式中无前缀的属性无效。

用于实际项目的话还是得考虑清楚其中的得失利弊。