New CSS in Firefox 3

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.

Posted: June 25th, 2008


Subscribe for email updates

13 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.