Allowing selectors (or finger printing) for direct CSS file path in CQ | Community
Skip to main content
R
rohitspathak123
Level 4
October 16, 2015
Solved

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

  • October 16, 2015
  • 3 replies
  • 1001 views

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.

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 smacdonald2008

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

3 replies

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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. 

R
rohitspathak123Author
Level 4
October 16, 2015

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.

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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

Terms & ConditionsAccessibility statement

Loading footer...