CSS3 support in Firefox 3.1
A first Alpha of Mozilla’s new browser is due for release shortly (probably tomorrow). Firefox 3 saw a lot of work go into speed, stability and the interface, but was slightly disappointing for front-end developers and saw CSS implementation overtaken by Safari and Opera.
3.1 will make up for that with a whole raft of features on their way. Implemented in the current nightlies (and therefore, most likely, in the Alpha) are:
- All remaining Selectors
- Text Shadow
- Box Shadow
- Border Image
- Column Rule
Planned for implementation but not yet landed features include:
For the stat-hungry amongst us, 3.1 currently scores 84 on the Acid 3 test, and the implementation of Media Queries should take that up to 85.
There’s no indication of it, but I personally would like to see their border-radius syntax brought into line with the standard, and Transitions implemented to complement Transforms. I’ve been playing with Transitions recently, and they’re very cool.
What new CSS features would you like to see in Firefox 3.1?
http://www.css3.info/border-radius-apple-vs-mozilla/#comment-42445
Which suggests that Gecko’s implementation is now correct? I have to say now that I haven’t actually been back to check it against the specs.
Firefox 3.1 should get separate horizontal and vertical border-radius. See http://blog.vlad1.com/2008/07/14/updates
Not sure if the syntax will math the spec, but I’m not mistaken the spec itself has changed somewhat.
word-wrap should be in the next nightlies (but not in Alpha 1):
https://bugzilla.mozilla.org/show_bug.cgi?id=99457
@Robin: It’s annoying; Mozilla’s implementation of border-radius is now correct in the way it takes values, but it uses non-standard syntax: border-radius-topright, for example, instead of border-top-right-radius from the spec.
I would assume this is fairly straightforward to correct - but then, I always assume that!
Your border-radius wish may be granted, follow this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=431176
PS: it looks like you misnamed the link after the border-radius one (copy/paste error).
Some peculiar WordPress plugin Javascript error is stopping me from posting the last two links in the article. They should be:
‘Transitions’: http://webkit.org/specs/CSSVisualEffects/CSSTransitions.html
‘playing with Transitions’: http://www.broken-links.com/2008/07/11/anime-with-css-and-webkit/
Multiple background images, seriously.
That will solve a huge amount of clutter problems.
border-radius should be in 1.9.1, word-wrap has also just been added. Hopefully some other nice new CSS features are on their way too.
Multiple backgrounds, indeed!
[...] Firefox 3.1 ile birlikte CSS3′ün bazı özelliklerini desteklemeye başlayacak. Bağlantı [...]
Just think, most of these features won’t actually be useful until IE 9 when they finally support them.
I did a trend one day when I was bored using market share data and determined that IE would be over taken by Firefox in 2013, so keep your fingers crossed people.
@Neal G
These features are useful right now. If you decide to not use a feature just because of IE, that’s your decision, but for some of us IE doesn’t matter.
Refusing to learn/use CSS3 just because IE isn’t ready is only shooting yourself in the foot - because there’s loads of devices and browsers, and hundreds of millions of users that can be targeted with CSS3.
The iPhone is one good example, where you can develop web apps, using the very cutting edge CSS.
This view that “no point, IE doesn’t support it” is outdated and will be swept aside soon enough.
The ch unit is going to be corrected too (I think), from originally using the M glyph to using the 0 glyph like IE, which is what the W3C choose to use.
Talking about trends, I think these look pretty nice.
http://blog.mozilla.com/metrics/2008/07/23/where-will-firefox-reach-50-market-share/
While I find transforms interesting, nothing new in the specs goes further to simplify web design than multiple backgrounds. When will firefox implement multiple backgrounds and border images?
div-itis: border image is already implemented in Firefox 3.1, Peter listed it above, too.
Neal G, you are partly right. But this is for professional sites. On them i have to code for all browsers 1:1 by design, but for personal site for myself i wont care for IE honestly. More and more users will leave this crap IE and move to better browsers, its not about standards only its about browser features and speed. On IE7 even 1 blank tab is taking time to load. Microsoft is going down with both Vista and IE. So many years and not so much improvements.
Advance layout module or multiple backgrounds.
@Emil: Microsoft is a great company in some fields. It just sucks on browsers :P
Btw, personally I use CSS3 features for advanced browsers, but I make sure they degrade gracefully in IE. No one cares if the site looks pixel-by-pixel identical in every browser, as long as it looks nice in all of them and the company identity is intact (=it doesn’t look fundamentally different).
In the site I’m working on, the percentage of IE users is only 50%, so the other 50% benefits greatly from CSS3 ;)
Multiple background!!
multiple backgrounds….
text-overflow: ellipse — for the love of god. I need it so bad. IE, Opera and Safari all support it. It would solve so many problems it’s not even funny.
@Jeroen
yes indeed it would be nice to have text-overflow
but as for Opera 9.26 or 9.5 wont support this css style. tried it, failed it.
[...] CSS3.info ha publicado una lista de las mejoras en el soporte de CSS3 que incluirá Firefox 3.1, del que ya están saliendo las primeras nightly-builds.. [...]
There seems to be a lot of resistance to multiple backgrounds from the Mozilla developers, which seems strange to me; it’s constantly one of the most-requested features from developers.
https://bugzilla.mozilla.org/show_bug.cgi?id=322475
[...] Firefox planea mejorar el soporte de CSS3 3n su futura versión +{más} [...]
Media queries just landed in 3.1a2pre, you can update that page now :)
I’m with everyone who wants multiple background images, it’s absurd that in 2008 we still don’t have them supported in all the major browsers.
Thanks, Mick; word-wrap and media queries pages have been updated.
CSS3 Support in Firefox 3.1…
CSS3 für Firefox 3.1…
BTW does anyone knows something for :first-word, will it be implemented in CSS3? I guess it wont be hard to make it and will be useful, right now im working on one site which can use that but instead i have to use span. I found another solution with javascript but its too much to use script for that.
@baggy
Opera uses the prefix -o- for text-overflow, e.g.
p {
width: 10em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
[...] CSS3 support in Firefox 3.1 [...]
text-overflow: ellipsis is a must! There is no nice way to get around with scripting.
Multiple background images will make it much easier to create simple markup.
Column rule is something I’m very excited about. I’d like to see the moz-column-rule work properly. Of course all the other ones are equally cool. :) History in the making!
Lea Verou Says:
July 24th, 2008 at 10:21 pm
@Emil: Microsoft is a great company in some fields. It just sucks on browsers :P
—————————-
Haha,this is a funny opinion!
But I think this is because the IE is published with the Microsoft Operation System, so its bugs can’t not be fixed so quickly like the FireFox.
@IVR: Agreed. I think it also has to do that its the only paid browser (as it comes with a paid OS), so users with non legal Windows have a hard time updating… I think MS should realise what a plague its browsers have been in the web and allow even non-legal users to download new versions. By not allowing them to upgrade it only gives us deveopers and designers a hard time, the actual users don’t care most of the time. :(
Lea,
WGA check was removed from Internet Explorer 7 installer almost one year ago.
Really? Thanks, I didn’t know that.
Then why don’t these morons update? >:(
I just can’t get it!
Maybe because many users have obsolete windows systems, IE7 requires at least XP SP2.
Does SP2 require WGA check or has any higher system requirements?
I still can’t get it. :/
Can’t wait for rounded corners :)
another vote for multiple backgrounds.
font support would be great but I guess there needs some mor talk about allowed formats(ttf,otf or only MS’s eot…)
multiple backgrounds cmon already ! Safari did this years ago
So mozilla.org please do this for 3.1
Fonts support would be so nice…
And, for all the sites I see with round corners, why the hell did we wait for CSS3 to implement this property?
@Lea : SP2 needs a WGA check to be installed and I think people sometimes just don’t care about upgrading, has I can see with “web heretics” I live with.
http://www.microsoft.com/downloads/details.aspx?FamilyId=5B33B5A8-5E76-401F-BE08-1E1555D4F3D4&displaylang=en
Forget about SP2, go straight to SP3 to be protected fully. There is no WGA checks on SP2/SP3 install, only if you try to get it from Windowsupdate then you’ll run into WGA checks.
[...] a post from CSS3.info with the FireFox’s latest support for [...]
For the record, web fonts just got implemented.
And seeing the activity in the multiple backgrounds bug (https://bugzilla.mozilla.org/show_bug.cgi?id=322475), it looks like it’s going to be added soon.
@Stifu: That’s not correct. Only the parsing of @font-face rules has been implemented.
Oh okay, my bad. Still, I doubt it’ll be long before they implement the whole thing…
white-space: pre-line was recently added. Except for some print properties, the only thing missing now from a complete CSS 2.1 implementation is display: run-in!
IE8 is going to have it, so the thing that annoys me most is that the inline-block story is repeating. I think I’ve got a strange crush on this value in the last months, though..
Lack of “text-overflow: ellipsis” broke part of my app going from FF2 to FF3. When is this coming back?
Perhaps I’m a bit late but Ernie Oporto’s comment is a bit strange. How did FF3 break your app when FF2 did not support text-overflow:ellipsis either?
[...] Firefox 3.1 will add support to actual CSS3 properties, like [...]