How can we render selective css for different browsers like ie8, ie9, ie10, chrome/mozilla

[mayurs7918097]

HI ,

Can anyone help me in rendering selective css files for ie8, ie9, ie10, chrome/mozilla if we have different files for that like app_ie8.css, app_ie9.css, app_ie10.css and app.css ?

Thanks,

Mayur

[kautuk_sahni]

Hi,

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