Archive for March, 2011

File Under: CSS, Web Standards
Mar
28
2011

Simplify Your Stylesheets With CSSPrefixer

By

Woolly, the CSS sheep.

CSS 3 has some awesome new features, like 3D transforms, smooth transitions, border images and gradients. Since most browsers already support these features there’s no reason you can’t use them today, provided you gracefully degrade for older browsers.

But when it comes to writing CSS 3 there’s no question it can be a pain. Not only are the new rules considerably more complex than the simple days of background: white, most browsers are still using prefixes for CSS 3 features.

While we think browser prefixing is a good thing, it definitely adds complexity to your stylesheets and means writing the same rule several times. That’s where CSSPrefixer comes in. Prefixer is a Python-based CSS processor that takes single CSS 3 declarations and adds all the necessary browser prefixes to your stylesheet. You just write the actual CSS 3 rule and CSSPrefixer does the rest. As an added bonus CSSPrefixer can also compress your stylesheets to save on bandwidth.

Since it’s written in Python you can run CSSPrefixer from the shell, from the Python prompt or even integrate it into popular Python frameworks (like Django) using the webassets project, which now supports CSSPrefixer.

If you’re tired of wading through half a dozen rules every time you want to write a little CSS 3, use CSSPrefixer to simplify your code.

See Also:

Tags:
File Under: CSS
Mar
24
2011

Quickly Create CSS 3 Animations with ‘Ceaser’

By

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:

Tags:
File Under: Browsers, HTML5
Mar
23
2011

Chat Up the Web With the New Chrome 11 Beta

By

The Google Chrome team has pushed out a new beta release of the Chrome web browser, which adds support for the nascent Speech Input API. Yes, now you can talk to the web, it just might not exactly understand what you’re saying.

If you’d like to try it out, subscribe to the Chrome beta channel and then head over to Google’s voice-controlled demo app.

The Speech Input API is designed to give developers a way to write web apps that allow full speech recognition — the transcription from speech-to-text occurs on a speech server after your voice is recorded.

Chrome 11 beta is currently the only browser that supports the brand new Speech Input API and in my testing the results were mixed. So long as you raise your voice the app generally gets things right, though “Webmonkey” was interpreted as, ahem, “wet monkey.”

It’s worth noting that I did my testing using a built-in mic on my MacBook Pro, which is perhaps not the best sound source, especially since others seem to have had better luck. But, like most software that uses voice input, clearly the transcription in Google’s sample app is far from perfect.

However, as the Speech Input API gains more support it will open an entirely new set of possibilities for web apps, enabling everything from online speech-to-text services, realtime video transcriptions, voice chat logs or song lyric generators. Voice input could be particularly helpful on mobile devices and would go a long way toward making web-based apps as compelling as native apps. Voice input also opens up a whole new range of possibilities in creating a more accessible web — fill in forms via speech, browse by voice and so on. Not all of these features are specifically addressed in the new API or Google’s demo, but it’s not hard to imagine creative developers finding a way to make them possible.

Unfortunately, based on this early, very experimental example of the Speech Input API it’s going to be a while before you’re talking your way around the web.

See Also:

Tags: ,
File Under: Browsers
Mar
23
2011

Firefox 4: 7 Million Downloads and Counting

By

With over 7 million downloads and counting, Firefox 4 looks on track to match, and possibly surpass, the launch of Firefox 3. Firefox 3, which was released in 2008, saw some 8 million downloads in its first 24 hours and earned Mozilla a Guinness World Record for number of downloads in a 24-hour period.

Yesterday’s launch of Firefox 4 lacked the “download day” publicity stunt aspect of its predecessor — perhaps because, despite the record setting numbers, the launch of Firefox 3 brought Mozilla’s servers down and caused upgrade delays for many users — but that hasn’t stopped Firefox fans from upgrading in a hurry.

Firefox 4 is also likely the last time we’ll see a big release like this from Mozilla. The company is transitioning to a rolling release schedule like that of Google Chrome — less fanfare perhaps, but with more features arriving in less time.

Internet Explorer 9, which also launched with much fanfare this month saw 2.35 million downloads in the first 24 hours, according to a press release from Microsoft.

Of course all of these numbers are meaningless in the long run, what really matters is that the web has two new, much-improved web browsers. That means developers can start using more of the new tools in HTML5 and users will find the web a faster, more exciting place.

See Also:

Tags:
File Under: Browsers
Mar
22
2011

Mozilla’s Leaner, Meaner Firefox 4 Arrives

By

Mozilla has unleashed Firefox 4, the next version of the popular open source web browser.

The fourth major upgrade for Firefox was originally scheduled for the end of 2010, but the sheer number of new features pushed the deadline back several times. Now the wait is over — the new and improved Firefox 4 is now available as a free download for Windows, Mac and Linux.

Firefox 4 is a major overhaul, bringing a revamped user interface, hardware accelerated-speed improvements, built-in syncing and a significant upgrade under the hood. Page-rendering speed has been tripled, according to Mozilla, and the browser has increased support for web standards like native HTML5 video, fancy CSS 3 visual effects and native web fonts.

User interface

The most noticeable change in Firefox 4 is the revamped user interface, which streamlines the look and feel of Firefox. Tabs have been moved to the top of the browser window, above the URL bar. On Windows Firefox 4 matches Chrome’s tightly stacked tabs (which extend into the window’s title bar), and it does reduce the amount of space the tab bar takes up. On Mac OS X Firefox 4′s tabs don’t extend into the title bar. If you don’t like the tabs on top, there’s a preference option to revert to the old look.

