Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

IE conditional HTML comments don't play well with the rest of the document #91

Closed
ahmadnassri opened this Issue Jan 24, 2012 · 8 comments

Comments

Projects
None yet
4 participants

using the style_html function with a document that starts with:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>

the entire indentation of the document is thrown off because of the IE conditional comments at the beginning of the file ...
tried using the unformatted option ['!--[if lt IE 7]', '!--[if IE 7]', '!--[if IE 8]', '!--[if gt IE 8]', '![endif]--', '!--'] but it breaks the entire styling.

Contributor

bitwiseman commented Apr 23, 2013

Using index.html from jsbeautifier.org as a test, the following misformatting occurs in conditional html comments:

Input:

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-us" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-us" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-us" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en-us"><!--<![endif]-->

Output:

<!DOCTYPE html>
<!--[if lt IE 7]>
    <html lang="en-us" class="ie6">
    <![endif]-->
    <!--[if IE 7]>
        <html lang="en-us" class="ie7">
        <![endif]-->
        <!--[if IE 8]>
            <html lang="en-us" class="ie8">
            <![endif]-->
            <!--[if gt IE 8]>
                <!-->
                <html lang="en-us">
                <!--<![endif]-->

@jonschlinkert jonschlinkert referenced this issue in jonschlinkert/grunt-prettify Jun 5, 2013

Closed

Wrong indentation when using conditional comments #2

Contributor

jonschlinkert commented Jun 5, 2013

I created a Grunt.js plugin to beautify HTML, https://github.com/jonschlinkert/grunt-prettify, we've also noticed this issue. The problem, IMHO, is that since the output formatting for conditional comments looks so bad AND since it's at the very top of the page, it's the very first thing you see when you look at a "beautified" page. So this is a deterrent from using this at all for beautification.

I think the real solution would be to kill that HTML boilerplate with the crazy conditional tags. I don't know anyone who actually does that in production.

It should be moderately fixable though.

Contributor

jonschlinkert commented Jun 5, 2013

Lol yeah, true enough. However:

  1. I think HTML boilerplate conditional tags are just happened to be the most convenient example for the problem, but they certainly aren't the only use case for comments in the head...
  2. Although this was the focus example of the OP, comments being poorly formatted in the output isn't relegated to only conditional tags or only to the head of the document. That just happens to be where it's most immediately obvious. No matter where you put block comments, they throw a wrench into the ouput.
  3. It's probably best not to base this Issue on who you know and whether or not they use HTML boilerplate's crazy conditional tags in production ;-)

I'm thinking this still needs to be solved.

Contributor

bitwiseman commented Jun 5, 2013

Sure. Please feel free to submit a fix. 😄

Contributor

jonschlinkert commented Jun 5, 2013

feel free to fix your own software

Contributor

bitwiseman commented Jun 6, 2013

👍 Your kind words and encouragement have moved me.

@bitwiseman bitwiseman closed this in 75cccc4 Jun 6, 2013

Contributor

jonschlinkert commented Jun 6, 2013

lol thanks! much appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment