Conditional CSS Statement

Question

A file / web page contents the following attached external cascading style sheets

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/a.css" rel="stylesheet" type="text/css" />
<link href="css/b.css" rel="stylesheet" type="text/css" />
<link href="css/c.css" rel="stylesheet" type="text/css" />
<link href="css/d.css" rel="stylesheet" type="text/css" />
</head>

If I want to use multiple browsers specific conditional statements for a.css only among all the style sheets, how the other style sheets like b.css, c.css and d.css should be placed withing the head tag?

Thanks,

Use conditional comments. Check similar problem here: stackoverflow.com/questions/3141992/… . Also here: stackoverflow.com/questions/414738/… — Dexter Huinda
– Dexter Huinda, Commented Jun 24, 2012 at 15:11

Klanto Aguntuk · Accepted Answer · 2012-06-24 20:31:38Z

The answer could be as simple as

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/a.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="/css/[email protected]" rel="stylesheet" type="text/css">
<![endif]-->
<link href="/css/[email protected]" media="screen and (-webkit-min-device-pixel-ratio:0)" rel="stylesheet" type="text/css" />
....and so on
// Other external css files shall go below this line within the head tag
<link href="css/b.css" rel="stylesheet" type="text/css" />
<link href="css/c.css" rel="stylesheet" type="text/css" />
<link href="css/d.css" rel="stylesheet" type="text/css" />
</head>

For some unknown reasons my browsers on local host were ignoring the other css files below the conditional comments which is not countable at all for the right answer.

BoltClock · Accepted Answer · 2012-06-24 20:34:13Z

0

Use conditional comments like so...

<!--if [browser-specific condition statement/s]>
<link href="css/a.css" rel="stylesheet" type="text/css" />
<![endif]-->

Inject the conditions as you require.

edited Jun 24, 2012 at 20:34

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Jun 24, 2012 at 15:42

Dexter Huinda

1,2221 gold badge7 silver badges9 bronze badges

4 Comments

Klanto Aguntuk Over a year ago

I know that. My question was where the other external css files go within the head tag?

Dexter Huinda Over a year ago

The answer is yes. Just inject the conditional comments, wrap whichever css you wanted to effect. Fyi, the conditional comments can be placed anywhere inside the whole HTML document.

Klanto Aguntuk Over a year ago

You don't read my question carefully before you make the first reasonable answer. Not even now. This conditional statement ignores the other css files. My question was how to confine the conditions within a.css only among different browsers that don't affect the other css files.

Dexter Huinda Over a year ago

Your question is actually vague, and needs a lot of improvement, be more technical. I will leave this question to the other users who have the greatest patience in the world.

Collectives™ on Stack Overflow

Conditional CSS Statement

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related