HTML5 / CSS3 / SVG experiments
3 May 2010
I've made some tests with this promising features of the HTML5, CSS3 and SVG.
Here is my test page : http://www2.r3gis.fr/blog
It's powered by Django (if you don't know this web framework, just try it, you'll never want to rewrite a line in php after that ;) ).
Browser state of the art :
- Fully compatible with firefox 3.7a5 (nightly build).
- Chrome(ium) also support it (but i found some bugs in the implementation of HTML5 in webkit, I'll probably open bugs when the site will be finished).
- Opera 10 support almost everything but not gradient (which has a deep impact since i use it as background).
What I tested :
- An XHTML page to allow inline SVG inclusion.
This is the way I choose to include my svg button since firefox doesn't support yet <img /> with svg src.
- CSS 3 gradient background.
It is really easy to use. you can choose your gradient orientation (gecko and webkit doesn't supports the same parameters but it's easy to do anyway)
Another point I noticed (but I may have missed something) is that the gradient is not regenerated when a tag height changed (for example my background) the gradient height is not re-computed and is duplicated at the bottom.
- CSS 3 transitions (I know in the example i made too much transition on mouse over ;) )
The only thing is missing for me is to allow transition between for example height :0px; and height : auto;. I found a work around by using max-height:0px and max-height;10000px; (where 10000 is a very big value). The transition time is not respected between 0px and the height auto, but at least we have a transition.
- Canvas with 2d context (I used processing js to make the dev easier). Unfortunately since it doesn't allow transparent background I didn't include it in the example.
- Inline SVG buttons (I'm a svg fan ;) ).
Thanks to the template system of Django it's easy to include a svg (directly generated by inkscape).
The cool stuff is that doing that, your svg document obey the rules defines in the master CSS. (It could be valuable to change you icon colors for example).
Another cool feature is to use CSS3 transition on your inline SVG !! Wahoo. Just by changing the :over class of my lines in my buttons I make it bolder and I changed the color. Just with a css class, and with a transition.
This feature only works with firefox 3.7 for now. But it introduce a real usage for your svg buttons in the webpage (and besides your buttons are scalable!).
- CSS 3 border-radius, one of the firstly adopted feature (and waited for since a long). The end of the sprites and of these headaches with multiples divs/table.
- CSS 3 box-shadow and text-shadow : same as for the last point. One personal note on the cool feature that enable to use multiples shadow and also inset shadows. With this feature you can now render complext generics buttons just using this and gradients. No more bitmap !!!
- @font-face. What's a pleasure to be able to embed your own font ! You'll be sure that the user will see your website with your font. (There is a bug with chromium when using @fontface and css3 transition although ;) )
What I have not yet tested but that I'll test :
- CSS 3 transformations (that should allow to deform parts of the webpage)
- Webgl (canvas with 3d context) demos I've seen are really impressive
Just a last word... If you are using internet explorer..... Go out of there, you're contributing the fact the web is such a poor place.... Download either Firefox, Chrome / Chromium, Safari or Opera....