CODEWITHSUNDEEP
cssinternet-explorergoogle-chromefirefox
Mohammad Kermani
Mohammad Kermani

Reputation: 5426

How to write css rule that run with a special browser?

Some browser has problem with sizing and when we design a template, that template run with Firefox ok, but when we use IE to open it, sizing has problem.

How can I write an CSS order to run with an special type of browser:

example:

div{
 width:500px;
 /*I want write a rule that the div's width be 400px in IE, or be 100 in Firefox, How?/
 }

Upvotes: 1

Views: 143

Answers (3)

4dgaurav
4dgaurav

Reputation: 11496

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

Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:

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

Detecting minor versions of IE 5 is a bit more tricky. The moment you specify a minor version, you are expected to get the whole version number correct. For example, to detect the release build of IE 5.5, you will need the following code:

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

The test will fail if your visitor has a version of IE 5.5 that not have that exact version number (for example, if he/she has updated IE 5.5 with one of the service packs).

To make life easier for webmasters who need to test for a whole range of IE versions, you can use the comparison operators "lt" (less than), "lte" (less than or equal), "gt" (greater than), and "gte" (greater than or equal).

For example, to test for all versions of IE (that support the conditional comments) greater than or equal to version 6, you can use

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

The above code examples work because a normal browser sees the entire block as an HTML comment since they are enclosed within "". IE 5 to IE 9 will however attempt to parse the block to see if it has instructions specific to it. As mentioned before, IE 10 will behave like a normal browser and ignore the comment.

You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:

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

refer

To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following @media block:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* all your css here */
}

Upvotes: 3

omkar khade
omkar khade

Reputation: 55

try this for all browsers

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}


/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }


/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}

Upvotes: 3

Mirage
Mirage

Reputation: 989

You can create an extra stylesheet for IE that overrides your standard style.

Place this in your <head> section underneath your regular style.css:

    <!-- IE8 and lower CSS fix -->
    <!--[if lt IE 9]> 
        <link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
    <![endif]-->

And within ie8-and-down.css you can place the following CSS:

    div {
            width: 400px;
    }

Is this what you were looking for?

Upvotes: 1

Related Questions