Project

General

Profile

Download (1.99 KB)

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

Refer to multiple CSS files and have their content rendered inline in the <head> combined to a single style block. - Jan Loderhose, 2022-05-20 09:10

 
<!--
Refer to multiple CSS files and have their content rendered inline in the <head> combined to a single style block.
Existing attributes, such as "priority", work as before.
-->

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

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

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

/* example3.css END */
-->

<!--
/* example4.css BEGIN */
@media print {
.noprint {
display: none;
}
}
/* example4.css END */
-->


<!--
/* ViewHelpers BEGIN */

<f:asset.css identifier="example" src="/path-to/example.css" critical="true" concatenate="true" />
<f:asset.css identifier="example2" src="/path-to/example2.css" critical="true" concatenate="true" />
<f:asset.css identifier="example3" src="/path-to/example3.css" critical="true" concatenate="true" priority="true" />
<f:asset.css identifier="example4" src="/path-to/example4.css" critical="true" />

/* ViewHelpers END */
-->

<!-- RESULT -->
<!DOCTYPE html>
<html>
<head>
...
<!--
The content of the referenced CSS files is ordered according to the priority, concatenated
(if the attribute is set to true) and rendered in one single style block without further processing
of the CSS files content. Note that you only find the trailing empty line of example3.css in the
resulting style block. That's an example for "without further processing ot the CSS files content".
The handling of example4 shows that it is still possible to include CSS files without concatenation.
-->
<style>
:root {
--font-color: #333;
}

*,
*::before,
*::after {
box-sizing: border-box;
}
body {
color: var(--font-color);
}
</style>

<style>
@media print {
.noprint {
display: none;
}
}
</style>
...
</head>
...
</html>
(3-3/6)