Visit: New CSS Features in Firefox 3
David Baron, a Mozilla developer, has a write-up on the new CSS features that are available in Firefox 3. There’s a mix of additions – everything from CSS 2.0 and 2.1 features to new additions that are tracking CSS 3.
Some of my favorite additions include:
The CSS 3 Box Specification (in the form of -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available values to width, min-width, and max-width).
-moz-fit-content actually does let authors do some things that previously weren’t possible without tables, such as putting a background on headings that doesn’t fill the whole width of the container unless the heading does, but is a single rectangle if the heading breaks to multiple lines (see Demo).
Wrapped whitespace (white-space: pre-wrap). This allows you to have a <pre/> whose contents are wrapped nicely, while still maintaining its rigid structure.
rgba() values. You can now apply opacity directly to background colors (as opposed to having to create a shim div/span and styling that instead). Note that the below text is fully opaque.
body { background: url(stripes-6); }
div { background: rgba(0, 255, 0, 0.5); }
h2 { background: rgba(255, 0, 0, 0.5); }
inline-block and inline-table Such a powerful addition – and one that now brings Firefox in line with most other browsers. It’ll allow you to create much-more-complicated layouts that were previously very trying to implement using normal CSS. Demo.
Scott Jehl (June 25, 2008 at 5:05 pm)
cool! but what the heck is
url(stripes-6) ?
an image file with no extension?
Dean Edwards (June 25, 2008 at 6:16 pm)
Pretty feeble when compared with what is happening in WebKit right now.
Robert Kieffer (June 25, 2008 at 7:13 pm)
stripes-6 is this image here:
http://dbaron.org/log/20080613-firefox3-css-examples/stripes-6
It’s a PNG, but missing the extension (for whatever reason). You can view source on the original sample here:
http://dbaron.org/log/20080613-firefox3-css-examples/alpha-1.html
NealAbq (June 25, 2008 at 11:41 pm)
I’ve simulated -moz-fit-content by putting the text inside a table with one item (one row and one column). The table and table-item shrink around the (wrapped) text.
Anup (June 26, 2008 at 3:43 am)
The pre-wrap is really useful, but there is unfortunately a long standing bug where if you use whitespace:pre or whitespace:pre-wrap on any element but <pre> it renders okay but if you try to copy/paste it will only copy the DOM representation of the text (i.e. without any extra white-space, etc.)
https://bugzilla.mozilla.org/show_bug.cgi?id=116083
This can be important in some applications where the original data has extra spaces that need preserving.
Good to know about opacity in background colors. Thanks for that.
Bryce Martin (June 26, 2008 at 7:40 am)
Hey John,
Great summary of the new CSS features. I’ve been using jQuery for about 6 months now and have been reading your blog for about 2 months. Good stuff. One question for you… How do you see the fact that FF3 is so far ahead of IE in the CSS race affecting developers. It seems like FF is implementing tons more of the standard then M$. Even though M$ is claiming they are going towards standards compliance do you think that FF’s advances are going to keep web development frustrating for some time to come? Having to do a lot of workarounds for what IE can’t do gets pretty old.
Just some thoughts.
Bryce
Boris (June 26, 2008 at 12:07 pm)
Anup, if the pre-formattedness is a fundamental part of the data, you should be using the semantic tag. That’s what it’s there for.
kevin (June 26, 2008 at 8:30 pm)
so…can we just apply these new features, such as inline-block, in real work? in spite of firefox2 being not supporting them?
Gyrobo (June 27, 2008 at 12:14 pm)
You can use inline-block in Firefox 2 if you put
display:-moz-inline-boxbeforedisplay:inline-block.Rodrigo (July 8, 2008 at 11:49 am)
… why not background-opacity or something like this…
div
{
background-image: url(image.gif);
background-opacity: 0.6;
}
so u could change transparency of, and not only, bg images…
just thinking… :-)
Peter (October 5, 2008 at 11:36 pm)
Ok I just wanted to answer Scott Jehl’s question about the stripes-6 image file with no extension. Although I am not positive since I did not develope this site, Apache web servers allow you to edit a configuration file that specifies a default extension if one is not provided. And that stripes-6 file is either a legitimate PNG image file or it is a PHP (or other server side script) Dynamic Image file. Developers might use extension hiding to hide Dyname Imaging done by PHP or another server-side script. As I said again, I am not positive because I am not the developer but that would be one explanation to your question.
Oscar (January 19, 2009 at 9:51 am)
I am trying to use CSS to place a background(s) on my web page. What happens to this webpage (http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeatx) happens to me.
In Firefox 3 the background doesn’t show; in IE7 it does. Two days of searching and no solution. It is apparently not me(only) since it also happens to the w3schools page too. Haven’t tried it on another computer or 3rd browser? Any ideas?
Oscar (January 19, 2009 at 10:18 am)
Never mind previous problem. Shot myself in foot. Had an Options setting for my browser set wrong.
Everybody’s wrong but you and me (and I’m not sure about you).
Thanks