Conditional code in CSS to differentiate browser

Question

<form:form...>
<DIV class="outer-left-bm">Location:&nbsp;</DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Name:&nbsp;</DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>
</form:form>

DIV.outer-left-bm {
    width:49%;
    display: inline-block;
    min-height: 0;
    border: 1px;
    text-align: right;
    margin-bottom: 8px;
}
DIV.outer-right-bm {
    width: 50%;
    display: inline-block;
        min-height: 0;
    border: 1px;
    text-align: left;
    margin-bottom: 8px;
}

I have a property like above defined in CSS file and used in HTML/jsp. Here, i want to use the display property as inline or inline-block based on the users browser. if IE(5-7) 'display: inline;' else 'display: inline-block;' I want to do the conditional code in css rather than controlling them in html.

Jaxon · Accepted Answer · 2016-12-20 05:04:59Z

2

Perhaps you can use conditional logic in your HTML to include browser specific CSS files.

Example:

    <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="/my/style/sheet/style.css">
    <![endif]-->

Unfortunately there is no conditional logic for browsers in standard CSS3.

You can also checkout html5shiv and Modernisr to help deal with old browsers/IE

answered Dec 20, 2016 at 5:04

Jaxon

3451 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Faizan Uddin · Accepted Answer · 2016-12-20 05:40:50Z

1

The vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) are used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

This allows properties to be set browser specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for.

Below are the references:

1) WebKit extensions

2) Mozilla CSS Extensions

answered Dec 20, 2016 at 5:40

Muhammad Faizan Uddin

1,37713 silver badges29 bronze badges

Comments

Awadhesh verma · Accepted Answer · 2016-12-20 05:44:51Z

1

You can use conditional logic in your specific CSS files.

Target IE 5 ONLY

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

For More Info: You can see this url https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

answered Dec 20, 2016 at 5:44

Awadhesh verma

5404 silver badges10 bronze badges

Collectives™ on Stack Overflow

Conditional code in CSS to differentiate browser

3 Answers 3

Comments

Comments

You can use conditional logic in your specific CSS files.

Target IE 5 ONLY

Target IE 6 ONLY

Target IE 7 ONLY

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

You can use conditional logic in your specific CSS files.

Target IE 5 ONLY

Target IE 6 ONLY

Target IE 7 ONLY

Comments

Your Answer

Sign up or log in

Post as a guest

Related