Render inline styles AEM 6.x | Community
Skip to main content
jamesm85017267
jamesm85017267
June 16, 2017
Solved

Render inline styles AEM 6.x

  • June 16, 2017
  • 2 replies
  • 2342 views

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.
    Best answer by kautuk_sahni

    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

    2 replies

    smacdonald2008
    smacdonald2008
    June 19, 2017

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

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    June 23, 2017

    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
    P
    peter_at_nortonlifelock
    November 9, 2021

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...