Render inline styles AEM 6.x

3 replies
2355 views
Translate

Hi

How do I create inline styles from categories in AEM 6.0?

This is so I can create above the fold inline styles and call my external CSS file later down the page.

Thanks in advance

james.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

kautuk_sahniAccepted solution

Employee

Check this Link:- AEM Client Libraries explained by example

It talk about how to include CSS/JS in AEM template and components.

It is not recommended to add JS/CSS inline in AEM.

~kautuk

Kautuk Sahni

kautuk_sahniAccepted solution

Employee

Check this Link:- AEM Client Libraries explained by example

It talk about how to include CSS/JS in AEM template and components.

It is not recommended to add JS/CSS inline in AEM.

~kautuk

Translate

Kautuk Sahni

P

peter_at_nortonlifelock

New Participant

The accepted answer dismisses best practices. Per Google's performance recommendations, it is best to inline critical CSS for optimized initial render times, as the OP mentioned. See https://web.dev/render-blocking-resources/

To answer the question, HTL doesn't seem to have a way to output the raw text contents of a CSS resource, so it would have to be exposed to HTL via a Java resource resolver. If anyone knows of a better way, please reply. Thanks.

Translate

smacdonald2008

Level 10

IN AEM - when you load the page or component - the CSS referenced in the clientlib is loaded.

Translate

Sign up

Login with SSO

Login to the community

Login with SSO