All posts tagged ‘CSS 3’

File Under: CSS

Quickly Create CSS 3 Animations with ‘Ceaser’

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.

CSS 3 transitions work in any modern browser. For browsers that don’t understand transitions (I’m looking at you IE 9) you’ll need to fallback to JavaScript. Using Modernizr you can detect support for CSS 3 and then serve up some JS transitions to browsers that don’t support it. If you’re only worried about IE, you could try using IE’s proprietary filters, though be aware that most MS filter properties have a heavy overhead and can slow down pages considerably.

See Also:

File Under: CSS, HTML5, Web Standards

Adobe Unveils ‘Wallaby’ Flash-to-HTML5 Converter

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.

Wallaby is a free Adobe AIR application that allows designers and developers to convert Adobe Flash files (FLAs) into standards-based HTML5, CSS 3 and Javascript files.

Wallaby isn’t quite ready for prime time yet, but you can grab the pre-release version from Adobe Labs if you’d like to experiment.

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.

Wallaby’s biggest Achilles’ heel is that it can’t convert ActionScript to JavaScript.

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.

Barclay did not rule out the possibility that Wallaby might one day be able to turn ActionScript into JavaScript (both languages are based on ECMAScript and have considerable overlap).

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.

See Also:

File Under: Browsers, Web Standards

Mozilla’s ‘Web o’ Wonders’ Shows Off New Firefox 4 Tricks

Just ahead of the final release of Firefox 4 Mozilla has unveiled a new HTML5/CSS 3 showcase to demo some of the new web standards support coming in Firefox 4.

Google and Microsoft both released similar efforts to showcase Chrome and Internet Explorer 9, respectively. And, of course, there was Apple’s effort, but, thanks to some poor coding decisions, Apple’s showcase only works in Safari.

Mozilla’s new Web o’ Wonders website will work in any modern browser, though the video elements use the WebM codec, so you’ll need either Firefox 4, Chrome or Opera to watch the movies. Refreshingly, Mozilla’s Web o’ Wonders doesn’t conflate the various new web standards under the singular banner of HTML5 — SVG, JavaScript, CSS 3 and HTML5 are all called out separately, by name.

Right now there are only three demos on Web o’ Wonder, but Mozilla plans to add more, and you can submit your own experiments for consideration. The three experiments of the site now showcase HTML5 video, WebGL rendering and various CSS 3 and JavaScript techniques combined under the heading “design.” Particularly worth checking out is the HTML5 poster experiment which covers just about all the new HTML5, CSS 3 and JavaScript support in Firefox 4. Curious developers can click the “learn more” link to reach Mozilla’s developer page for each new feature listed.

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.

See Also:

File Under: CSS, Web Standards

The Future of CSS: Finally, Sane Layout Tools

Woolly, the CSS sheep.

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.

For all the great new tools in both technologies, the task of making page elements arrange themselves the way you’d like remains an imperfect process at best. Floats, absolute positions and the occasional bit of JavaScript will get the job done, but that’s a lot of code for something as basic as positioning elements on the page.

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:

 
section {
    display: box;
}
section p#first {
    box-flex: 3;
}
section p#second {
    box-flex: 2;
}

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.

[Update: You can also check out the slides from Gasston's talk over on SlideShare.]

Of course there’s an elephant in the room — Internet Explorer, which does not currently support any of these tools (some of the Flexible Box Layout tools turned up in an early preview release of IE9, but they appear to have been removed in the latest preview). But there’s some good news, particularly in the case of the Flexible Box Layout module, which already has a JavaScript polyfill for older browsers.

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.

See Also:

File Under: Browsers, HTML5, Web Standards

Microsoft, Mozilla Battle Over What Makes a ‘Modern’ Web Browser

HTML5test.com scores for IE9 and Firefox

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).

Mozilla then turned around and released an infographic that shows IE9 lagging well behind Firefox across the board — whether its HTML5 support, speed or CSS 3.

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.

See Also: