The first public beta of the forthcoming Firefox 4 browser has been released bringing increased support for CSS3 amongst various other improvements.
One of the most notable new additions in Firefox 4 is support for CSS3 Transitions (with the -moz- prefix). Webkit based browsers (such as Safari / Chrome) and Opera have supported CSS3 Transitions for some time, almost three years in Webkit’s case, and it is reassuring to see that Mozilla have finally made an effort to catch up with the competition in this area.
According to the Mozilla Hacks blog;
This beta release contains a nearly complete implementation of CSS Transitions, privately namespaced with a -moz prefix. The only big things left here are the animation of transforms and gradients. (Gradients is still waiting on working group feedback, code for transitions is under review.)
You can read more on Mozilla’s implementation of CSS3 Transitions on the Mozilla Developer Center along with several examples.
What Else is New?
Firefox 4 also brings several other improvements/changes in terms of CSS3 support including:
* Resizable textarea Elements – Textarea elements are now resizable by default. You can use the -moz-resize property to change the default.
* New CSS3 calc() support – This beta includes support for the new CSS3 calc() value. This lets you specify sizes that include a combination of percentages and absolute values and is hugely popular with developers. More info here.
* Selecting a section of a background image – You can now use the new -moz-image-rect selector to select only a section of a background for display.
* Removed support for -moz-background-size – The -moz-background-size property has been renamed to its final background-size name. -moz-background-size is no longer supported.
* Privacy and the :visited selector – Implementation of changes, announced in March, with regard to what information can be obtained about the style of visited links using CSS selectors. This may affect some web applications. More information here.
In addition to the above, Mozilla have also added a new -moz-any selector. Although not part of the CSS3 specification, -moz-any is a powerful selector that lets you replace large and complicated selectors with much smaller ones. More details can be found on the Mozilla Hacks blog.
Mozilla have promised a new beta release every two to three weeks.
You can skip to the end and leave a response.
Huh, I’ve never seen such simplistic design for any Firefox before. I wonder where they got their inspiration.
But in all seriousness, it’s pretty cool that Mozilla is finally supporting transition. It’s one of my favorite features in the webkit browsers, so it’ll be fun watching how FF’s gonna support it.
tried it on the mac last night. might have been usable if it weren’t CRAZY slow on there. Like grinding the entire machine to a halt slow. They must be working on something on the mac side still. I’ll wait for an RC. Macs always get the short end of the stick from Moz releases.
Anyone know where display:-moz-box/-webkit-box ranks on the priority lists of the browser devs? I strongly feel proper implementation of of that feature could move us away from having to use floats to build page layouts.
Remember, table’s weren’t designed for page layout and neither were floats.
FF4 looks to be a good update, hopefully it’ll be more competitive with the current generation of webkit based browsers, who’ve been able to be more agile and develop faster than FF over the last year or two.
I’m getting tired of the “Opera copy” stuff, and “who came first” thing in general. The fact of the matter is Firefox 4′s UI was proposed as being this back in December, before Opera’s new look came out. There are plenty of mockups of the UI from that time, before Opera’s new look was public. It’s a matter of convergent evolution if you actually bother to look into it. Why do they look so similar? Because it’s a fairly fundamental simplification and enhancement. Much in the same way that tabs were a UI revolution that every browser adopted in much the same way. Give it a few years and every browser will look like this, because it Just Makes Sense (TM). Credit to Opera for shipping their UI first though.
I am hoping for the hardware acceleration support. I thought Mozilla said something about implementing that in a version 4.0, but the article doesn’t mention it?
Also, two things; Rounded Corners and box-shadow. They really should be agreeing on those by now in the CSS3, not with prefixes?
(On a side note I whish they would have allowed relative values on box-shadow, doesn’t seem like they do…)
Looking forward to a stable version 4.0 for Linux.. Haven’t tried the Beta, but OK I’ll give it a try.
@abc123: Timeline: 2008 September Chrome using tabs on top and very simplistic interface.
2009 December Firefox decides to use layout seen on screenshot above.
2010 (month unknown) Opera pushes out an update using Firefox’s decided layout. But worse IMO.
@Andrew: Right click on your omnibar. There you’ll see edit search engines. So you can change what search engine is primary.
To anyone else thinking Opera or FF is better than Chrome. Tell me. I’d love to prove you wrong.
But moz-box and webkit box don’t render exactly the same, most people have ever heard of them, and they probably are a much better way of layout of site columns and horizontal navigation than using floats.
If mozilla and safari can make a big push to get them working and finalize the spec, then opera can quickly add support and maybe we can get IE9 to support it to.
Microsoft recently pointed out some annoying inconsistencies regarding borders and rounded corners that aren’t addressed by the spec.
It’s faster than 3.6 for day to day browsing (on mac) but still feels slower than chrome and opera. Definitely still slower at some chromeexperiments.com, html5demos.com and the ie9 demos.
What I like about Chrome is the SPEED. And the security. It is possible that Firefox is just as secure as Chrome, with the right extensions it might even be better, but Google has made a better point in their commercials, and noone has cracked Chrome on Pwn2Own yet. The first thing I think about when someone says “firefox” is extensions and usability, the first thing I think about with Chrome is speed and security. It might be changed with Firefox 4.0, who knows.
By the way I use both browsers, and Opera as well. I like Opera, because it is very configurable and it is *the* broser for CSS3. Unfortunately it is too buggy in version 10.6 for my taste, I think they shipped it too early on Linux.
thats realy a great news. I’m very curious about it. How good it works. My favrit browser at moment is iron browser is the same like google chrome without sending data to google. HTML5 und CSS3 works very good. I’m very curious about Firefox 4.
Haha. Since when does Google Chrome send all your information to Google, that bullshit!
If you really don’t like how Google Chrome uses Google’s services, you can use Chromium instead. Same thing, but it does not offer all of Google’s Services. You’ll also get the latest features faster.
If Internet Explorer could take some note about firefox’s compatibilities all of us (the programmers/designers) could bring a new era of usability to the websites. However, when you try to compatibilize CSS3 issues as shadows to Internet Explorer (that is NOT a free program like Firefox), it simply don’t support it. That’s a pity because by rare it could be, more than 70% of internet users in my country are using IE.
firefox is better than opera in css3.
i use both of them but dislike chrome
chrome is good with one open tab but it is too sluggy with dozens of tabs
Opera has all features ,it is fast moreover it is light
I wonder when the websites will be adapting to PRESTO engine