Blogs

Adobe recently released HTML5 Pack extension for Dreamweaver CS5. It adds initial support for HTML5 and CSS3 in Dreamweaver’s Live View mode as well as code hinting for HTML5/CSS3 exclusive properties. I just put together a quick test page and it’s pleasant to know that CSS animation is also supported within the Live View screen.

Another nice addition is the Multiscreen Preview which shows you multiple rendering of the page in different sizes. By default, it’s set to iPhone, iPad and Browser. This goes for Dreamweaver in general, but it would be nice if there was an option to set each view’s layout/rendering engine. I’m assuming it’s using some version of Webkit right now as it only accepts “-webkit-” prefix for CSS3 properties such as border-radius and text-shadow. Another addition I would like to see in the future is to be able to scroll through the whole multiscreen panel. You can scroll within each screen, but let’s say if there is a view that’s cut off below bottom of the panel, there is no way to get to it other than reducing the height of screens above it.

This extension is quite handy and I wouldn’t mind switching over to Dreamweaver to do HTML5 stuff, but then again, it crashed like 5 times while creating the test page. I’m sure it’s not the extension and it’s a Dreamweaver thing. Anyhow, I would highly recommend people with Dreamweave CS5 to try out this extension.

Adobe Dreamweaver CS5 HTML5 Pack

I’ve put together some CSS transitions that I’ve created in the past on this demo. It uses JS initially to set up the elements and the right CSS properties. After that all the looping animation is handled by CSS transitions. You’re gonna need a WebKit based browser to view this demo.