htmlinternet-explorerconditional-comments

What is the purpose of the extra <!--> in some IE conditional comments?


In the latest version of WordPress, there is a section of the page with the following code:

<!--[if lte IE 8]>
<script type="text/javascript">
    document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript">
    (function() {
        var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

        request = true;

        b[c] = b[c].replace( rcs, ' ' );

        b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    }());
</script>
<!--<![endif]-->

My question is this: Why is it that the IE9 comment has an extra <!--> but the IE8 one doesn't? What is the difference between both of the if conditions? I have a PHP-based HTML Minifier script which I'm debugging for, and I need to know the meaning of that extra snippet to make the parser accurate.


Solution

  • Study how the code is highlighted within your question. Notice that the IE9 portion is highlighted normally, rather than as one giant comment like the IE8 portion.

    This is how non-IE browsers as well as IE9 and later see the IE9 portion. The <!--> bits are there to terminate the IE9 conditional comments so that non-IE browsers will see the script element along with the rest of the markup and use it, along with IE9 and later, which use it because they understand and match the condition. In other words, the <!--> bits are there for non-IE browsers as well as IE10 and later which don't support conditional comments. The behavior of IE9 and earlier is not affected; the older versions will respect the conditional comments as normal.

    Without them, the markup will look like this:

    <!--[if lte IE 8]>
    <script type="text/javascript">
        document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
    </script>
    <![endif]-->
    <!--[if gte IE 9]>
    <script type="text/javascript">
        (function() {
            var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
    
            request = true;
    
            b[c] = b[c].replace( rcs, ' ' );
    
            b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
        }());
    </script>
    <![endif]-->
    

    ... which renders the entire chunk of code invisible to non-IE browsers, because it's seen as one giant comment.