Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Allowing selectors (or finger printing) for direct CSS file path in CQ

Avatar

Level 4

Hi,

We are managing CSS via clientlib.

For example:
/static/mysite/global/css/css1.css
/static/mysite/global/css/css2.css
/static/mysite/global/css/css3.css
/static/mysite/global/css.txt

So when I say http://localhost:4502/static/mysite/global.<finger printing here>.css  (like global.20152701.css) its working well and CQ is able to resolve it back to /static/mysite/global.css

But when I try to figerprint direct CSS file then it gives for 404. Is there any way I can enable finger printing / selector on direct CSS paths too

http://localhost:4502//static/mysite/global/css/css3.<finger printing here>.css  (like css3.2015042701.css)

Is there any CQ setting i have to do here. I have a special requirement where I need to access this CSS directly instead of via clientlib method.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Best practice for CSS and AEM is making use of ClientLibs.

http://docs.adobe.com/docs/en/cq/5-6-1/developing/clientlibs.html

When a ClientLibs folder is setup property - CQ can resolve CSS styles that are defined in a client libs. So in your above example - if global is the clientlibs folder, you are on the correct path. That is  - it's best practice to place the CSS files in this location.  Assuming you define this style:

.header {
 position: relative;
 border-top: solid 6px white;
 padding: 10px 0 10px 0;
 margin-bottom: 20px;
}

You can access this style in your component. ie -- 

   <div class="wrapper">
    <div class="header">

............

What benefit do you have in accessing CSS directly as opposed to using clientlibs?  

More information about using CQ:INCLUDECLIENTLIB in your code:

https://docs.adobe.com/docs/en/cq/5-6/howto/taglib.html

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

Best practice for CSS and AEM is making use of ClientLibs.

http://docs.adobe.com/docs/en/cq/5-6-1/developing/clientlibs.html

When a ClientLibs folder is setup property - CQ can resolve CSS styles that are defined in a client libs. So in your above example - if global is the clientlibs folder, you are on the correct path. That is  - it's best practice to place the CSS files in this location.  Assuming you define this style:

.header {
 position: relative;
 border-top: solid 6px white;
 padding: 10px 0 10px 0;
 margin-bottom: 20px;
}

You can access this style in your component. ie -- 

   <div class="wrapper">
    <div class="header">

............

What benefit do you have in accessing CSS directly as opposed to using clientlibs?  

More information about using CQ:INCLUDECLIENTLIB in your code:

https://docs.adobe.com/docs/en/cq/5-6/howto/taglib.html

Avatar

Level 4

Hi Scott,

Yes I will go via clientlib appraoch which I have been doing for this project. This requirement is one off where I need to access it directly. Is there any way to allow finger prnting within CQ for direct CSS access.

Avatar

Level 10

I will look for the best way to use CSS without using ClientLibs - i have always used clientlibs - so this is a use case that i have not performed before.