HTML 5 with Zen
(Reposting this from an issue which didn't get any feedback - hoping I can get more attention here.)
I'm getting kinda excited about this HTML 5 thing. I'd like to create a Zen subtheme which uses HTML 5, particularly its new semantic tags like <header> and <nav> and such which I could see fitting in really well with a Drupal-powered site. It would also include CSS tweaks to make it behave more predictably in current browsers, and the JavaScript shiv trick to make IE happy.
Thought I'd put word out to see if anyone else is working with HTML 5 with Zen, or with any other Drupal theme for that matter, so we can put heads together, avoid reinventing wheels, and other clichés. I've done some very basic work so far.
Groups:
Login to post comments
love to help
Do you have a 'todo' list?
Well, not really. But if I
Well, not really. But if I were to make one, it would look something like…
…And much of that is already done. This all turned out to be easier than I thought it would. I created a stylesheet which styles the new elements with particular colors. Check out the attached screenshot. Red areas are <header>, purple areas are <footer>, yellow areas are <nav>, green areas are <section>, and blue areas are <article>. The node's date in cyan signifies a <time> tag. Unfortunately, since the "Submitted by…" line is created with t() instead of a theming function, I had to create a new translation string in order to get that working…
Here's a question whose
Here's a question whose answer can only be subjective: Should comments be <article>s?
EDIT: Or maybe not. Apparently, comments are supposed to be <article>s nested inside of an <article> for the main post. Hmm. See this article entitled "Designing a blog with HTML 5".
Browser support?
But what about browsers?
My sites already don't support IE6, but what about FireFox and IE7&8?
Will they understand HTML5 elements?
And what are these elements being used ATM? Is Google recognizing them? Are browsers dealing with them as if they were simple div, or are they being specially dealed?
Yeah, I know, huh? IE 6 is a
Yeah, I know, huh? IE 6 is a real pain to get working with OH SHAZAM!
To elaborate, the theme
To elaborate, the theme makes use of a particular JavaScript trick called the HTML 5 shiv which makes Internet Explorer play nice with the new tags HTML 5 introduces. It's required for all versions of IE at this point. As for WebKit and Mozilla, I haven't had any problems with them at all yet. Opera works too, and is also the only current browser which supports the
requiredattribute for form elements (I've got a little magic sprinkled into template.php which adds that attribute to form elements which have#requiredset toTRUEin the Form API). If you try to submit a required form element while it's blank, the element flashes red and a message appears like in the attached screenshot. There's no added JS or anything involved here; it's just Opera handling the HTML 5requiredattribute on its own. The implementation is tacky, but it's a pretty sweet idea.(If you're reading this thread via email, you're totally missing out on the screenshots…)
Perhaps this weekend I'll open up a project on D.o and upload my work so far.
I love the idea of HTML 5,
I love the idea of HTML 5, with its semantic tags. In fact, I was about to start developing a theme from scratch using that approach, but then I discovered Zen. It seemed like more trouble than it was worth to make Zen HTML-5-ified and I didn't want to waist time trying to fit a square peg in a round hole. I use Zen because its supposed to make development easier. I don't want to constantly be fighting against the Zen way (or the Drupal way) just so I can say my website is HTML 5.
That being said, I still love the idea of HTML 5 and would be thrilled beyond belief to see an HTML 5 version of Zen Theme. Of course I'd prefer to see this as a new base theme, rather than a sub-theme. Relying on a sub-theme to make these sweeping changes just feels a little too kludgy to me. At this point in the web's evolution, maybe its time that the Zen distribution contain HTML 4 and HTML 5 versions for people to choose from.