Migrating to HTML5/CSS3
I've been thinking of moving my journal to HTML5/CSS3, since these seem to be the future. I am currently happy with the way my site looks, but I think I will migrate away from XHTML1.1/CSS2 anyway because of some features like @font-face and some more-semantic markup.
Has anybody else gone about doing this? If you have, could you tell me what sort of support you see from different browsers?
My plan is to start with what I have and progressively evolve my site. I'm just trying to figure out if it is worth the effort right now.
Hi Pundit :),
Its really great that you're planning for a migration to HTML5/CSS3 but the reality is hardly any browser fully supports HTML5/CSS3. And only Safari supports some features of HTML5/CSS3. Well do you've a Wordpress Blog? If yes then you can try the following plugins which can give your blog a new look with the existing design only by changing the fonts:
1> http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/
2> http://wordpress.org/extend/plugins/wp-google-fonts/
BR,
Shubhamoy
That is a good idea Shubhamoy, I did not know of the first plugin. I will look into these options, but I have already begun to migrate a local copy of my site. on the side. Most things are quite straightforward, a few are not.
Its really interesting to know that you wish to make this move.. Apart from Safari, Chrome and Firefox too support some of the XHTML5 and CSS3 properties.
The Draft is still a draft at the W3C and hence implementation isnt going to be the final..
All the best! do share your experience migrating the same here...
@ pundit Best of luck with the migration do post your experiences.
@ Hemal Thanks for the addition :)
Strangely enough, it took only a few lines of code to move my journal to HTML5. Of course, such a change is only really in theory, in the sense that the document just validates as HTML5 and there are no non-trivial changes in markup.
Now, onto some actual semantic changes!
congrats! would appreciate a post on how did yuo migrate 
It really wasn't that hard (as in I have not done anything yet.) Just look at the source code for my journal and this html5 version and notice that the header on top is slightly different. That is all I have done so far. Since html5 is essentially some sort of superset of existing markup, it seems to validate with no changes after that. But, I am going to start changing the actual markup to use new features in html5 (because that's the whole point of this exercise!).
true! the new tags and elements are what i thought you have used.. checked the source code and didnt find them there. I noticed that Header is different.. even I will be working on it soon.. trying to put up a website on html5 as a test project. Blogging, will come for me as the next step.
Greetings Hemal and other interested people. I have made a lot more progress along this process and really is quite straightforward, including the use of new HTML5 entities. I have a tiny bit of javascript on top to ensure that it works on older IE browsers.The following is the rough idea. Consider, for example, my old skeleton code for an arbitrary entry:
<div class="entry">
<div class="title">
<h2>...</h2>
</div>
<div class="date">
...
</div>
<div class="tags">
...
</div>
<div class="content">
...
</div>
<div class="comments">
...
</div>
</div> <!-- .entry -->
Notice that everything is a <div>, and elements are only differentiated by their respective classes. (Which means a computer reading it cannot tell the difference between the <div>s since the names and meaning I attach to them are arbitrary.) HTML5 now provides new elements to make this sort of markup a bit more semantic, and so my newer markup now reads:
<article class="... entry" id="post-number">
<h1>...</h1>
<time class="date" datetime="computer-readable date" pubdate="pubdate"> ... </time>
<p class="tags">
...
</p>
<div class="content">
...
</div>
<div class="comments">
...
</div>
</article>
Notice that some of the <div>s are now gone, replaced by elements like <article> and <time> which have meaning for a computer reading it.
Now here's the fun part. As long as I retain the class names for these new elements (e.g. <article class="entry"> instead of <div class="entry">), I don't even have to do anything, all my old CSS still works!So this is what I am doing. Going through my old markup, and seeing what can be replaced by equivalent HTML5 things, and changing them. I then look at it in a browser and will fix whatever styling is broken.
So this is what I am doing. Going through my old markup, and seeing what can be replaced by equivalent HTML5 things, and changing them. I then look at it in a browser and will fix whatever styling is broken.
this is really cool.. thanks for the information Doc...
Sign in to reply to this thread
