CSS3: What's Now, What's New and What's Not?

This panel explores how major browsers implement CSS3. The focus is on finding effective and efficient methods for developers to unleash their creativity while maintaining cross-browser compatibility. The panel covers current implementations, future plans from the major browser vendors and some discussion of the current progress on the standard itself.

• Molly Holzschlag, Pres, Opera Software
• David Baron, Mozilla
• Hakon Wium Lie, Opera Software
• Sylvain Galineau, Program Mgr, Microsoft

Please note: These notes were typed and published live. I'll clean them up at some point in the future. Audio forthcoming.

Interactive intro by Molly Holzschlag

David Baron from Mozilla. There is no CSS3. Split up, so development can proceed on certain parts.

Selectors
Color

Selectors. Pretty well implemented. Some of the selectors are so. Using classes vs nth-child might be faster.
Color: Partial opacity/transparency depending on how you look at it.
Border-image: One CSS property to handle stretching and tiling.
Columns.
Text-shadow.
Box-shadow.
Border-radius.
Many of these properties are implemented by browser vendors with hyphen browser name prefixes.
Downloadable fonts.
Media queries. @media (min-width). [Nice!]
Transform. iframe with skew applied. Can click links. Pretty impressive.
Mask/clip-path properties. SVG filters in HTML.

Sylvain. Microsoft.

IE and CSS. Bugs, quirks, missing features, hacks.

Prior to implementing CSS3, must fully implement CSS2.1.

IE 7 did not pass CSS 1 or 2.
IE 8 regressed on CSS 1, but advanced on CSS2.1. IE 8 is now close to almost passing all tests.

CSS 3 in IE 8. No new CSS 3 properties:
block-progressions, box-sizing, background-position-x, background-position-7, layout-grid, layout-grid-char

Future:
* Opacity
* backgrounds & borders
* selectors
* web fonts
* media queries
* multi-column

Hakon Wium Lie. Opera.

Thank IE for doing 2.1 fully.

* Backgrounds and borders
* Fonts
* Transitions
* Selectors
* Media queries
* Generated content for paged media

Webfonts have been around since 1998, but problem was font format. Now TrueType and OpenType are pretty dominant. Not disagreeing about syntax, but disagreeing about font format.

Transitions nice—on hover add time-element and browser will interpolate between two states. Beautiful and amazing!

Most wide-spread use of media queries will probably be based on width.. Make it easy to style for mobile and various devices.

Also impressive work for paged media. TOC has auto-pagination and leaders. Page numbers auto-transformed into hyperlinks. Footnotes.

Find Hakon’s CSS book designed in HTML and CSS.

Q: Why separate and competing rendering engines?
A: DB: Competition is good for progress. Danger of single rendering engine is that the Web will stagnate.

Q: Layout system.
A: Code with layout in mind. Which is not correct. Separation vs integration.
(This was a good q/a. Get from audio)

Q: Creation of book via HTML/CSS?
A: HWL: Decided to try it; not sure if could do it. Yes Logic, Australian company. HWL joined board to make sure his books were fixed first. Commercial product. Antenna House in Japan. Currently, no browser can handle it.

Desire to do paginated browser, instead of scrolling page browser.

HWL: Going to post slides to homepage. David Baron’s are already up.

Molly Holzschlag going to tweet slide location: http://twitter.com/mollydotcom

My version of CSS Sprites2 is almost exactly the same as Dave Shea's: it requires the same HTML, the same styling and includes a similar pre-built function used to invoke it. However, my version also includes keyboard support: there's a matching focus, blur, keydown and keyup event handler for each mouse event handler.

Get CSS Sprites2 for Prototype and script.aculo.us.