SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member crumbsdm's Avatar
    Join Date
    Sep 2011
    Location
    UK
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Conditional markup blocks on the html tag

    I've seen a few times some conditional markup comments as so:

    HTML Code:
    <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
    <!--[if (gt IE 6)|!(IE)]> <!--><html lang="en" class="no-js"> <!--<![endif]-->
    
    -- head and body --
    
    </html>

    I can understand using conditional blocks to load different css or js libraries for targeted browsers, but what is the benefit in adding a different class name the <html> tag?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The benefit of using conditional statements is you can target IE using one stylesheet and JavaScript without worrying about extra syntax to do the same job, it has been long debated whether or not it's good or not for performance but personally i have never noticed any speed differences between using and not using them.

    Whether you use them or not is up to you but personally i always recommend them where i can as it really helps when trying to fix bugs in IE without worrying about updating up to 3 separate stylesheets depending on your target browsers.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    To me I see no benefit as if your page needs that level of targeting for every blasted version of IE, there is something DISASTROUSLY WRONG with how you wrote the page. (I'm the same way about conditional comments when used to load stylesheets!) It's massive bloat used as a crutch by people who can't be bothered to write pages properly or are bloating out the simplest pages with scripting and "gee ain't it neat" nonsense for no good reason.

    I cringe every time I see it almost as much as I cringe every time I see the HTML 5 lip service doctype... It's pretty much the mark of people who don't know how to write code properly and need to go back, and learn how HTML and CSS actually works. Really it seems to be for the same folks -- the ones who continue to vomit up HTML 3.2 and until recently were slapping a tranny doctype on it, and now slap a 5 on it while still having their head permanently wedged up 1997's backside.

    In other words, the same type of coding I expect from people who still don't use media targets, inline massive amounts of CSS in every page with the STYLE tag, don't know how to use heading tags properly with multiple H1 and skipping over heading levels, still using tables for layout on non-tabular data, still use tags like FONT and CENTER, and the dozen other things that basically say "Hey look, we're in transition from 1997 to 1998"

    See: People who let turdpress dictate their markup or think PHP-Nuke is the best thing since sliced bread.

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    if your page needs that level of targeting for every blasted version of IE, there is something DISASTROUSLY WRONG with how you wrote the page
    I can't say enough of much I agree with you (and I think "tranny doctype" is now a part of my everyday vocabulary), but the big counterpoint is that Paul Irish loves this technique. He argues that when you do something like this, you no longer need CSS hacks or conditional stylesheets.
    I'm the web overlord for Graphic Business Systems

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    you no longer need CSS hacks or conditional stylesheets.
    You still end up with the same number of conditional comments in the HTML. Where it makes the difference is that you only have one stylesheet instead of one for each alternative condition. That's what makes it easier to maintain.

    Of course now that IE6 is effectively dead and IE7 is rapidly dying it shouldn't even be necessary for much longer as IE8 supports as much CSS 2.1 as the other browsers do and all the CSS 3 are nice to have features that pages can still work without when viewed in browsers that don't support them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    but the big counterpoint is that Paul Irish loves this technique.
    ... and? given you're talking about the guy who's site is all in absurdly undersized px metric fonts in fixed width with non-existant and/or nonsensical heading orders, invalid/inaccessibly forms, saying he has no business writing HTML in the first place... Wasting bandwidth on massive comments and like most coders who are stuck in 1997 slaps DIV around everything for no good reason and pimping jquery like it's actually useful -- Excuse me if that doesn't blow my skirt up. Honestly having seen the things his name is attached to, I'm still trying to figure out how the blue blazes he became a "name" in this industry.... Gotta love the 255K of HTML to deliver 68k of plaintext. (basically doing 110k's job) with a hundred + K of scripting slapped on top for NOTHING that seems to be his bread and butter.

    Quote Originally Posted by sdleihssirhc View Post
    He argues that when you do something like this, you no longer need CSS hacks or conditional stylesheets.
    Which sounds all rosy until you realize it's more code, more code someplace that isn't cached across pages or able to be pre-fetched on firstload, and to be brutally frank (ME? Never...) sounds like the type of thing I expect from someone who builds sites using broken methodologies with CTC's in excess of three to one and then blames the browser for their own ineptitude or ignorance.

    It's WHY I don't like CC's -- it's stuff that has no business in the HTML in the first place! Using it on HTML and then claiming it saves you from using them? Shtup the snake oil, that's some real special kool-aid right there.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Actually, for laughs -- I'm going to use someone's page I just did a rewrite on as an example -- if I took just the IE specific code out, WITH it's comments:

    Code:
    	text-align:center; /* center #pageWrapper IE 5.x */
    * html body {
    	/* get :hover and :focus working in IE6- */
    	behavior:url(csshover3.htc);
    }
    	display:inline; /* prevent IE margin doubling */
    	display:inline; /* prevent IE margin doubling */
    	zoom:1; /* trip haslayout, fix IE after float bug */
    
    .
    304 bytes... The full blown "for every IE" nonsense I've been seeing lately?

    Code:
    <!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
    <!--[if IE 7]>         <html class="ie7"> <![endif]-->
    <!--[if IE 8]>         <html class="ie8"> <![endif]-->
    <!--[if gt IE 8]><!--> <html>         <!--<![endif]-->
    224 bytes in the markup where it ISN'T CACHED ACROSS PAGES, and I'd STILL have to declare all those properties someplace! Meanwhile if you're talking for scripting -- that's browser sniffing instead of capabilities detection -- which just means somebody doesn't know how to write javascript.

    Snake oil...

    Meanwhile *OH GODS NO!!!* NOT one text-align, display:inline on two floated elements and zoom:1 to fix positioning of a few things all the way back to IE 5.x!!! *WAH WAH WAH*


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •