Can I include IE conditional comments inside an opening tag?

Question

Basically, I'd like to know if this code is okay,

<body id="some_id" <!--[if lt IE 7 ]>class="ie6"<![endif]--> >
</body>

RoToRa · Accepted Answer · 2011-02-23T13:23:28.883

5

No. HTML comments can't be inside a tag. Try:

<!--[if gte IE 7]>--> <body id="some_id"> <!--<![endif]-->
<!--[if lt IE 7]> <body id="some_id" class="ie6"> <![endif]-->

edited Feb 23 '11 at 13:23

answered Aug 20 '10 at 14:38

RoToRa

37,635
12
69
105

thanks, my trouble is that the body may or may not have an id depending on a server side script, looks like I'll have to find another solution – Aug 20 '10 at 14:49
1

@mjr why not let the server side script handle it then? – Pekka Aug 20 '10 at 14:51
ya ... I'm not familiar with browser sniffing on the server side – Aug 20 '10 at 14:54
Why would the fact may or may not have an id, influence on whether or not you can use Conditional Comments? – RoToRa Aug 22 '10 at 12:10
@Jean Paul: You are right, there is a syntax error. I'll correct it. – RoToRa Feb 23 '11 at 13:23

score 2 · Answer 2 · answered Aug 20 '10 at 14:41

2

No, and it's not necessary. Always give the class to the body element and leave the CSS .ie definition empty for all browsers but IE6:

.ie6 {
<!--[if lt IE 7]-->
    ... ugly ie6 hack ...
<!--[endif]-->
}
</style>
<body class="ie6">

answered Aug 20 '10 at 14:41

Aaron Digulla

321,842
108
597
820

good thought, but that limits me to one version of ie in the class If I wanted to add and ie7 or ie8 class in the future, I don't know if this would be the best solution – Aug 20 '10 at 14:48
Why? You can add as many classes to a single element as you need (separate them by space) or you could use `ie` as the generic class and then put a lot of `if`s inside of the CSS. – Aaron Digulla Aug 23 '10 at 07:48

score 1 · Answer 3 · answered Aug 20 '10 at 14:38

1

No — comments cannot be inserted inside tags.

answered Aug 20 '10 at 14:38

You

22,800
3
51
64

score 0 · Answer 4 · edited May 23 '17 at 12:15

No you can not, so you will have to repeat the tag and all its attributes.

A lot of people add the browser identifier class in the <html> tag. Using the body tag is also fine but I would use whichever tag has the least amount of characters in its attributes.

A wordpress 'body' tag may looks like this

<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

So you would put the class in the <html> tag so save repeating that long string.

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"<![endif]-->
<!--[if IE 7 ]>    <html class="ie7"<![endif]-->
<!--[if IE 8 ]>    <html class="ie8"<![endif]-->
<!--[if IE 9 ]>    <html class="ie9"<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
    <head>
    </head>
    <body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

A html tag may look like this.

<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">

In this case you might put the class in the <body> tag.

<!DOCTYPE html>
<html lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
    <head>
    </head>
    <!--[if lt IE 7 ]> <body class="ie6"><![endif]-->
    <!--[if IE 7 ]>    <body class="ie7"><![endif]-->
    <!--[if IE 8 ]>    <body class="ie8"><![endif]-->
    <!--[if IE 9 ]>    <body class="ie9"><![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

If I had something which left me not optio but to repeat a huge string multiple times, like this.

<!DOCTYPE html>
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

Then I would probably use javascript

<!DOCTYPE html>
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
<script>
    (function(){
        var d=document,
            h=d.documentElement,
            v = 3,
            p = d.createElement('p'),
            i = p.getElementsByTagName('i'),
            u;
            while (
                p.innerHTML =  '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                i[0]
            );
            h.className += (v > 4 ? ' ie'+v : '');
    })()
</script>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

This script is a modifed version of James Padolsey's script, which adds the class to the html tag.

Can I include IE conditional comments inside an opening tag?

4 Answers4