CSS: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(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))
(finished most of the rest of the things, a few things dropped, drop unmaintained dashboard & old meta bugs, forward to GeckoGoalsfor2021#CSS for current CSS priorities)
 
Line 9: Line 9:
= CSS =
= CSS =
== Priorities ==
== Priorities ==
'''In Progress''': Restructuring this page for 2021.
* See [[GeckoGoalsfor2021#CSS]]
 
== 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.
 
----
 
* 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
 
 
=== Re-evaluate ===
==== Houdini ====
* [[CSS/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: [https://developers.google.com/web/updates/2018/01/paintapi Chrome 65 supporting CSS Paint API by default]
** re-evaluate priority of rest of Houdini at this point and re-sort accordingly
 
==== Box Alignment ====
* [https://drafts.csswg.org/css-align/ CSS Box Alignment] ([https://www.w3.org/TR/css-align-3/ WD]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1105570 metabug]
** all properties for blocks (e.g. [https://bugzilla.mozilla.org/show_bug.cgi?id=1105571 1105571])
** and some details for flexbox (see metabug 1105570 Depends on)
** spec CR depends on resolving [https://github.com/w3c/csswg-drafts/labels/css-align-3 open css-align-3 issues]
* unlikely mobile impact (mobile layouts more likely to use flexbox with box alignment properties)
 
==== Conic Gradients ====
* [https://drafts.csswg.org/css-images-4/#conic-gradients CSS Images Module Level 4: conic-gradient()] ([https://www.w3.org/TR/css-images-4/ WG])
* Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1175958
* [https://www.chromestatus.com/feature/5706155347148800 Supported in Chrome 69+, Opera 56+, Android, and in Safari Technology Preview]
 
==== Multi-column ====
* [https://drafts.csswg.org/css-multicol/ CSS Multi-column Layout] ([https://www.w3.org/TR/css3-multicol/ TR WD]), [https://bugzilla.mozilla.org/show_bug.cgi?id=684062 metabug]
** unprefixing, [https://bugzilla.mozilla.org/show_bug.cgi?id=616436 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 ====
* [https://drafts.csswg.org/css-images-3/ CSS Images Module Level 3], ([https://www.w3.org/TR/css3-images/ 2012 CR]), [https://bugzilla.mozilla.org/show_bug.cgi?id=703431 metabug]
* [https://bugzilla.mozilla.org/show_bug.cgi?id=546052 cross-fade()] -- particularly relevant when animating between images
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1358327 image-orientation:none]
** possible mobile use-case: photos, just taken on device
* [https://bugzilla.mozilla.org/show_bug.cgi?id=856337 image-rendering: pixelated]
** mobile use-case: displaying QR codes
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1288941 position syntax in radial-gradient()]
* low to medium mobile impact
 
==== SVG properties in CSS ====
This bit from SVG2:
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1383650 1383650: Implement SVG geometry properties in CSS]
 
==== Motion Path ====
* [https://drafts.fxtf.org/motion-1/ Motion Path Module Level 1] ([https://www.w3.org/TR/motion-1/ TR] WD 2017), [https://bugzilla.mozilla.org/show_bug.cgi?id=1186329 meta bug]
** Blink: [https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/N4o2MoV1zuw 2015-06-09 intent ship]; [https://codepen.io/danwilson/post/css-motion-paths-2016 Chrome 56+]
* unlikely mobile impact, do any mobile sites even try to use this? or is it just cosmetic?
 
==== CSS Color Level 4 ====
[https://drafts.csswg.org/css-color-4/ CSS Color Module Level 4] (ED), [https://bugzilla.mozilla.org/show_bug.cgi?id=1352753 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.
* [https://drafts.csswg.org/css-page-3/ CSS Paged Media Module Level 3] ([https://www.w3.org/TR/css3-page/ old 2013 WD]) [https://bugzilla.mozilla.org/show_bug.cgi?id=286443 metabug]
More specs / features in particular TBD.
 
==== Other ====
* font inflation removed
* CSS Transform properties (shorthands)


== properties ==
== properties ==
Line 93: Line 21:


== Previously ==
== Previously ==
* 2019 Metabug for CSS Priorities: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418
* 2018 public input: https://twitter.com/t/status/939273644043366400
* 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]]
** Subsequently discussed by the Platform Layout team at [[Yallhands]] and by the Layout team at [[Mozlando2018]]
Line 104: Line 33:
* [[Platform]]
* [[Platform]]
* [https://developer.mozilla.org/en/CSS MDN: CSS home page]
* [https://developer.mozilla.org/en/CSS MDN: CSS home page]
* [http://mozdevs.github.io/devrel-dashboard/ Mozilla DevRel Dashboard] - dynamic overview of [META] and other high level bugs in [[CSS]], [[DOM]], [[DevTools]], [[MDN]], [[Toolkit]], etc.
* [https://wiki.csswg.org/ CSS Working Group Wiki]
* [https://wiki.csswg.org/ CSS Working Group Wiki]

Latest revision as of 17:51, 20 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

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=1235119"