HTML5; js shiv; MS conditionals

Get Started
1

Greetings from a sweltering Bangkok.

Convention dictates that to create the new elements in HTML5 for IE users we must use the JS “shiv”.

I have a simple question that you may be able to answer.

It concerns a recent and very popular article entitled 25 ultra modern websites. Out of these 25 “ultra modern websites”, a design of mine called Little Coogie (completed November 2009) is ranked at number 15.

This design has generated much feedback. In particular, people have noted that instead of using the “shiv”, I have used MS conditionals to create the new elements in order that things display properly for IE users without js-enabled devices.

People have asked if this technique is mine. In other words, am I the owner of it. I don’t know. I have looked through the two main HTML5 reference sites, HTML5Gallery and [URL=“http://101besthtml5sites.com/”]101besthtml5sites, but I find no evidence that anyone else is doing what I’m doing.

So, does anyone on Sitepoint know if other HTML5 designers are (for the purpose of IE) using a sort of non-shiv configuration based on MS conditionals that pre-dates November 2009.

Perhaps this a minor point. Very minor, in fact. But I am nonetheless keen to know the answer.

2

The technique being used is where IE conditionals are used to add CSS classes for IE.


<!--[if IE]><div class="header"><![endif] -->

This also results in a corresponding duplication of CSS selectors.

As such, the technique is severely frowned upon.

3

If you look at the CSS for the site in question you’ll notice that my “severely frowned upon … duplication of CSS selectors” amounts to this…

HEADER, .header{}
NAV, .nav{}
FOOTER, .footer{}

As I said, the “standard” alternative is to generate the new elements in IE using JS.

So what’s better – to rely on JS for presentation, or to use a “severely frowned upon” technique that requires an extra second or two of coding time.

I’m grateful for your reply, but with respect it’s clear to me that you don’t fully understand the issue. To help, take a look at these two HTML5 pages…

http://www.apple.com/safari/
http://www.liferay.com/

View them in IE. Look at them with JS; then look at them without JS.

Notice anything?

Admittedly the first example isn’t too bad, but the second one is a mess.

In fact, it’s enough to make anyone … frown.

4

To summarise, there are two different techniques that are under discussion.

  1. js shiv where scripting teaches IE how to handle HTML5 tags
  2. manually add extra tags around every HTML5 element so that styles can be applied to those IE-specific tags instead.

Even though the second technique is better in a non-scripting environment, I really do disagree with applying extra additional code for each and every occurrence of HTML5 tags.


<header> 
<!--[if IE]><div class="header"><![endif] -->	
	<h1><span>Little Coogie</span></h1> 
<!--[if IE]></div><![endif] -->	
</header>

I don’t want to do that to each and every use of an HTML5 tag.

XHTML with IE taught us that trying to use XHTML while making it compatible with HTML, ended up killing XHTML because while doing that, it wasn’t possible to achieve any of the other benefits of XHTML.

There is a third alternative, and that is to remain with the HTML4 code from the second technique, without the HTML5 tags.


<div class="header">
	<h1><span>Little Coogie</span></h1> 
</div>

When the non-scripting IE audience using IE8 or less gets small enough (in 5 to 10 years) to not worry about, it’s then a simple grep to change <div class=“header”> into <header>

5

Mmm, seems that you still don’t fully understand things. Allow me to guide you down the path to wisdom.

Point 1.

On most pages there will be a HEADER tag, a NAV tag, a FOOTER tag, possibly a few SECTION tags, and maybe the odd ASIDE tag or two. Creating the MS conditionals for these tags takes at most a minute or two. Most will be recurring tags (ie, they’ll be duplicated from one page to the next), and so can be generated on the inner pages via a PHP “include”. Not exactly hard work, is it?

Fact is, unlike any other HTML5 designer I’m aware of, my sites display exactly as they should in all major browsers regardless of whether or not JS is enabled.

This is achieved by spending an extra second or two coding duplicated and “severely frowned upon” CSS selectors AND adding the additional HTML code that you “really do disagree with”.

Point 2.

Yes, it is possible to achieve identical or near identical results in HTML4. And yes, HTML4 is a lot more convenient.

Problem is, HTML4 is yesterday’s new. It’s old hat. It’s been and gone.

If you’re a website designer using HTML4 then you’re just, well, a website designer. And the sites you make are just … sites.

But if you switch to HTML5, everything changes. You’re now a “cutting-edge” website designer, and the work you produce is “ultra modern”. If you have any doubts about this, look again at that article I referenced in my first post.

It’s all about credibility. And credibility (in many cases) equates directly to money. Play the system; use it to your own advantage; use it to make the green.

Five years ago CSS was cutting edge. So I learned it. That took a week. Then I learned Photoshop. That took two weeks. Then I made a Zen Garden design. That took 8 days. Then I submitted it. Then it got accepted.

The day before it got accepted I was a nobody with a Geocities website I’d made using MS Word. The following day, I was a CSS Expert. And guess what, I got the green. In simple English, I played the system.

Five years from now there’ll be a new technology. It’ll be called BUM. It’ll be ultra cool and seriously “in”. Articles will be written about BUM websites made by cutting-edge BUM website designers. These articles will be blogged, syndicated and tweeted.

And when that happens, I personally will switch to BUM. And once again I’ll be in the news. Once again I will have played the system. And, all being well, I’ll also be pulling in the green.

6

This is where I feel the fundamental difference is. When you code HTML5 with the added backwards-compatibility code for IE, you are now restricted to using only the the parts of HTML5 that can be made to work in some other way in IE.

In other words, all of the advanced capabilities of HTML5 are lost to you, because you cannot make them work similarly in IE.

The only way to achieve the true power of HTML5 is by accepting that some users will be lost along the way.

I admire your efforts and intentions to provide full compatibility to no-script IE users, but you need to accept that there are some inherent limitations along the way, that apply equally to the parts of HTML5 that can and can’t be used, and in the extra weight that’s added to the code.

Some of these limitations are acceptable to some people, while others desire a rethink about the ways things are done.

7

90% of web pages are still using HTML 3.2 and haven’t finished upgrading to HTML 4 yet. So HTML 4 hasn’t been and gone. It is after all the current standard and will be for a long time to come.

If we are lucky the web will have finished upgrading to HTML 4 by about 2025 (around the same time that HTML 5 is finalized).

Until then there will be a steady progression toward sites using HTML 4. Since HTML 5 is still a moving target (the code you add to your page today may not exist in HTML 5 next week). So it is only really useful for where you know all the browsers that matter support the code and you are happy to rewrite the page if the tags you are currently using are dropped before HTML 5 is finished.

8

Bravo. But all I’m doing, in essence, is adhering to Sitepoint’s first commandment: “Thou shalt not rely on JS for presentation”. In the context of HTML5, though, it seems to me that all the other designers out there are reading a different bible.

You also say “When you code HTML5 with the added backwards-compatibility code for IE, you are now restricted to using only the the parts of HTML5 that can be made to work in some other way in IE.”

No. I could still use a CANVAS tag for FF/Chrome/Safari, and serve something different to IE. That said, I can’t think of a good reason why AT PRESENT that might be necessary.

9

Allow me to guide you down the path to wisdom.

The Buddha said enlightenment was pretty hard for us normal people.

Fact is, unlike any other HTML5 designer I’m aware of, my sites display exactly as they should in all major browsers regardless of whether or not JS is enabled.

As a non-js surfer, I like this idea. That it requires code duplication, grates against the code minimalist in me.

Problem is, HTML4 is yesterday’s new. It’s old hat. It’s been and gone.

If you’re a website designer using HTML4 then you’re just, well, a website designer. And the sites you make are just … sites.

But if you switch to HTML5, everything changes. You’re now a “cutting-edge” website designer, and the work you produce is “ultra modern”. If you have any doubts about this, look again at that article I referenced in my first post.

Nope. I agree HTML4’s not cool like Batman, but if I were cutting-edge in web design, then I’d be hip. That means I’d have a Mac, wear a black turtleneck and sip unpronounceably-named lattes in a trendy coffeshop while updating some banal social-networking fad-site with my iWhatever while raking in millions as some sort of design company CEO (hint: the design company would be so awesome, it would have a name made up of NUMB3RS! How cool is that!??). In a trendy city. In a trendy country. Lawlz.

*EDIT I FORGOT I’D ALSO EITHER BE DRIVING A PRIUS OR A MINI COOPER!!! instead of a bicycle.

That’s not 90% of the web. That’s a very loud minority. Designers are always louder and more noticeable. That’s what makes them designers. You know the clothes those cancer-patient models wear on the catwalk? Would you ever on a cold day in hell see any NORMAL people wearing that stuff?? It’s design, as in art, not practical, useful stuff.

If it floats your boat and makes you rich, I totally cannot argue with it. And after all, it’s a couple of tags, not every tag. Big whoop. The code minimalist in me doesn’t want to code for any version of IE at all… come to think of it, it doesn’t want to code for a certain xul-infested steaming pile of bloat either.

Bravo. But all I’m doing, in essence, is adhering to Sitepoint’s first commandment: “Thou shalt not rely on JS for presentation”. In the context of HTML5, though, it seems to me that all the other designers out there are reading a different bible.

That seems to be the purpose of HTML5, to increase reliance on Javascript by making a very shiny toy known as <canvas> that designers will pretty much be forced by their bosses to use to make pretty attention-grabbing things that sing and dance for us… that is, if they aren’t foaming at the mouth to implement it themselves. LOLMIGOD MOVING GRAPHS AND CHARTS!!! Bank executive faint!!

I don’t see the point in using all the shiny neat-o stuff of HTML5 if you can’t use it cross-browser, unless it’s for the Lawlz (like when I use border-radius for a couple of browsers, I’m just amusing myself with non-cross-browser bloat). I think <canvas> should be like FLASH: relegated to enhancing actual content, not be the content.

Remember the sites you are seeing using HTML5 are the sites of trendy high-flying (and likely Mac-toting) hipsters who get paid to be as cool and cutting edge as possible. These people don’t hold cigarettes in their hands. Oh no, they have these long things called cigarette holders, like Cruella DeVille had! Or the even more hip nicotine patches. They wear them in very obvious places, no hiding under the Ralph Lauren shirts here.

I don’t begrudge you making Batmobiles for the Concept Car show with all the other high-paid cricket-clubbing jolly-good-ol-chap Christian Diors, so long as you know that’s what you’re doing. And really, the more variety, the better. Let the snobs sniff at your “frowned-upon” ways. Play the game, dazzle them, and earn a truckload of sweet sweet money. Plus get that extra satisfaction that you’re practically being persecuted. And… they’re sniffing at you. Sniffing!

Though you’re aware you’re doing what in psychology is called “enabling” right? : ) All those addicted IE users…

10

I have absolutely no idea what you’re talking about.

Somewhat worryingly, I am inclined to believe that you don’t, either.

11

Crazy Cat is saying that you should just be aware that you’re playing with high-concept art. And while you’re at it, to enjoy the attention.

12

s’ok, Andrew, I often don’t : ) That and I expect the prettier people to stop with the sniffing and frowning once they remember it causes wrinkles.

Paul, it’s Stupid Cat, not Crazy (though that could be added I suppose).

13

s’ok, was trying to give the benefit of the doubt. You’ll get points for honesty though.

14

She’s just saying; it is non-normative and thus an unreliable medium and probably results in a lot of unnecessary workarounds… Though if you want to show-off with a prototype do so but be aware it’s a ‘DeLorean DMC-12’ looks nice on paper but its gull-winged doors drop-off.

In fact she made “total sense” but over elaborated a little, and yes she did know what she was talking about 100%; it was just a very “amusing/comical” way of putting it down, that’s all. :smiley: