使用2018年全新的“HTML导入”草稿快速加载网页:将rel=“stylesheet”替换为rel=“import”

你不能简单地转换 stylesheet <link> 变成一个 import <link> 因为 <link rel="import"> 将只加载HTML文档,而不是CSS样式表。

<link rel="import" href="imported-styles.html" async>

因此,通过HTML导入导入的样式必须包含在元素中:

导入样式.html 以下内容:

<style> 
    //content of all.css
    ... 
</style>

一般使用标准 <link rel="stylesheet"> 以下内容:

导入样式.html 以下内容:

<link rel="stylesheet" type="text/css" href="all.css"/>
<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=etc'/>

注意,您应该使用 async 属性,如果不希望在处理主HTML文档的其余部分之前等待导入的文档加载。

到现在为止 only Chrome and Opera 正在本机实现HTML导入。其他浏览器供应商不打算实现它,所以您需要使用edge和firefox的polyfill。

这是一项非常先进的技术,所以服务器框架并不是很重要。

使用html导入的缺点是,在某些特殊情况下,polyfill实现的行为可能略有不同(大多数polyfill都是这样)。见 limitatons 多聚填料的。

HTML导入实际上被否决了,尽管它已经在Chrome中实现了。所以不要用它。

https://dev.to/nektro/the-downfall-of-html-imports-is-upon-us-to-me

类似的功能称为“html模块”将在未来推出,但即使是标准本身仍在github上讨论,因此我们需要很长时间才能使用它。

https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md

第一个问题

现在没有办法了。HTML导入是在其他HTML文档中包含和重用HTML文档的一种方法,请参见 HTML Imports 文件。

第二个问题

很难说什么时候 rel="import" 将广泛提供,但您可以轻松跟踪浏览器支持 我能用一下吗 网站 https://caniuse.com/#search=import ,它还显示要发布的下一个版本是否支持它。

第三个加分问题

rel=“导入” 是导入HTML文件。

rel="stylesheets" 是导入css文件。

你仍然需要使用 rel=“样式表” 加载你的css文件。