I know what you’re thinking: HTML5 is only compatible with the latest versions of all mainstream browsers (with Internet Explorer always being a crapshoot at best), so how can it implementing any one of its features save any time at any point during the design process?
It depends on the project. I was able to give it a try using the following pop-up div container:
Consider that both the drop shadow and rounded corner CSS3 elements used in the above design require coding hacks to render properly in Internet Explorer. That meant I was probably going to be using IE conditional statements no matter which method I went with.
That meant it was finally time to experiment with HTML5.
And that begs the question: Was it worth the effort?
In this instance, I wanted to see how the HTML5 canvas tool would work in terms of drawing the small triangle that comes off the left side. It’s easy enough using CSS – simply create a container to hold an image of the arrow and use positioning and z-index to overlay it.
Okay, but what about canvas? HTML5 defines it as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”
This is all of the HTML it requires:
A few setbacks presented themselves right away:
- It’s easy enough to draw a square or circle, but I needed to create a custom shape. Custom is usually just another word for “more work.”
- You can append borders and drop shadow to a shape with just two lines of code, but there is no way for the designer to control which edge gets either of those and which doesn’t. Unlike CSS, there is no border-left, border-right, etc. That means two shapes, which, again, means more work.
- Developer programs that offer a preview function, such as Adobe Dreamweaver, can’t read HTML5. That means text program-style-coding: make an edit, reload a browser to check the edit over and over and over and over and … . It’s a fairly mind-numbing process when you’re constantly adjusting line points by a pixel point or two. It also makes for, you guessed it, more work.
It took thirty-four lines of code to draw two shapes. Personally, if I have to make an edit down the line, I’d rather change a few pixels in a few lines of code than have to resize and edit an image in Photoshop, but a bigger consideration is the amount of time I spend getting to that point.
In looking at the new syntax, I can tell HTML5 is going to drastically streamline a website’s HTML code base – when the majority of Internet http://lunchpail.knotice.com/?p=5785&preview=trueusers upgrade to a browser that can render it consistently. Until then, its use seems to be more restricted to improving existing web applications, such as form functionality.