Project

General

Profile

Download (1.37 KB)

Feature #97652 » f_asset-css-inline-and-external-poc.html

Refer to multiple CSS files stored locally and external. - Jan Loderhose, 2022-05-20 09:10

 
<!--
Refer to multiple CSS files stored locally and external.
-->


<!--
/* example.css BEGIN */
:root {
--font-color: #333;
}

*,
*::before,
*::after {
box-sizing: border-box;
}
/* example.css END */
-->

<!--
/* example2.css BEGIN */
body {
color: var(--font-color);
}
/* example2.css END */
-->


<!--
/* ViewHelper BEGIN */
<f:asset.css identifier="normalize" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css" critical="true" />
<f:asset.css identifier="example" href="/path-to/example.css" critical="true" />
<f:asset.css identifier="example2" href="path-to/example2.css" cricital="true" />
<f:asset.css identifier="some-crazy-stuff-in-the-footer-only" href="https://some-cdn/crazy-stuff.css" />
/* ViewHelper END */
-->

<!-- RESULT -->
<!DOCTYPE html>
<html>

<head>
...
<!--
The content of the referenced CSS files is rendered in one style block per ViewHelper instance without
further processing of the CSS files content. This also aplies to files included externally.
-->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* and so on and so forth */
:root {
--font-color: #333;
}

*,
*::before,
*::after {
box-sizing: border-box;
}
</style>
<link rel="stylesheet" href="https://some-cdn/crazy-stuff.css">
...
</head>
...

</html>
(1-1/6)