Tabs are on top in the new Firefox 4.

The status bar, which has long lived at the bottom of the window, is now gone. Instead there’s an “Add-ons bar,” though it’s disabled by default. The main missing information in the status bar — the URL preview that shows up with you hover over a link — now shows up in a floating window, a la Google Chrome and IE 9.

Also gone in Firefox 4 is the RSS button, which, according to Mozilla’s research, no one was using. If you were among the few who did use the RSS button, it’s not hard to add it back.

Clearly Chrome’s minimalist user interface has inspired Firefox to clean up its look (Chrome had a similar effect on the recent release of Internet Explorer 9), but Firefox still has a few tricks up its sleeve.

Firefox 4 introduces a new feature dubbed “Panorama.” With it, you’ll be able to group and quickly switch between related clusters of open tabs. Designed for those of us over-stimulated fiends who frequently have dozens of tabs (or more) open at one time, Panorama allows you to conquer tab chaos. For example, you can group tabs for work and tabs for fun, and then quickly switch between groups.

App tabs save space in the tab bar.

This release brings another new feature, App Tabs, which allow you to pin sites you use frequently — Gmail or Facebook, for example — to persistent tabs that take up less space and will stay in place even when you switch between tab groups.

There are so many new features in Firefox 4 we don’t have the space to list them all here, but a few standouts in the new interface include the ability to switch to a new tab when you search in the URL bar, the slick new add-ons manager and privacy controls that stop websites from tracking your every move.

Syncing

Most of us use multiple screens every day — one or two computers, and at least one smartphone with a web browser — keeping it all in sync is increasingly difficult. That’s where Firefox 4′s sync tools come in, allowing you to pick up where you left off, no matter what device you’re using.

Firefox 4′s sync feature handles bookmarks, browsing history, user preferences and open tabs, allowing you to move between desktop and mobile versions of Firefox with all your data intact. Firefox Sync is simple to use: Just create a username and password, along with an encryption phrase, and Firefox takes care of the rest behind the scenes.

Unlike similar implementations in other browsers, Firefox 4 will encrypt all your data before sending it over the network to sync through Mozilla’s servers, which ensures that your data is protected from prying eyes (you can also host your own sync server if you’d like).

The sync updates in Firefox 4 coincide with similar improvements in Firefox Mobile 4 for the Android and Maemo mobile platforms. For iOS users there’s the Firefox Home app, which can give you access to all of your synced info. (Though any links you open will of course be rendered in iOS’ Webkit browser, not Firefox.)

The one missing feature in Firefox 4′s syncing is add-ons. As Firefox transitions to its new add-on format, it’s possible future releases will sync add-ons, as well.

Speed and hardware acceleration

Firefox 4 makes impressive speed gains (note tests show RC1)

There wouldn’t be much point to upgrading your web browser if the latest version wasn’t faster. And when it comes to speed, Firefox 4 delivers. Thanks to improvements in the Gecko rendering engine and the JavaScript engine, Firefox 4 is significantly faster than its predecessors.

This release also sees the first support for hardware acceleration. The idea behind hardware acceleration is to hand off processor-intensive tasks to the computer’s graphics card so that animations and page rendering are faster and smoother. Hardware acceleration is particularly helpful for common tasks like rendering text and graphics.

Internet Explorer 9 hyped its hardware acceleration when it launched last week, but Firefox 4 not only bests IE 9 in several tests, it also supports Windows XP, while IE 9′s acceleration is limited to Windows Vista and Windows 7.

In fact Firefox’s hardware acceleration works across platforms taking advantage of Direct2D and Direct3D on Windows, XRender on Linux and OpenGL on Mac, to make animations and complex HTML5 applications run more smoothly. Firefox 4′s hardware acceleration is enabled by default on all supported hardware.

Web standards

Mozilla's Web o' Wonder shows off Firefox 4's HTML5 powers

Firefox has long been at the forefront of standards support, and this release is no exception. Firefox 4 brings support for HTML5 features like the audio and video tags (rendering native web video with the WebM and OGG codecs), as well as the new semantic elements and dozens of APIs, ranging from drag-and-drop file uploading to geolocation.

You’ll also find plenty of support for new CSS 3 features like transforms, transitions, media queries for responsive design and @font-face for embedding better-looking fonts in your web pages. To go along with the new font embedding, Firefox 4 now supports the Web Open Font Format (WOFF), which joins the TrueType and OpenType support found in previous releases.

Firefox 4 also drops the -moz prefix for a number of more stable CSS rules, like border-radius and box-shadow.

Firefox 4 now supports WebGL, which means faster 3-D graphics and animations. WebGL bridges the gap between HTML5 tools like the new Canvas tag and OpenGL, an OS-native graphics engine, to speed up HTML5 web apps and animations.

To see the new HTML5, CSS 3 and API support in action, head over to Mozilla’s Web o’ Wonders demo page which showcases the new standards support in Firefox 4.

Conclusion

Firefox 4 is a massive overhaul and you should definitely upgrade. Not only is Firefox 4 faster, it brings the modern web to your desktop thanks to excellent web standards support.

Tags:
« OLDER POSTS