-
201007 Jul
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.
You can read more on The Mozilla Blog or Mozilla Hacks and, if you haven’t already, you can download the beta release here.
Mozilla have promised a new beta release every two to three weeks.
You can skip to the end and leave a response.
-
Comments
-
01.
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.
-
02.
jbennet says:Comment » July 7th, 2010 at 9:23 pm
At first glance I thought it was an Opera screenshot. Even the buttons look the same. :o)
-
03.
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.
-
04.
Arc says:Comment » July 8th, 2010 at 3:48 am
There’s also -moz-placeholder for styling placeholder text.
-
05.
December says:Comment » July 8th, 2010 at 4:48 pm
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.
-
06.
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.
-
07.
@december: -moz-box exists in Firefox since many years. The flexible box model is implemented in Gecko since 1999, because XUL needs it. And it exists also in webkit since few years…
-
08.
It’s look good, and very simple browser. I’ll use it on my ubuntu.
-
09.
Firefox try to copy Opera. It doesn’t matter because Opera is so much better.
-
10.
Agree with Matt wilcox, they change together…
but I think the most simple browser i’ve ever used is chrome,,,
what do U think? -
11.
Andrew says:Comment » July 9th, 2010 at 4:18 am
@Steve, I don’t really like Google Chrome mainly because it doesn’t have any real menus and can’t be customised. It also means I can only search Google, which isn’t always what I want.
-
12.
-
13.
Rune Jensen says:Comment » July 9th, 2010 at 2:09 pm
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.
-
14.
I tried it on ubuntu. then I uninstall it, and return to the old firefox because it can not be installed addon. Is there a specific addon for this?
-
15.
actually I use three browsers, so I adjust to my needs. chrome is only used for browsing and searching
-
16.
Rune Jensen says:Comment » July 9th, 2010 at 7:48 pm
Anyone have had time to find out if it is quicker in the new version? Downloading, rendering, javascript, so on?
-
17.
@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.
-
18.
December says:Comment » July 10th, 2010 at 6:12 pm
@laurentj
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.
@Rune Jensen
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.
-
19.
December says:Comment » July 10th, 2010 at 6:16 pm
moz-box usefulness
http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/ -
20.
Rune Jensen says:Comment » July 10th, 2010 at 10:03 pm
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.
-
21.
Rune Jensen says:Comment » July 10th, 2010 at 10:16 pm
@December Can you give a link?
I know there are some inconsistencies, because rounded corners look differently in Opera and Chrome on my oage. They should both follow the specs. -
22.
Andrew says:Comment » July 13th, 2010 at 2:19 am
@DaxterSpeed, thanks for letting me know, I didn’t know that Chrome was able to do that.
-
23.
-
24.
Adam says:Comment » July 13th, 2010 at 8:50 pm
I downloaded the Firefox 4.0b1 (Mac) and set up a simple -moz-calc test. I can’t seem to get it working, though:
-
25.
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.
-
26.
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.
-
27.
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.
-
28.
Hahaha I didnt expected that from Mozila haha Copying Opera’s Skin and its Speed too lol FF 3.5 = Speed like shit and FF 4 = Speed like Opera.
-
29.
@DaxterSpeed I’m nit sure why, but the new interface looks a lot like Safari, don’t you think? :) Neverendless I love it!
-
30.
-
31.
JISHNU DEVAM says:Comment » August 24th, 2010 at 6:07 am
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
-
32.
-
33.
-
34.
-
35.
-
36.
-
37.
-
38.
-
39.
-
40.
-
41.
-
01.
