CSS

This is the Mozilla wiki home page for Cascading Style Sheets (CSS).

• CSS/
• CSS/:autofill
• CSS/Houdini
• CSS/text-overflow
• CSS/text-size-adjust

CSS

Platform priorities

The following CSS specs/proposal are a priority for the Platform.

Actively Implementing

Flexbox

Mozilla has a pretty solid complete Flexbox (W3C CR) implementation. We are working on some fixes to make it even better, e.g.

• 812687

Grid

• CSS Grid (CR) metabug
  • lots of work (including for subgrid)

Shapes

• CSS Shapes (CR) metabug
  • shape-outside

Houdini

• CSS Houdini - see inside for Houdini implementation thoughts/plan

Box Alignment

• CSS Box Alignment (WD), metabug
  • all properties for blocks (1040695, 1105571)
  • and some details for flexbox (see 1105570 Depends on)

Multi-column

• CSS Multi-column Layout (CR), metabug
  • unprefixing, column-span, a11y bug hack removal, column-break

3D Transforms

• 3D Transform interop / spec changes, "3d transform" bugs

Inline Layout

• CSS Inline Layout Module Level 3 (TR WD), metabug
  • specifically CSS Initial-letter related features (initial-letter * metabug)

Masking

• CSS Masking (W3C CR), metabug
  • 'clip-path' in particular

Under the hood and related

• Stylo
• Web Animations API
• PDF support
• Intersection observer
• Resize observer

Evaluating

• Colors 4 syntax
• Color improvements (wide gamut, color correction, note CSS color correction preffed off)
• CSS Media Queries 4 work (interaction, negation, etc) - https://bugzilla.mozilla.org/show_bug.cgi?id=1035774
• Selectors4
  • CSS :placeholder-shown
  • CSS :focus-within
  • CSS ::selection fixes + unprefixes
• SVG related
  • [] attr function
  • [] xywh fragment syntax
  • [] SVG image sizing

• CSS Containment size/layout, style, paint

• CSS Font Loading Improvements, Multiple bugs e.g., https://bugzilla.mozilla.org/show_bug.cgi?id=1157064
• font inflation removed
• style sheet APIs in add-ons SDK / loading async APIs (to be handled by stylo)
• Filter Effects Module Level 2 - backdrop-filter
• CSS Transform properties (shorthands)

Recent CRs

At the TPAC 2016 CSS WG f2f, the WG resolved to work on taking the following WDs to CR by end of 2016.

Recent CRs before the f2f:

• CSS Cascading and Inheritance Level 3 (CR), metabug
  • New features since CSS2.x
    • 'all' property
    • scoped styles, animations, and transitions in the cascade.

These have made it into CR since that f2f:

• Scroll Snap (CR), metabug
  • Fix related bugs

Upcoming CRs

These CRs are expected by end of 2016:

• Box Alignment (see above)

• Grid (see above)

• Media Queries 4 (note: new features in 4), metabug

• Selectors 4 (need list of changes since 3), metabug

• Text (need list of changes since CSS 2.1), metabug

For all potential CRs:

• Which browsers have openly announced implementations or intent to implement? (links?)

Related HTML5

HTML5 layout and presentation related work:

• srcset intrinsic size
• dialog element (fullscreen interactions, and since showModalDialog being deprecated/removed) #840640
• ...

Shipping Soon

As the above priorities get implemented, moving down here to note we're waiting for them to ship.

49:

• CSS Masking (2014 CR), https://bugzilla.mozilla.org/show_bug.cgi?id=686281
• CSS handling of HTML5 <details> <summary> - https://bugzilla.mozilla.org/show_bug.cgi?id=591737
• Background-position x/y

48:

• calc() for numbers / unit algebra (CR/WD), https://bugzilla.mozilla.org/show_bug.cgi?id=594933

properties

Please add subpages for each (unprefixed) CSS property in alphabetical order.

• ...
• overflow
• ...
• text-overflow
• ...

in development

CSS properties which have not yet made it to a Candidate Recommendation (or later), or are only implemented in the wild in prefixed form.

new pseudo-classes

• ...
• :autofill
• ...

new properties

• ...
• text-size-adjust (-moz-, -ms-, -webkit-)
• ...

see also

• https://developer.mozilla.org/en/CSS
• CSS3
• HTML5
• Standards