CSS 3 has some awesome new animation capabilities for web developers — rotating objects, fading them in and out and more — but writing the code is a bit more complicated than most CSS rules. To make your animating job a bit easier, developer Matthew Lein put together Ceaser, a handy code generator that outputs CSS snippets for animations.
Ceaser will look familiar to anyone who’s ever used Robert Penner’s easing equation in Flash (and later JQuery) since it includes approximations of most of Penner’s equations.
To use Ceaser, just pick a preset, set a time for the transition (the default is 500 milliseconds) and then pick a property to apply it to — width, height, opacity, etc. You can also create your own easing curve using the drag-and-drop graph tools. Once you’ve got everything working the way you’d like, just paste the CSS output into your stylesheet and you’re done.
Even though its Flash technology is used as a punching bag by web standards fans, Adobe has been working hard to embrace HTML5. The company released its own HTML5 video player, and Adobe Illustrator and Dreamweaver CS5 contain a number of new HTML5 export tools. Now Adobe is turning its HTML5 attentions to Flash with the release of Wallaby, a new Flash-to-HTML5 converter.
Adobe first showed off Wallaby at the company’s MAX conference last year and the target use was pretty clear: Apple’s iOS devices. Since iOS doesn’t support Adobe Flash, developers using Flash for their web content need an alternate solution for iOS mobile devices — enter Wallaby.
Because iOS is the primary use case for Wallaby, the generated code relies on some WebKit-only CSS features, which means that Wallaby’s results won’t work in every web browser. In other words, Wallaby is not yet a magic bullet for those who’d like to make the jump from Flash to HTML5. For example, any timeline animations in your Flash file will be converted into CSS 3 Animations.
It’s great to see Adobe using the CSS Animations standard, but sadly the animations spec only works reliably in WebKit-based browsers (Safari, Chrome and Mobile Safari). Once other browsers implement CSS 3 animations, Wallaby could become a more useful, general purpose tool.
Wallaby also won’t convert some Flash elements to HTML5 because there simply is no HTML5 equivalent. For example, Flash’s blend modes and some Flash filters won’t convert, but Wallaby will warn you when something in your FLA file won’t be exported to HTML5. For a complete list of supported Flash features, see the Wallaby documentation page on Adobe Labs.
Adobe’s Tom Barclay, senior product manager for the Adobe Creative Suite business, tells Webmonkey that, for now, the primary use case for Wallaby is converting simple Flash banner ads into something iOS users can see. For that use case, Wallaby works well. For anything beyond it, you’ll have to break out your text editor and tweak things by hand.
But just because Wallaby won’t do it for you, doesn’t mean it can’t be a starting point for converting more complex Flash movies. Wallaby will even preserve any instance names in your Flash movie, making it easier to do the AS-to-JS conversion yourself.
Right now Wallaby is at the preview-release stage and Adobe is looking to gauge developer interest. If you’ve got suggestions for how Adobe can improve Wallaby, or want to let the company know which Flash features you’d like to see added, be sure to let them know.
While Barclay said Adobe has no firm plans at this point, he hinted that eventually Wallaby’s conversion tools could be rolled into Flash Professional itself as an export option. For now though, if you’d like to take Wallaby for a spin, head over to Adobe Labs and download a copy.
Perhaps the best news, which arrives alongside the new demos is that Firefox 4 RC1 is just about done, with the final release likely not far behind it.
HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s not the end of the story. The next major development in web design will likely revolve around one of the things neither HTML5 nor CSS 3 have yet addressed — page layout.
Surely there’s a better way. For example, wouldn’t it be nice if you could simply define a box and then position child elements within that box using a few lines of code? Perhaps something like this:
These CSS rules tell the browser that our section tag should be a box. Within that box are two paragraphs that should be displayed side by side, with one of them taking up slightly more space than the second. The browser calculates the width of the two p tags by looking at the ratio in the box-flex rule and then displays the results — no floats, pixel widths or other rules necessary.
If that sounds good to you then you’ll be excited to know that the code above will actually work in the latest versions of Firefox, Safari and Chrome, which all support the W3C’s Flexible Box Layout Module.
The catch — because there’s always a catch when it comes to emerging web standards — is that the W3C is planning a considerable rewrite of the Flexible Box Layout syntax. In other words, experimenting with the Flexible Box Layout rules is fine (and vendor prefixes are your friend here), just don’t actually use it in production code. For a great tutorial on how the Flexible Box Layout rules work, check out Google developer Paul Irish’s write up on HTML5Rocks.
The Flexible Box layout Module isn’t the only tool the W3C is considering for improving the layout tools in CSS. There are two additional standards under consideration — Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning. The three use different syntaxes to accomplish similar things, so it’s unlikely all three will end up official specs. Currently the Flexible Box Module and the Template Layout Module are the more actively developed of the three.
For a great overview of how each of these three modules work, check out the video below of web developer Peter Gasston’s recent talk at the London Web Standards meeting. Gasston calls the talk How We’ll Lay Out Websites In 2016, but we’re optimistic that these tools will be available in most browsers much sooner than that.
Cool as the Flexible Box Layout Module is, it’ll still be some time before you can use these new rules in production. Floats, absolute positioning and other awkward layout tools will be with us for some time to come, but at least the promise of something better is starting to appear on the horizon.
Microsoft and Mozilla are trading barbs over the coming Internet Explorer 9. Microsoft has been touting its HTML5 support in IE9, claiming that it renders HTML5 better than Firefox (and Chrome, Safari and Opera).
So who’s right? Well, both of them. IE9 is a huge leap forward for Microsoft. IE9 handles HTML5 and CSS 3 far better than its predecessors. As we said in our review of the release candidate IE9 is great news for web developers because it means the end of IE hacks and workarounds.
That said, IE9 offers nowhere near the level of HTML5 support found its competitors.
But what about Microsoft’s much-touted HTML5 compliance chart? Well, the tests used for that chart are the tests Microsoft developed for IE9 and submitted to the W3C. It should be no surprise that IE9 scores well in the tests it created, after all, those are the tests it was developed against.
IE9 does well on its own HTML5 tests
For something a bit less biased, grab a copy of the IE9 release candidate and point it any of the popular HTML5 test suites on the web — caniuse.com and HTML5tests.com are two good examples. Run IE9 RC1 and Firefox 4 through those tests and you’ll find that Firefox handy beats IE9 (as do Chrome, Opera and Safari). In fact, Firefox 3.5, which is over two years old, also handily beats IE9.
So how can Microsoft claim that IE9 is a “modern” browser with amazing HTML5 support? Well, Microsoft’s argument is that HTML5test and its ilk look for features that haven’t necessarily been finalized by the W3C. Microsoft’s rebuttal to Mozilla’s criticisms is that users don’t want experimental features, they want a fast browser that can handle HTML5 video, audio and canvas.
Microsoft’s Tim Sneath, director of Windows and Silverlight technical evangelism, says that “modern browsers implement features when they are ready, providing predictable patterns that developers can rely on rather than suddenly breaking or removing specifications.”
The problem with that claim is that, as we’ve often pointed out, the web doesn’t move at the speed of standards, it moves at the speed of innovative web browsers and developers. Sometimes there are hiccups along the way, but in taking the conservative track, IE9 is in danger of falling behind the web before it even makes it onto the web.
Internet Explorer’s market share has been in steady decline for several years now. IE has dropped from 68.5 percent world market share in July 2008 to 46 percent today (according to StatCounter).
Faced with dwindling market share and IE bashing in the web development community, many developers were hoping Microsoft would innovate, would build something amazingly far ahead of the competition. But that’s not the approach Microsoft has decided to pursue.
So while IE9 does an admirable job of catching up on web standards, it’s far from a leader when it comes to HTML5 and CSS 3 support. If you want a browser that works on today’s web, IE9 will make a fine choice. If you want a browser that’s already moving toward the web of the future then you might want to look elsewhere.