Skip to content
New issue

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

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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
Closed

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

ahmadnassri opened this issue Jan 24, 2012 · 8 comments
Labels
language: html type: bug

Comments

@ahmadnassri
Copy link

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.
@bitwiseman bitwiseman mentioned this issue Apr 23, 2013
Closed
@bitwiseman
Copy link
Member

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 mentioned this issue Jun 5, 2013
Closed
@jonschlinkert
Copy link
Contributor

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.

@ForbesLindesay
Copy link

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.

@jonschlinkert
Copy link
Contributor

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.

@bitwiseman
Copy link
Member

Sure. Please feel free to submit a fix. 😄

@jonschlinkert
Copy link
Contributor

feel free to fix your own software

@bitwiseman
Copy link
Member

👍 Your kind words and encouragement have moved me.

@jonschlinkert
Copy link
Contributor

lol thanks! much appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
language: html type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ahmadnassri @jonschlinkert @ForbesLindesay @bitwiseman