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)
- Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418
- Some public input: https://twitter.com/t/status/939273644043366400
Critical Fixes
Critical fixes to features or larger specs we already support (more important than new features in general)
Shapes
- CSS Shapes (CR, another CR expected any moment now in 2017) metabug
Grid Level 2
Grid Level 2 AKA subgrid (use-cases, a11y implications)
- CSS Grid level 2 specifically for subgrid
- doing some exploratory implementing, design may (hopefully likely) change accordingly
- see also for quick use-cases / tutorial:
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
Scroll Snap update
- Scroll Snap (CR), metabug
- Fix related bugs
Scrollbar Styling
Spec in editor's draft - many requests for this
text-decoration-skip
- Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=812990
- parity with Chrome
Sizing
CSS Intrinsic & Extrinsic Sizing Module Level 3 (WD) metabug
Containment
- CSS Containment Module Level 1 (FPWD) 'contain' property, size/layout, style, paint. metabug
Multi-column
- CSS Multi-column Layout (TR WD), 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)
Fonts Level 4
For Variable Fonts support in particular:
- Bugzilla for Variable Fonts: https://bugzilla.mozilla.org/show_bug.cgi?id=1302685
- Fonts 4, metabug
(reprioritize Fonts Level 4 accordingly once we have Variable Fonts)
Values and Units 3
CSS Values and Units Module Level 3 (CR) metabug
- [ ] calc() function in particular. metabug
- re-prioritize Values and Units 3 once calc fixes have landed.
- [ ] attr function (at risk) — very useful in combination with CSS Shapes, in the context of a CMS
CSS Color Level 4
CSS Color Module Level 4 (ED), metabug
- Color improvements (wide gamut, color correction, note CSS color correction preffed off)
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
- focusing for now on CSS Initial-letter related features (initial-letter * metabug)
SVG properties in CSS
This bit from SVG2:
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
Container Queries Prerequisites
There's a lot of anecdotal demand for Container Queries / Element Queries. See replies here:
We should at least figure out what features / bug fixes we would need to address to even consider something like Container Queries (which we should also give input on)
- RICG cq-usecases: https://github.com/ResponsiveImagesCG/cq-usecases (Requirements section? #36)
- one proposal: https://tomhodgins.github.io/element-queries-spec/element-queries.html
Better Print Support
Start looking at what specs and features would significantly improve print support. Much of this is testing and bugfixing edgecases of existing features, some of it may require or benefit from new specs/features.
More specs / features in particular TBD.
Actively Implementing
Beyond the above priorities, we should continue to actively implement, fix bugs on the following:
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.
Grid
3D Transforms
- 3D Transform interop / spec changes, 3D transform bugs
Masking
- CSS Masking (W3C CR), metabug
- another clip-path ticket — path(): https://bugzilla.mozilla.org/show_bug.cgi?id=1246764
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
Fonts Level 3
Wrap-up the few remaining bugs, or declare that we're done (e.g. font-variant as a descriptor?)
- 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:
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.
- New features since CSS2.x
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)
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.
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
- 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