CSS: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(put a 2020 header / restructuring / out of date warning up top at least as a stopgap while svoisen and I figure out what to do with this page)
(big update part 1 with dholbert and emilio. we've shipped vast majority of this stuff from the past, and other things have been reprioritized (in bugzilla), and others have outstanding spec issues (working in CSSWG))
Line 9: Line 9:
= CSS =
= CSS =
== Priorities ==
== Priorities ==
The following CSS specs/proposals are a priority.
'''In Progress''': Restructuring this page for 2021.
* DevRel List: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections
 
'''In Progress''': Restructuring this page for 2020.
 
----
'''Previously''': Updating 2018 completions and reprioritizing for '''[[#2019_Priorities|2019]]'''


== To Be Updated ==
== To Be Updated ==
The following sections of this page are out of date as of 2020-01-01 and kept only for historical purposes as part of restructuring this page for 2020.
The following sections of this page are out of date as of 2021-04-13 and kept only for historical purposes as part of restructuring this page for 2020.


If you have questions about any specific CSS feature, please click through to its bug/metabug and check its actual status there.
If you have questions about any specific CSS feature, please click through to its bug/metabug and check its actual status there.
Thanks,
[[User:Tantek|Tantek]] ([http://tantek.com/ tantek.com]) 23:22, 17 January 2020 (UTC)


----
----


* DevRel List: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections
* Metabug for 2019 CSS Priorities: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418
* Metabug for 2019 CSS Priorities: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418


=== To Be Reprioritized ===
==== Values and Units 3 ====
[https://www.w3.org/TR/css3-values/ CSS Values and Units Module Level 3] (CR) [https://bugzilla.mozilla.org/show_bug.cgi?id=741643 metabug]
* [ ] calc() function in particular. [https://bugzilla.mozilla.org/show_bug.cgi?id=1376206 metabug]
* re-prioritize Values and Units 3 once calc fixes have landed.
* [ ] [https://bugzilla.mozilla.org/show_bug.cgi?id=435426 attr function] (at risk) — very useful in combination with CSS Shapes, in the context of a CMS
==== Media Queries ====
* <span id="Media_Queries_4">[https://drafts.csswg.org/mediaqueries-4/ Media Queries 4]</span> (note: [https://drafts.csswg.org/mediaqueries-4/#changes-2012 new features in 4]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1312621 metabug], specifically:
** [https://drafts.csswg.org/mediaqueries-4/#mf-interaction interaction features]  [https://bugzilla.mozilla.org/show_bug.cgi?id=1035774 #1035774] per [https://bugzilla.mozilla.org/show_bug.cgi?id=1312621#c1 2017: supported in Microsoft Edge, Chrome, Safari, Opera, and Android browser]
* [https://drafts.csswg.org/mediaqueries-5/ Media Queries 5], [https://bugzilla.mozilla.org/show_bug.cgi?id=1434491 metabug], specifically:
** [https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion prefers-reduced-motion] [https://bugzilla.mozilla.org/show_bug.cgi?id=1365045 #1365045] per [https://bugs.webkit.org/show_bug.cgi?id=163250 supported in WebKit]
* Re-evaluate MQ4/5 prioritization after interaction and prefers-reduced-motion features are implemented.
** full support of numerical comparators (&lt;, &lt;=, =>, >)
** expansion of negation syntax (and, or, not)
** [https://logs.csswg.org/irc.w3.org/css/2017-08-02/#e841291 2017-08-02 CSSWG resolved to take to CR]
** Also [https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion prefers-reduced-motion] from Level 5 ([https://bugzilla.mozilla.org/show_bug.cgi?id=1365045 #1365045])
** watch for mobile uptake, especially for mobile layout
==== Containment ====
* [https://drafts.csswg.org/css-containment/ CSS Containment Module Level 1] ([https://www.w3.org/TR/2017/WD-css-contain-1-20170221/ FPWD 2017]) 'contain' property, size/layout, style, paint. [https://bugzilla.mozilla.org/show_bug.cgi?id=1150081 metabug]
** potential impact for mobile layouts, mobile web apps
** [http://caniuse.com/containment Chrome shipped in 61]
==== 3D Transforms ====
* 3D Transform interop / spec changes, [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%223d%20transform%22 3D transform bugs]
==== Masking ====
* [https://drafts.fxtf.org/css-masking-1/ CSS Masking] (W3C [https://www.w3.org/TR/css-masking-1/ CR]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1312613 metabug]
** another clip-path ticket — path(): https://bugzilla.mozilla.org/show_bug.cgi?id=1246764
==== Text Decoration ====
[https://drafts.csswg.org/css-text-decor-3/ CSS Text Decoration Module Level 3] ([https://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/ 2013 CR]) ([https://bugzilla.mozilla.org/show_bug.cgi?id=1221864 metabug]), e.g.:
* text-emphasis ([https://bugzilla.mozilla.org/show_bug.cgi?id=1225012 remaining bugs])
* [https://bugzilla.mozilla.org/show_bug.cgi?id=770780 text-underline-position]
* What else left for this module? (JS)
** See "Depends on" in [https://bugzilla.mozilla.org/show_bug.cgi?id=1221864 metabug 1221864]
==== Writing Modes ====
[https://drafts.csswg.org/css-writing-modes-3/ CSS Writing Modes Level 3] ([https://www.w3.org/TR/css-writing-modes/ 2015 CR]) ([https://bugzilla.mozilla.org/show_bug.cgi?id=145503 metabug])
* [https://logs.csswg.org/irc.w3.org/css/2017-08-04/#e847806 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?)
* [https://drafts.csswg.org/css-fonts-3/ Fonts 3], [https://bugzilla.mozilla.org/show_bug.cgi?id=651693 metabug]
==== Under the hood and related ====
* Intersection observer ([https://groups.google.com/forum/#!searchin/mozilla.dev.platform/Intersection$20observer%7Csort:relevance/mozilla.dev.platform/YdKTMvQygl0/etZvkSkeDQAJ Intent to ship thread])
* [https://w3c.github.io/web-animations/ Web Animations API] ([https://bugzilla.mozilla.org/show_bug.cgi?id=875219 metabug])


=== Re-evaluate ===
=== Re-evaluate ===
==== Font Rendering Controls ====
[https://tabatkins.github.io/specs/css-font-display/ 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 ====
[https://www.w3.org/TR/css-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 ====
[https://drafts.csswg.org/css-images-4/] (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 ====
[https://drafts.csswg.org/css-device-adapt/ CSS Device Adaptation Module Level 1] ([https://www.w3.org/TR/css-device-adapt-1/ WD])
==== Related HTML5 ====
[[HTML5]] layout and presentation related work:
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1149357 srcset intrinsic size]
* ...
==== Cascading and Inheritance ====
* [https://drafts.csswg.org/css-cascade-3/ CSS Cascading and Inheritance Level 3] ([https://www.w3.org/TR/css-cascade-3/ CR]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1312619 metabug]
** [https://drafts.csswg.org/css-cascade-3/#changes-2 New features since CSS2.x]
*** scoped styles, animations, and transitions in the cascade.
==== Text Level 3 ====
* [https://drafts.csswg.org/css-text/ Text] (need list of [https://www.w3.org/Style/CSS/Tracker/actions/799 changes since CSS 2.1]), [https://bugzilla.mozilla.org/show_bug.cgi?id=104960 metabug]
==== Selectors 4 ====
[https://drafts.csswg.org/selectors-4/ Selectors 4] (need list of [https://github.com/w3c/csswg-drafts/issues/622 changes since 3]), [https://bugzilla.mozilla.org/show_bug.cgi?id=693083 metabug]
* No explicit dependency on Stylo, just lower priority
* Selectors4 remaining features
** CSS ::selection fixes + unprefixing
** ... remaining new features? (JS)
==== new pseudo-classes ====
* ...
* [[CSS/:autofill|:autofill]]
* ...
==== new properties ====
* ...
* [[CSS/text-size-adjust|text-size-adjust]] (-moz-, -ms-, -webkit-)
* ...
==== Resize Observer ====
* Resize Observer ([https://bugzilla.mozilla.org/show_bug.cgi?id=1272409 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)
* [https://github.com/WICG/cq-usecases WICG cq-usecases effort] ([https://github.com/ResponsiveImagesCG/cq-usecases/issues view open issues] to help contribute)
* one proposal: https://tomhodgins.github.io/element-queries-spec/element-queries.html
==== Scroll Snap update ====
* [https://drafts.csswg.org/css-scroll-snap-1/ Scroll Snap] ([https://www.w3.org/TR/css-scroll-snap-1/ CR]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1231777 metabug]
** Fix [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%22scroll+snap%22 related bugs] - update to latest version of the spec
** [https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/K4m85YRD1II Chrome Intent to Ship] (2018-05-10)
** [https://caniuse.com/#feat=css-snappoints Safari 11 / iOS11+ supports], [https://twitter.com/rachelandrew/status/969590800966455301 Safari-only demo]
** likely medium impact on mobile
==== Scroll Anchoring ====
* [https://drafts.csswg.org/css-scroll-anchoring/ Scroll Anchoring] (ED): https://bugzilla.mozilla.org/show_bug.cgi?id=1305957
==== Sizing ====
[https://drafts.csswg.org/css-sizing-3/ CSS Intrinsic & Extrinsic Sizing Module Level 3] ([https://www.w3.org/TR/css-sizing-3/ TR] WD) [https://bugzilla.mozilla.org/show_bug.cgi?id=1312587 metabug]
* intrinsic size keywords: fix [https://bugzilla.mozilla.org/show_bug.cgi?id=567039 #567039] & [https://bugzilla.mozilla.org/show_bug.cgi?id=1055887 #1055887], and unprefix ([https://bugzilla.mozilla.org/show_bug.cgi?id=1322780 #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 ====
[https://drafts.csswg.org/css-shadow-parts/ CSS Shadow Parts] ([https://www.w3.org/TR/css-shadow-parts-1/ TR] WD)
* Bugzilla: [https://bugzilla.mozilla.org/show_bug.cgi?id=1505489 #1505489] and [https://bugzilla.mozilla.org/show_bug.cgi?id=1559074 #1559074]
* need: browser status(es)
==== Filter Effects Level 2 ====
* [https://drafts.fxtf.org/filters-2/#BackdropFilterProperty Filter Effects Module Level 2: backdrop-filter]
** [https://bugzilla.mozilla.org/show_bug.cgi?id=1178765 backdrop-filter bug] (caniuse: only Safari supports)
** also on Trello Future Backlog
==== Inline Layout ====
* [https://drafts.csswg.org/css-inline/ CSS Inline Layout Module Level 3] ([https://www.w3.org/TR/css-inline-3/ TR WD]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1312611 metabug]
** focusing on CSS Initial-letter related features ([https://bugzilla.mozilla.org/show_bug.cgi?id=1273019 initial-letter * metabug])
*** one (implementation design) blocker issue: https://github.com/w3c/csswg-drafts/issues/743
==== Houdini ====
==== Houdini ====
* [[CSS/Houdini|CSS Houdini]] - see inside for Houdini implementation thoughts/plan
* [[CSS/Houdini|CSS Houdini]] - see inside for Houdini implementation thoughts/plan

Revision as of 17:49, 13 April 2021

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:

CSS

Priorities

In Progress: Restructuring this page for 2021.

To Be Updated

The following sections of this page are out of date as of 2021-04-13 and kept only for historical purposes as part of restructuring this page for 2020.

If you have questions about any specific CSS feature, please click through to its bug/metabug and check its actual status there.


Re-evaluate

Houdini

  • CSS Houdini - see inside for Houdini implementation thoughts/plan
  • working towards (longer-term)

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

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

CSS Images 3

SVG properties in CSS

This bit from SVG2:

Motion Path

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.

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.

Previously

See Also

Retrieved from "https://wiki.allizom.org/index.php?title=CSS&oldid=1234968"