Revision as of 04:48, 21 August 2019

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:

https://developer.mozilla.org/en/CSS

CSS

Priorities

The following CSS specs/proposals are a priority.

In Progress: Updating 2018 completions and reprioritizing for 2019

List from DevRel kept here: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections
Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418

To Be Reprioritized

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

Media Queries

Media Queries 4 (note: new features in 4), metabug, specifically:
- interaction features #1035774 per 2017: supported in Microsoft Edge, Chrome, Safari, Opera, and Android browser
Media Queries 5, metabug, specifically:
- prefers-reduced-motion #1365045 per supported in WebKit
Re-evaluate MQ4/5 prioritization after interaction and prefers-reduced-motion features are implemented.
- full support of numerical comparators (<, <=, =>, >)
- expansion of negation syntax (and, or, not)
- 2017-08-02 CSSWG resolved to take to CR
- Also prefers-reduced-motion from Level 5 (#1365045)
- watch for mobile uptake, especially for mobile layout

Containment

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

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.:

text-emphasis (remaining bugs)
text-underline-position
What else left for this module? (JS)
- See "Depends on" in metabug 1221864

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?)

Fonts 3, metabug

Under the hood and related

Intersection observer (Intent to ship thread)
Web Animations API (metabug)

Re-evaluate

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

Image Values and Replaced Content

[1] (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)

Device Adaptation

CSS Device Adaptation Module Level 1 (WD)

Related HTML5

HTML5 layout and presentation related work:

srcset intrinsic size
...

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

new pseudo-classes

...
:autofill
...

new properties

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

Resize Observer

Resize Observer (bugzilla, intent to implement coming)

Container Queries Prerequisites

This is a high priority to evaluate how workable it is to polyfill/prototype once we have Resize Observer (see above) implemented and working

There's a lot of anecdotal demand for Container Queries / Element Queries. See replies here:

https://twitter.com/t/status/939273644043366400
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

Scroll Snap update

Scroll Snap (CR), metabug
- Fix related bugs - update to latest version of the spec
- Chrome Intent to Ship (2018-05-10)
- Safari 11 / iOS11+ supports, Safari-only demo
- likely medium impact on mobile

Scroll Anchoring

Scroll Anchoring (ED): https://bugzilla.mozilla.org/show_bug.cgi?id=1305957

Sizing

CSS Intrinsic & Extrinsic Sizing Module Level 3 (TR WD) metabug

intrinsic size keywords: fix #567039 & #1055887, and unprefix (#1322780
- 'min-content', 'max-content' in particular (needs bugzilla links)
- re-evaluate priority at this point, e.g. 'fit-content' is lower priority
medium mobile impact from height related properties

Shadow Parts

CSS Shadow Parts (TR WD)

Bugzilla: #1505489 and #1559074
need: browser status(es)

Filter Effects Level 2

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

Inline Layout

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

Houdini

CSS Houdini - see inside for Houdini implementation thoughts/plan
working towards (longer-term)
- Properties & Values API
- prerequisites for Paint API (Worklets, parts of Typed OM)
- parity with: Chrome 65 supporting CSS Paint API by default
- re-evaluate priority of rest of Houdini at this point and re-sort accordingly

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
unlikely mobile impact (mobile layouts more likely to use flexbox with box alignment properties)

Conic Gradients

Multi-column

CSS Multi-column Layout (TR WD), metabug
- unprefixing, column-span, a11y bug hack removal, column-break
- 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)

CSS Images 3

CSS Images Module Level 3, (2012 CR), metabug
cross-fade() -- particularly relevant when animating between images
image-orientation:none
- 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

SVG properties in CSS

This bit from SVG2:

1383650: Implement SVG geometry properties in CSS

Motion Path

Motion Path Module Level 1 (TR WD 2017), meta bug
- Blink: 2015-06-09 intent ship; Chrome 56+
unlikely mobile impact, do any mobile sites even try to use this? or is it just cosmetic?

CSS Color Level 4

CSS Color Module Level 4 (ED), metabug

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.

CSS Paged Media Module Level 3 (old 2013 WD) metabug

More specs / features in particular TBD.

Other

font inflation removed
CSS Transform properties (shorthands)

properties

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

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

Previously

2018 public input: https://twitter.com/t/status/939273644043366400
- Subsequently discussed by the Platform Layout team at Yallhands and by the Layout team at Mozlando2018

CSS: Difference between revisions