How to apply css logic

Question

I want different CSS for different browser.

For ex:-

i want the width to be 25.5% in chrome and 24.4% in IE. so what should I do

here is my html:-

<tr>
                <td id="flattdhist" runat="server" class="label" style="width: 25.5%; font-size: 120%;
                    font-family: Courier New; float:left;">
                    Flat status history
                </td>
            </tr>

Currently it is working fine for CHROME, but inIE its slightly getting disturbed. What should I do

http://stackoverflow.com/questions/4332117/how-to-write-specific-css-for-mozilla-chrome-and-ie — devpro, Jan 16 '16 at 06:33

score 0 · Accepted Answer · answered Jan 16 '16 at 06:25

You may need to create separate stylesheet and use conditional comments for each if you need to target specific IE version.

<!--[if IE]>
 <link rel="stylesheet" href="ForIEOnly.css">
<![endif]-->

Please refer: https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

score 0 · Answer 2 · edited May 23 '17 at 10:27

Detecting IE 11 is no longer supported by Microsoft via CSS. It might be better to detect if the feature you need is available.

For example you can detect if a browser can render HTML5 video:

if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}

Here are some reference links:

How do I detect the user’s browser and apply a specific CSS file?

https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way

score 0 · Answer 3 · answered Jan 16 '16 at 06:37

A pure css solution isn't available according to what i know, but if you want to use js you can do it

var curBrowser = navigator.userAgent.toLowerCase();
    if(curBrowser.indexOf('chrome') > 0)
         document.getElementByID("eleID").style.width = "25.5%";
    else if(curBrowser.indexOf('edge') > 0)
         document.getElementByID("eleID").style.width = "24.5%";
    else
         document.getElementByID("eleID").style.width = "23.5%";

something like this should be possible.

How to apply css logic

3 Answers3