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
  • 991 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
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

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
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. 

Terms & ConditionsAccessibility statement

Loading footer...