CSS

This is the Mozilla wiki home page for Cascading Style Sheets (CSS), one of several areas of Open Web Standards.

CSS

Platform priorities

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

2018 Priorities

These are *in progress* 2018 Priorities for CSS features in Firefox.

(currently being discussed at Yallhands in Austin, Texas)

Some public discussion here:

• https://twitter.com/t/status/939273644043366400

Grid Level 2

Grid Level 2 AKA subgrid

• CSS Grid level 2 specifically for subgrid
• doing some exploratory implementing, design may (hopefully likely) change accordingly

Shapes

• CSS Shapes (CR, another CR expected any moment now in 2017) metabug
  • shape-outside

Containment

• CSS Containment Module Level 1 (FPWD) 'contain' property, size/layout, style, paint
  • Main bug: bug 1150081

Multi-column

• CSS Multi-column Layout (2011 CR, but multicol editor's draft has changes), metabug
  • unprefixing, column-span, a11y bug hack removal, column-break
  • Alias page-break-* to break-*: https://bugzilla.mozilla.org/show_bug.cgi?id=775618

(Jen has a demo of bugs / test page at http://labs.jensimmons.com/examples/multicolumn-3-bug-demo.html)

CSS Color Level 4

CSS Color Module Level 4 (ED), metabug

• Color improvements (wide gamut, color correction, note CSS color correction preffed off)

Media Queries 4

• Media Queries 4 (note: new features in 4), metabug
  • full support of numerical comparators (<, <=, =>, >)
  • expansion of negation syntax (and, or, not)
  • interaction features #1035774
  • 2017-08-02 CSSWG resolved to take to CR

Actively Implementing

Beyond the above priorities, we should continue to actively implement, fix bugs on the following:

• Stylo (metabug)

Flexbox

Mozilla has a pretty solid complete Flexbox (W3C CR, just waiting on feature-interaction tests to go PR) implementation. We are working on some fixes to make it even better, e.g.

• Metabug for to-be-implemented spec changes

Grid

• CSS Grid (CR) metabug
  • lots of work

Box Alignment

• CSS Box Alignment (WD), metabug
  • all properties for blocks (e.g. 1105571)
  • and some details for flexbox (see metabug 1105570 Depends on)
  • spec CR depends on resolving open css-align-3 issues

3D Transforms

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

Inline Layout

• CSS Inline Layout Module Level 3 (TR WD), metabug
  • focusing for now on CSS Initial-letter related features (initial-letter * metabug)
    • one (implementation design) blocker issue: https://github.com/w3c/csswg-drafts/issues/743

Masking

• CSS Masking (W3C CR), metabug
  • another clip-path ticket — path(): https://bugzilla.mozilla.org/show_bug.cgi?id=1246764

Sizing

CSS Intrinsic & Extrinsic Sizing Module Level 3 (WD)

• intrinsic size keywords: fix bug 567039 and bug 1055887 and maybe others and unprefix (meta: 1312587)

Text Decoration

CSS Text Decoration Module Level 3 (2013 CR) (metabug), e.g.:

• focusing on text-decoration-skip https://bugzilla.mozilla.org/show_bug.cgi?id=812990
• text-emphasis (remaining bugs)
• text-underline-position
• What else left for this module? (JS)
  • See "Depends on" in metabug 1221864 (TÇ)

Writing Modes

CSS Writing Modes Level 3 (2015 CR) (metabug)

• 2017-08-04 CSSWG Resolved to publish an updated CR

Under the hood and related

• Intersection observer (Intent to ship thread)
• Resize observer (intent to implement coming)
• Web Animations API (metabug)

Evaluating

Font Rendering Controls

CSS Font Rendering Controls Module Level 1 (ED)

• focusing on font-display descriptor https://bugzilla.mozilla.org/show_bug.cgi?id=1317445 (implemented behind a flag, other browsers too)

Font Loading

CSS Font Loading Module Level 3 https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API shipped in 41

• CSS Font Loading Improvements, Multiple bugs

Other

• font inflation removed
• CSS Transform properties (shorthands)

Related HTML5

HTML5 layout and presentation related work:

• srcset intrinsic size
• ...

Recent CRs

Cascading and Inheritance

• CSS Cascading and Inheritance Level 3 (CR), metabug
  • New features since CSS2.x
    • scoped styles, animations, and transitions in the cascade.
• Scroll Snap (CR), metabug
  • Fix related bugs
• Grid (see above)

Upcoming CRs

These CRs are expected in 2017:

For all potential CRs:

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

• Box Alignment (see above)

Fonts Level 3

• Fonts 3, metabug

Text Level 3

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

Selectors 4

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

• No explicit dependency on Stylo, just lower priority
• Selectors4 remaining features
  • CSS ::selection fixes + unprefixing
  • ... remaining new features? (JS)

Shipping Soon

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

Values and Units 3

CSS Values and Units Module Level 3 (CR)

• [ ] attr function (at risk) — very useful in combination with CSS Shapes, in the context of a CMS

Image Values and Replaced Content

CSS Image Values and Replaced Content Module Level 3 (CR)

• image() function
• [ ] xywh fragment syntax

Style sheet APIs for Add-ons

• style sheet APIs in add-ons SDK / loading async APIs (to be handled by stylo)

Filter Effects Level 2

• Filter Effects Module Level 2: backdrop-filter
  • backdrop-filter bug (caniuse: only Safari supports)
  • also on Trello Future Backlog

Motion Path Module

https://www.w3.org/TR/motion-1/ (currently Working Draft)

Device Adaptation

CSS Device Adaptation Module Level 1 (WD)

Houdini

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

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

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

• CSS3
• HTML5
• Standards
• MDN: CSS home page
• Mozilla DevRel Dashboard - dynamic overview of [META] and other high level bugs in CSS, DOM, DevTools, MDN, Toolkit, etc.
• CSS Working Group Wiki