Posted by Garrett Albright on August 7, 2009 at 8:20pm
(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.
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…
The Boise Drupal Guy!
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".
The Boise Drupal Guy!
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!
The Boise Drupal Guy!
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.
The Boise Drupal Guy!
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.
I have created a HTML 5 theme
I have created a HTML 5 theme using Drupal for use on my website http://nimbupani.com Would be glad to answer questions. Some of the changes required me to create a module (for advanced search fieldsets).
http://nimbupani.com/
...
<section>used for regions and main content does not seem semantically correct and appears to go against the specification.The way I read the spec sections are meant to be sections within an article or other document and have headings - normally an H1. They are not a generic container element. I.E sections are "sub sections" of an article, the are not meant to contain articles.
The way I see it regions are generic containers for which HTML5 spec tells us to use the DIV element.
The way I see this going, to be serious about HTML5, is a need for more templates or a totally different idea in Drupal theme layer, because we will still need to break up the page layout with DIV's (generic containers), but blocks are where the action will be - using ASIDE, NAV and SECTION depending on the blocks context or type - menu blocks are NAV, but a block of related links could be ASIDE...
You're mostly correct. In my
You're mostly correct. In my defense, I wrote that OP several months ago, and much has changed in that time in terms of consensus and understanding of HTML 5. Here's an article about
<section>.The Boise Drupal Guy!
Back-porting Boron to D6 as a Zen sub-theme
We created an HTML5 base theme for D7 called Boron, which we're working on back-porting to D6, possibly as a Zen sub-theme. If anyone is still interested in this, I'd love to hear from you: scott at metaltoad.com