CSS is short for Cascading Style Sheets (CSS), and typically includes the full set of Selectors, CSS properties, values, and @-rules supported by browsers.
CSS is one of several web standards.
For documentation on CSS, how to develop for it, use various properties, see:
- 1 CSS
- 1.1 Priorities
- 1.1.1 2018 Priorities
- 1.1.2 2018 Medium Priorities
- 1.1.3 2018 Lower Priorities
- 1.1.4 Actively Implementing
- 1.1.5 Evaluating
- 1.1.6 Related HTML5
- 1.1.7 Recent CRs
- 1.1.8 Upcoming CRs
- 1.1.9 Shipping Soon
- 1.2 properties
- 1.3 See Also
- 1.1 Priorities
The following CSS specs/proposals are a priority.
These are *in progress* 2018 Priorities for CSS features in Firefox.
- Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418
- Some public input: https://twitter.com/t/status/939273644043366400
- Subsequently discussed by the Platform Layout team at Yallhands in Austin, Texas (further adjustments are likely)
Close to shipping
These features have implementations that are already well in progress and thus it is a priority to finish them and ship.
Fonts Level 4 for Variable Fonts support in particular:
- Bugzilla for Variable Fonts: https://bugzilla.mozilla.org/show_bug.cgi?id=1302685
- unlikely mobile impact, do any mobile platforms ship a variable font at all?
- Fonts 4 (TR FPWD 2017), metabug
Reprioritize Fonts Level 4 accordingly once we have Variable Fonts.
- CSS Shapes (TR CR 2014, another CR was expected in 2017) metabug
- would make mobile use-cases more compelling and closer to native apps
Critical fixes to features or larger specs we already support (more important than new features in general)
- Scroll Anchoring (ED): https://bugzilla.mozilla.org/show_bug.cgi?id=1305957
Drop grid- prefix from various properties (including grid-gap. for CSS Grid)
- List from DevRel kept here: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections
- 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
- Low to no mobile impact, possible tablet impact
(Jen has a demo of bugs / test page at http://labs.jensimmons.com/examples/multicolumn-3-bug-demo.html)
Values and Units 3
- [ ] 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
Scroll Snap update
- Scroll Snap (CR), metabug
- Media Queries 4 (note: new features in 4), metabug, specifically:
- Media Queries 5, metabug, specifically:
- Re-evaluate MQ4/5 prioritization after interaction and prefers-reduced-motion features are implemented.
2018 Medium Priorities
2018 medium priorities are "maybe" items that we're not sure we can get to in 2018, but would really like to (had a lot of interest during yallhands).
- CSS Containment Module Level 1 (FPWD 2017) 'contain' property, size/layout, style, paint. metabug
- potential impact for mobile layouts, mobile web apps
- Chrome shipped in 61
Grid Level 2
Grid Level 2 AKA subgrid (use-cases, a11y implications)
- CSS Grid level 2 (2018-01-31 Resolved to go FPWD) specifically for subgrid
- doing some exploratory implementing, design may (hopefully likely) change accordingly
- see also for quick use-cases / tutorial:
- medium mobile potential impact, different grid layouts for different responsive use-cases
Container Queries Prerequisites
There's a lot of anecdotal demand for Container Queries / Element Queries. See replies here:
- https://twitter.com/t/status/955560233144905733 (strong interest, 100+ retweets!)
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)
- WICG cq-usecases effort (view open issues to help contribute)
- one proposal: https://tomhodgins.github.io/element-queries-spec/element-queries.html
2018 Lower Priorities
Features or areas that are lower priority based on a number of factors.
CSS Images 3
- CSS Images Module Level 3, (2012 CR), metabug
- cross-fade() -- particularly relevant when animating between images
- possible mobile use-case: photos, just taken on device
- image-rendering: pixelated
- mobile use-case: displaying QR codes
- position syntax in radial-gradient()
- low to medium mobile impact
- CSS Box Alignment (WD), metabug
- unlikely mobile impact (mobile layouts more likely to use flexbox with box alignment properties)
- CSS Inline Layout Module Level 3 (TR WD), metabug
Spec in editor's draft - many requests for this
- no to low if any mobile impact - mobile UIs typically do not display scrollbars, or completely build their own.
- Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=812990
- parity with Chrome
SVG properties in CSS
This bit from SVG2:
- intrinsic size keywords: fix #567039 & #1055887, and unprefix (#1322780
- medium mobile impact from height related properties
- Motion Path Module Level 1 (TR WD 2017), meta bug
- unlikely mobile impact, do any mobile sites even try to use this? or is it just cosmetic?
CSS Color Level 4
- Color improvements (wide gamut, color correction, note CSS color correction preffed off)
- low mobile impact (variable lighting anyway, users use of filters)
Implement correct color management of CSS colors (which is really earlier levels of CSS color).
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.
- CSS Houdini - see inside for Houdini implementation thoughts/plan
- working towards (longerterm than 2018) parity with: Chrome 65 supporting CSS Paint API by default
Beyond the above priorities, we should continue to actively implement, fix bugs on the following:
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.
- 3D Transform interop / spec changes, 3D transform bugs
- CSS Masking (W3C CR), metabug
- another clip-path ticket — path(): https://bugzilla.mozilla.org/show_bug.cgi?id=1246764
- focusing on text-decoration-skip https://bugzilla.mozilla.org/show_bug.cgi?id=812990
- text-emphasis (remaining bugs)
- What else left for this module? (JS)
- See "Depends on" in metabug 1221864 (TÇ)
- 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)
Font Rendering Controls
- focusing on font-display descriptor https://bugzilla.mozilla.org/show_bug.cgi?id=1317445 (implemented behind a flag, other browsers too)
- CSS Font Loading Improvements, Multiple bugs
- font inflation removed
- CSS Transform properties (shorthands)
HTML5 layout and presentation related work:
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
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
- No explicit dependency on Stylo, just lower priority
- Selectors4 remaining features
- CSS ::selection fixes + unprefixing
- ... remaining new features? (JS)
As the above priorities get implemented, moving down here to note we're waiting for them to ship.
Image Values and Replaced Content
- 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
Please add subpages for each (unprefixed) CSS property in alphabetical order.
CSS properties which have not yet made it to a Candidate Recommendation (or later), or are only implemented in the wild in prefixed form.
- text-size-adjust (-moz-, -ms-, -webkit-)