MozillaWiki

CSS: Difference between revisions

Page Discussion

CSS (view source)

Revision as of 17:51, 20 April 2021

14,388 bytes removed ,  20 April 2021
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
(medium priorities, note drop grid- prefix)
(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)
 
(43 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is the Mozilla wiki home page for Cascading Style Sheets (CSS), one of several areas of Open Web [[Standards]].
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


<span style="float:right">__TOC__</span>
<span style="float:right">__TOC__</span>
= CSS =
= CSS =
== Platform priorities ==
== Priorities ==
The following CSS specs/proposals are a priority for the [[Platform]].
* See [[GeckoGoalsfor2021#CSS]]
 
=== 2018 Priorities ===
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)
 
==== Critical Fixes ====
Critical fixes to features or larger specs we already support (more important than new features in general)
* [https://drafts.csswg.org/css-scroll-anchoring/ Scroll Anchoring] (ED): https://bugzilla.mozilla.org/show_bug.cgi?id=1305957
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1398482 Drop grid- prefix from various properties] (CSS Grid)
* List from DevRel kept here: http://mozdevs.github.io/devrel-dashboard/ in CSS and Layout sections
 
==== Fonts Level 4 ====
For Variable Fonts support in particular:
* Bugzilla for Variable Fonts: https://bugzilla.mozilla.org/show_bug.cgi?id=1302685
* [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.
 
==== 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+]
 
==== 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]
 
==== 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]
 
==== 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]
 
==== 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.
* [ ] attr function (at risk) — very useful in combination with CSS Shapes, in the context of a CMS
 
==== SVG properties in CSS ====
This bit from SVG2:
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1383650 1383650: Implement SVG geometry properties in CSS]
 
==== Grid Level 2 ====
Grid Level 2 AKA subgrid (use-cases, a11y implications)
* [https://drafts.csswg.org/css-grid-2/ CSS Grid level 2] 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/
 
=== 2018 Medium Priorities ===
==== Media Queries 4 ====
* [https://drafts.csswg.org/mediaqueries-4/ Media Queries 4] (note: [https://drafts.csswg.org/mediaqueries-4/#changes-2012 new features in 4]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1312621 metabug]
** full support of numerical comparators (&lt;, &lt;=, =>, >)
** expansion of negation syntax (and, or, not)
** [https://drafts.csswg.org/mediaqueries-4/#mf-interaction interaction features]  [https://bugzilla.mozilla.org/show_bug.cgi?id=1035774 #1035774]
** [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])
 
==== 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 for now 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
 
==== Scrollbar Styling ====
Spec in editor's draft - many requests for this
* https://drafts.csswg.org/css-scrollbars-1/
 
==== 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
(Jen has a demo of bugs / test page at http://labs.jensimmons.com/examples/multicolumn-3-bug-demo.html)
 
==== 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]
 
==== Container Queries Prerequisites ====
There's a lot of anecdotal demand for Container Queries / Element Queries. See replies here:
* https://twitter.com/t/status/939273644043366400
 
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 issues])
* 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]
 
==== 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)
 
Implement correct color management of CSS colors (which is really earlier levels of CSS color).
 
==== CSS Images 3 ====
* [https://drafts.csswg.org/css-images-3/ CSS Images Module Level 3]
* [Meta bug https://bugzilla.mozilla.org/show_bug.cgi?id=703431]
* [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]
* [https://bugzilla.mozilla.org/show_bug.cgi?id=856337 image-rendering: pixelated]
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1288941 position syntax in radial-gradient()]
 
=== 2018 Lower Priorities ===
Features or areas that distinctly got lower support during [[Yallhands]] Layout team prioritization discussions.
 
==== 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.
 
==== text-decoration-skip ====
* Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=812990
* parity with Chrome
 
==== Houdini ====
* [[CSS/Houdini|CSS Houdini]] - see inside for Houdini implementation thoughts/plan
* parity with: [https://developers.google.com/web/updates/2018/01/paintapi Chrome 65 supporting CSS Paint API by default]
 
=== Actively Implementing ===
Beyond the above priorities, we should continue to actively implement, fix bugs on the following:
 
* [[Stylo]] ([https://bugzilla.mozilla.org/show_bug.cgi?id=1243581 metabug])
 
==== Flexbox ====
Mozilla has a pretty solid complete [https://www.w3.org/TR/css-flexbox-1/ 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.
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1055888 Metabug for to-be-implemented spec changes]
 
==== Grid ====
* [https://drafts.csswg.org/css-grid/ CSS Grid] ([https://www.w3.org/TR/2017/CR-css-grid-1-20170509/ CR]) [https://bugzilla.mozilla.org/show_bug.cgi?id=1312610 metabug]
** [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%5Bcss-grid%5D lots of work]
 
==== 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.:
* focusing on text-decoration-skip https://bugzilla.mozilla.org/show_bug.cgi?id=812990
* 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] (TÇ)
 
==== 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])
* Resize observer (intent to implement coming)
* [https://w3c.github.io/web-animations/ Web Animations API] ([https://bugzilla.mozilla.org/show_bug.cgi?id=875219 metabug])
 
=== Evaluating ===
==== 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
 
==== Other ====
* font inflation removed
* CSS Transform properties (shorthands)
 
=== Related HTML5 ===
[[HTML5]] layout and presentation related work:
* [https://bugzilla.mozilla.org/show_bug.cgi?id=1149357 srcset intrinsic size]
* ...
 
=== Recent CRs ===
==== 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.
 
=== Upcoming CRs ===
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 ====
* [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)
 
=== Shipping Soon ===
As the above priorities get implemented, moving down here to note we're waiting for them to ship.
 
==== 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)
 
==== 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
 
==== 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])


== properties ==
== properties ==
Line 239: Line 20:
* ...
* ...


=== in development ===
== Previously ==
CSS properties which have not yet made it to a Candidate Recommendation (or later), or are only implemented in the wild in prefixed form.
* 2019 Metabug for CSS Priorities: https://bugzilla.mozilla.org/show_bug.cgi?id=1424418
 
* 2018 public input: https://twitter.com/t/status/939273644043366400
==== new pseudo-classes ====
** Subsequently discussed by the Platform Layout team at [[Yallhands]] and by the Layout team at [[Mozlando2018]]
* ...
* [[CSS/:autofill|:autofill]]
* ...
 
==== new properties ====
* ...
* [[CSS/text-size-adjust|text-size-adjust]] (-moz-, -ms-, -webkit-)
* ...


== See Also ==
== See Also ==
Line 256: Line 29:
* [[CSS3]]
* [[CSS3]]
* [[HTML5]]
* [[HTML5]]
* [[DOM]]
* [[Standards]]
* [[Standards]]
* [[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]
Tantek
canmove, Confirmed users
2,675

edits

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