When CSS that contains grid style rules are compacted, the compactor creates a space between the unit and the fr measure. For example: "2fr" becomes "2 fr".
I tried this again locally. While the escape sequence works (ie. "fr" units are preserved -- "5fr" remains as such and does not become "5 fr") whitespace is preserved. So if:
- you want to use "fr" units inline in <style> blocks
- and you add the delimiters around the <style> tag
- and you have not minified the CSS that goes in the <style> blocks beforehand
- then all whitespace will be preserved
... we can live with that, but I still think the issue should be corrected.
This is implemented in PageBuilder deployer and part of PageBuilder Fusion.
I tried this again locally. While the escape sequence works (ie. "fr" units are preserved -- "5fr" remains as such and does not become "5 fr") whitespace is preserved. So if:
- you want to use "fr" units inline in <style> blocks
- and you add the delimiters around the <style> tag
- and you have not minified the CSS that goes in the <style> blocks beforehand
- then all whitespace will be preserved
... we can live with that, but I still think the issue should be corrected.
You need to use the below escape sequence in the HTML markup, to surround the style blocks that you don't want compacted. I believe that this issue has been resolved in a support ticket: https://arcpublishing.atlassian.net/servicedesk/customer/portal/2/ACS-1518
Note that this CSS mangling only occurs for embedded <style>.foobar{}</style> blocks on the HTML page. Not for styles pulled in via <link> tags.
FR units are used for various CSS Grid properties. E.g.
.container { grid-template-columns: 1fr 2fr 3fr; }