MozillaWiki

CSS: Difference between revisions

Page Discussion

CSS (view source)

Revision as of 17:06, 5 December 2018

201 bytes removed ,  5 December 2018
knock out things we've completed, and collect things that need reprioritizing, re-evaluating the status
(some updates from Mozlando2018, more coming!)
(knock out things we've completed, and collect things that need reprioritizing, re-evaluating the status)
Line 12: Line 12:


'''In Progress''': Updating 2018 completions and reprioritizing for '''[[#2019_Priorities|2019]]'''
'''In Progress''': Updating 2018 completions and reprioritizing for '''[[#2019_Priorities|2019]]'''
* List from DevRel kept here: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections


=== 2018 Priorities ===
=== 2018 Priorities ===
Line 22: Line 23:
These features have implementations that are already well in progress and thus it is a priority to finish them and ship.
These features have implementations that are already well in progress and thus it is a priority to finish them and ship.


===== Variable Fonts =====
==== Grid Level 2 ====
<span id="Fonts_Level_4">Fonts Level 4</span> for Variable Fonts support in particular:
Grid Level 2 AKA subgrid (use-cases, a11y implications)
* Bugzilla for Variable Fonts: https://bugzilla.mozilla.org/show_bug.cgi?id=1302685
* [https://drafts.csswg.org/css-grid-2/ CSS Grid level 2] (2018-01-31 Resolved to go FPWD) specifically [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=subgrid for subgrid]
**  unlikely mobile impact, do any mobile platforms ship a variable font at all?
* doing some exploratory implementing, design may (hopefully likely) change accordingly
* [https://drafts.csswg.org/css-fonts-4/ Fonts 4] ([https://www.w3.org/TR/css-fonts-4/ TR] FPWD 2017), [https://bugzilla.mozilla.org/show_bug.cgi?id=css-fonts-4 metabug]
* see also for quick use-cases / tutorial:
Reprioritize Fonts Level 4 accordingly once we have Variable Fonts.
** http://fantasai.inkedblade.net/style/discuss/subgrid-markup/
 
* medium mobile potential impact, different grid layouts for different responsive use-cases
===== Shapes =====
* [https://drafts.csswg.org/css-shapes/ CSS Shapes] ([https://www.w3.org/TR/css-shapes/ TR] CR 2014, another CR was expected in 2017) [https://bugzilla.mozilla.org/show_bug.cgi?id=1040714 metabug]
** [https://bugzilla.mozilla.org/show_bug.cgi?id=1098939 shape-outside]
* would make mobile use-cases more compelling and closer to native apps
 
==== Critical Fixes ====
Critical fixes to features or larger specs we already support (more important than new features in general)
* ✅61 <s>[https://bugzilla.mozilla.org/show_bug.cgi?id=1398482 Drop grid- prefix from various properties] (including grid-gap. for CSS Grid)</s>
** [https://twitter.com/regocas/status/960631270140203008]
* List from DevRel kept here: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections
 
==== 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
** 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 ====
==== Values and Units 3 ====
Line 72: Line 56:
** potential impact for mobile layouts, mobile web apps
** potential impact for mobile layouts, mobile web apps
** [http://caniuse.com/containment Chrome shipped in 61]
** [http://caniuse.com/containment Chrome shipped in 61]
==== Grid Level 2 ====
Grid Level 2 AKA subgrid (use-cases, a11y implications)
* [https://drafts.csswg.org/css-grid-2/ CSS Grid level 2] (2018-01-31 Resolved to go FPWD) specifically [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=subgrid for subgrid]
* doing some exploratory implementing, design may (hopefully likely) change accordingly
* see also for quick use-cases / tutorial:
** http://fantasai.inkedblade.net/style/discuss/subgrid-markup/
* 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/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


=== 2018 Lower Priorities ===
=== 2018 Lower Priorities ===
Features or areas that are lower priority based on a number of factors.
Features or areas that are lower priority based on a number of factors.
==== 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
==== Scrollbar Styling ====
Spec in editor's draft - many requests for this
* https://drafts.csswg.org/css-scrollbars-1/
* no to low if any mobile impact - mobile UIs typically do not display scrollbars, or completely build their own.
==== 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.


=== Actively Implementing ===
=== Actively Implementing ===
Line 249: Line 181:
==== Resize Observer ====
==== Resize Observer ====
* Resize Observer ([https://bugzilla.mozilla.org/show_bug.cgi?id=1272409 bugzilla], intent to implement coming)
* 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 ====
==== Scroll Snap update ====
Line 310: Line 252:
CSS Conic Gradients
CSS Conic Gradients
* need: spec link, bugzilla link(s), browser status(es)
* need: spec link, bugzilla link(s), browser status(es)
==== Shipped and evaluate follow up ====
===== Variable Fonts =====
<span id="Fonts_Level_4">Fonts Level 4</span> 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?
* [https://drafts.csswg.org/css-fonts-4/ Fonts 4] ([https://www.w3.org/TR/css-fonts-4/ TR] FPWD 2017), [https://bugzilla.mozilla.org/show_bug.cgi?id=css-fonts-4 metabug]
Reprioritize Fonts Level 4 accordingly once we have Variable Fonts.
===== Shapes =====
* [https://drafts.csswg.org/css-shapes/ CSS Shapes] ([https://www.w3.org/TR/css-shapes/ TR] CR 2014, another CR was expected in 2017) [https://bugzilla.mozilla.org/show_bug.cgi?id=1040714 metabug]
** [https://bugzilla.mozilla.org/show_bug.cgi?id=1098939 shape-outside]
* would make mobile use-cases more compelling and closer to native apps
=== 2019 Needs Reprioritizing ===
These are all items we made progress in 2018 (in some cases shipping features or large portions there of) and need to re-evaluate what’s left (if anything) for 2019
==== 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)
==== ---- ====
Former 2018 Lower Priorities, need re-evaluation for 2019:
==== 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.


== See Also ==
== See Also ==
Tantek
canmove, Confirmed users
2,675

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/1204805"