CODEWITHSUNDEEP
csshtmljspstyles
Geek
Geek

Reputation: 3329

Conditional code in CSS to differentiate browser

<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.

Upvotes: 0

Views: 95

Answers (3)

Awadhesh verma
Awadhesh verma

Reputation: 540

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/

Upvotes: 1

Muhammad Faizan Uddin
Muhammad Faizan Uddin

Reputation: 1367

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

Upvotes: 1

Jaxon
Jaxon

Reputation: 345

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

Upvotes: 2

Related Questions