Expand my Community achievements bar.

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

Themes and Channels ClientLib AEM

Avatar

Level 1

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

1 Accepted Solution

Avatar

Correct answer by
Administrator

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



Kautuk Sahni

View solution in original post

2 Replies

Avatar

Correct answer by
Administrator

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



Kautuk Sahni

Avatar

Level 10

Agree with Kautuk - this is not best practice.