Themes and Channels ClientLib AEM

[maheshk11306154]

I wanted to have a separate css & js for each browser e.g:- ie6,ie7 etc.

Can that be done using the themes and channels ? 

Is there any documentation or example available ?

Thanks

Mahesh

[kautuk_sahni · Accepted solution]

It is not best practice to write a code browser specific. If browser version upgrades, or new browser get introduces, then you would need to again change your code.

All browsers are adopting current standers, the current standards validate your code (http://validator.w3.org/), and it you'll have to worry about far fewer cross-browser issues.

I do not know the direct way of achieving this in AEM, but it can be done by:-

1. Create a Java script/Jquery code,

like :- $.browser, It would return a object :- Object {chrome: true, version: "54.0.2840.71", webkit: true}

Now, you can check it in a condition and then apply CSS inside this.

2. Workaround :- http://stackoverflow.com/a/9851769/6433590

3. Workaround :- http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html#gref

Note:- If you have to detect browsers just to apply CSS, then you might want to rethink your CSS before going to browser-specific stylesheets. All it takes is for one browser to mimic another's user agent string, or a new version to be released, and everything breaks. Use the current standards and validate your code (http://validator.w3.org/), and you'll have to worry about far fewer cross-browser issues. Even just using <!--[if IE]><![endif]--> without a version number could break the layout in later versions.

I hope this would help you.

~kautuk

[smacdonald2008]

Agree with Kautuk - this is not best practice.