CSS: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(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)
 
(88 intermediate revisions by 5 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/proposal are a priority for the [[Platform]].
* See [[GeckoGoalsfor2021#CSS]]
 
=== Actively Implementing ===
* [[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]
===== Grid Level 2 =====
* [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
 
==== Shapes ====
* [https://drafts.csswg.org/css-shapes/ CSS Shapes] (CR, another CR expected any moment now in 2017) [https://bugzilla.mozilla.org/show_bug.cgi?id=1040714 metabug]
** [https://bugzilla.mozilla.org/show_bug.cgi?id=1098939 shape-outside]
 
==== 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]
 
==== Multi-column ====
* [https://www.w3.org/TR/css3-multicol/ CSS Multi-column Layout] (2011 CR, but [https://drafts.csswg.org/css-multicol/ multicol editor's draft has changes]), [https://bugzilla.mozilla.org/show_bug.cgi?id=684062 metabug]
** unprefixing, 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)
 
==== Containment ====
* [https://drafts.csswg.org/css-containment/ CSS Containment Module Level 1] ([https://www.w3.org/TR/2017/WD-css-contain-1-20170221/ FPWD]) 'contain' property, size/layout, style, paint
** Main bug: [https://bugzilla.mozilla.org/show_bug.cgi?id=1150081 bug 1150081]
 
==== 3D Transforms ====
* 3D Transform interop / spec changes, [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%223d%20transform%22 3D transform bugs]
 
==== 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
 
==== 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
 
==== Sizing ====
[https://drafts.csswg.org/css-sizing-3/ CSS Intrinsic & Extrinsic Sizing Module Level 3] ([https://www.w3.org/TR/css-sizing-3/ WD])
* intrinsic size keywords: fix [https://bugzilla.mozilla.org/show_bug.cgi?id=567039 bug 567039] and [https://bugzilla.mozilla.org/show_bug.cgi?id=1055887 bug 1055887] and maybe others and unprefix (meta: 1312587)
 
==== 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
 
==== 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.
* [https://drafts.csswg.org/css-scroll-snap-1/ Scroll Snap] ([https://www.w3.org/TR/2016/CR-css-scroll-snap-1-20161020/ CR]), [https://bugzilla.mozilla.org/show_bug.cgi?id=1231777 metabug]
** Fix [https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%22scroll+snap%22 related bugs]
* Grid (see above)
 
=== 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.
 
=== Post Stylo Integration ===
==== 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)
 
==== 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]
 
==== Values and Units 3 ====
[https://www.w3.org/TR/css3-values/ CSS Values and Units Module Level 3] (CR)
* [ ] attr function (at risk) — very useful in combination with CSS Shapes, in the context of a CMS
 
==== Image Values and Replaced Content ====
[https://www.w3.org/TR/css3-images/ CSS Image Values and Replaced Content Module Level 3] (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
 
==== Motion Path Module ====
https://www.w3.org/TR/motion-1/ (currently Working Draft)
 
==== 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])
 
==== Houdini ====
* [[CSS/Houdini|CSS Houdini]] - see inside for Houdini implementation thoughts/plan


== properties ==
== properties ==
Line 168: 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
** Subsequently discussed by the Platform Layout team at [[Yallhands]] and by the Layout team at [[Mozlando2018]]


==== new pseudo-classes ====
== See Also ==
* ...
{{Special:PrefixIndex/{{FULLPAGENAME}}/}}
* [[CSS/:autofill|:autofill]]
* ...
 
==== new properties ====
* ...
* [[CSS/text-size-adjust|text-size-adjust]] (-moz-, -ms-, -webkit-)
* ...
 
== see also ==
* https://developer.mozilla.org/en/CSS
* [[CSS3]]
* [[CSS3]]
* [[HTML5]]
* [[HTML5]]
* [[DOM]]
* [[Standards]]
* [[Standards]]
 
* [[Platform]]
{{Special:PrefixIndex/{{FULLPAGENAME}}/}}
* [https://developer.mozilla.org/en/CSS MDN: CSS home page]
* [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.mozilla.org/index.php?title=CSS&oldid=1235119"