Project

General

Profile

Download (1.23 KB)

Feature #97652 » f_asset-css-single-inline-only-poc.html

Refer to a CSS file and have its content rendern inline in the <head> one by one. - Jan Loderhose, 2022-05-20 09:10

 
<!--
Refer to a CSS file and have its content rendern inline in the <head>.
-->


<!--
/* 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="example" href="/path-to/example.css" critical="true" />
<f:asset.css identifier="example2" href="path-to/example2.css" cricital="true" />
/* 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.
(It does not really make sense in real life because a single style block is best for performance and efficiency,
but it allows maximum flexibility for every thinkable need which should be one major aspect of TYPO3.)
-->
<style>
:root {
--font-color: #333;
}

*,
*::before,
*::after {
box-sizing: border-box;
}
</style>

<style>
body {
color: var(--font-color);
}
</style>
...
</head>
...

</html>
(2-2/6)