CSS and its Status in Firefox

Structure of this talk

• Goals of CSS
• New and Upcoming CSS (in specs and browsers)

Goals of CSS (1/6): separation

allow authors to separate presentation from content

Goals of CSS (2/6): adaptation

allow presentations that are good at adapting to different devices (e.g., size, input) and operating systems (e.g., fonts, interaction patterns). (Or media queries.)

Goals of CSS (3/6): enable design

allow designers, around the world, to easily produce the designs they envision while still meeting the other goals.

Goals of CSS (4/6): user control

Allow users to override the designer when they need/want to.

Goals of CSS (5/6): performance

Allow developers to produce pages that are fast, use little memory, and use little network bandwidth.

Goals of CSS (6/6): interoperability

Produce clear specs with test suites so authors don't have to do cross-browser testing because of browser bugs.

Goals of CSS (7/6)

(this list is not exhaustive)

CSS 2.1

• CSS 2 (1998): all goals
• CSS 2.1: mainly interoperability
• stable foundation, like a release branch

CSS 2.1 in browsers

• Test suite covers a good bit, but density varies
• Gecko/Firefox not quite feature-complete (mainly paged media)
• Browsers will continue to improve gradually
• e.g., text-decoration rewrite in Firefox 8

Selectors

• Goal: separation of presentation/content
• Level 3 stable (REC) and fully supported by Gecko for years
• Level 4 gathering ideas
  • :matches() is similar to the :-moz-any() in Firefox 4

Values

• css3-values hopefully feature complete, though some features may need to be dropped
• Some new features widely implemented; some not at all
• Firefox 4 supports -moz-calc() [Goal: adaptation], allowing math inside of values, e.g., -moz-calc(50% - 4px)

Media Queries

• Goal: Adaptation (a new approach)
• Level 3 also stable and fully supported by Gecko for years
• Likely to be idea-gathering level 4 drafts soon
• Demo: https://developer.mozilla.org/en-US/demos/detail/css3-cherry-blossom-media-queries

Layout systems

• Goals: Adaptation, enable design, separation of presentation/content
• One of the big deficiencies of present-day CSS
• Multiple proposals solving different but overlapping parts (multicol, flexbox, grid, regions and exclusions and positioned floats, template)
• Hard to specify and implement
• Multicol more stable than others
• Implementation of new css3-flexbox in progress for Gecko/Firefox

Conditional rules

• css3-conditional adds new @supports rule for support testing, like @media
• Likely to be important to allow adoption of new layout systems, which don't degrade gracefully
• Hopefully coming soon to browsers, but not there yet

Fonts

• Goal: enable design
• css3-fonts under development
• downloadable fonts widely implemented, tools help with format issues

Fonts

• downloadable fonts open door for using more font features
• experimental version in Firefox 4
  • Demos: http://people.mozilla.com/~jkew/feature-samples/
• current spec hopefully coming soon to Gecko/Firefox

Fonts

• 'font-stretch' new in Firefox 9 (originally CSS2)
• part of font selection, not a graphical effect
• also more meaningful with downloadable fonts

Text

• Goal: enable design (across the world)
• css3-text specification is approaching being stable
• some new parts widely implemented, some are not
• Firefox 6 implements new text-decoration-* properties (color and style)
• Firefox 6 (more languages in 8) implements auto-hyphenation

Writing Modes

• Goal: enable design, or even just use (across the world)
• css3-writing-modes may be approaching being stable
• Part of the specification of vertical text flow (a big project)
• Firefox 10 implements some new unicode-bidi values that are in this spec

Ruby

• For annotation commonly used in Japanese
• Maybe stable, but debate about feature set (XHTML, HTML5, css3-ruby)
• Patches in progress that need work, hopefully not too far away

Backgrounds and borders

• Level 3 very stable
• Still chasing implementations of the last few features
• Firefox 8 fixes sizing of vector (SVG) images as backgrounds

Image values

• Probably feature complete, but not yet stable
• gradients, element(), and a few other features
• -moz-element() in Firefox 4
• Some new gradient syntax in Firefox 10

CSS transforms

• 2-D transforms widely implemented (just waiting for IE8 and older to go away)
• 3-D transforms new in Firefox 10 (first non-WebKit implementation)
• Demo of 2-D transforms and -moz-element() at https://developer.mozilla.org/en-US/demos/detail/rain-ripples/launch

Transitions

• Allow style changes caused by other things to be animated
• Goals: enable design, performance, user control
• Widely implemented (and coming in IE10), though interoperability needs work

Animations

• Extension of transitions that allows causing animations
• Implemented in Firefox 5
• Still needs a good bit of work to be interoperable

Maybe further in the future?

• css3-content
• css3-lists
• scrollable overflow proposal in css3-gcpm

The end

Questions?