README

这个非常简单的包提供了一种异步加载 CSS 文件的方法。您可以将 CSS 分割成单独的文件以加快您网站的加载速度（例如，加载很可能是低于卷的 CSS）或者仅在功能存在时才需要。

它提供了一个“DeferCss” AFX-atom，带有预加载漏洞，如这里所述
https://www.filamentgroup.com/lab/load-css-simpler/

用法

只需使用原子 TechDivision.DeferCss:Atom.DeferCss 就可以简单地向您的样式表中添加样式表。

prototype(My.Package:Page) {  
    head.stylesheets.myAwesomeStylesheet < TechDivision.DeferCss:Atom.DeferCss {  
        href.path = 'resource://My.Package/Public/Css/MyAwesomeStyleSheet.css'  
    }
}

您还可以添加一个功能切换，以便在功能存在时才加载特定的样式表。现在您可以分割 CSS 成干净的模块，这些模块只能被加载。

prototype(My.Package:Page) {  
    head.stylesheets.myAwesomeStylesheet < TechDivision.DeferCss:Atom.DeferCss {  
        href.path = 'resource://My.Package/Public/Css/MyAwesomeStyleSheet.css'  
        @if.awesomeFeatureIsPresent = ${q(node).children('main').find("[instanceof My.Package:MyAwesomeNodeType]")}
    }
}

或者您可以在页面上添加一个 ContentCollection，其中包含

结果

这就是您的样式表将被包含的方式

<link href="/_Resources/Static/My.Package/Css/MyAwesomeStyleSheet.css" rel="preload" type="text/css" as="style" />
<link href="/_Resources/Static/My.Package/Css/MyAwesomeStyleSheet.css" rel="stylesheet" media="print" onload="this.media='all';" />
<noscript>
    <link href="/_Resources/Static/My.Package/Css/MyAwesomeStyleSheet.css" rel="stylesheet" media="all" />
</noscript>

说明
第一个链接/预加载标签使用现代浏览器预加载功能以优先加载。
第二个链接标签是实际加载为“打印”的样式表，但一旦加载成功，它将被加载为样式表。
第三个 noscript 标签是回退（如果禁用 JavaScript）。

同步样式表原子

为了功能完整性，我们还添加了一个样式表标签 TechDivision.DeferCss:Atom.StylesheetTag，其用法类似

prototype(My.Package:Page) {  
    head.stylesheets.myAwesomeStylesheet < TechDivision.DeferCss:Atom.StylesheetTag {  
        href.path = 'resource://My.Package/Public/Css/MyAwesomeStyleSheet.css'  
    }
}

它输出

<link href="/_Resources/Static/My.Package/Css/MyAwesomeStyleSheet.css" rel="stylesheet" media="all" />

贡献

我们将很高兴接受拉取请求！