Object-fit and object-position is defined for all visual media, not only for images, but also for video or canvas elements.

As outlined in the linked issue, having the ability to use grid-gap on flexbox (which is soon to be renamed just "gap" by the CSS Working Group because "grid-gap" doesn't make sense when used on flexbox) solves a major pain point that developers are facing.

See the issue for more details:
https://github.com/w3c/csswg-drafts/issues/592

Make the use native font stacks (https://css-tricks.com/snippets/css/system-font-stack/) easier to use by implementing the system-ui (https://www.w3.org/TR/css-fonts-4/#system-ui-def) property.

https://caniuse.com/#feat=font-family-system-ui

CSS Media Quries Level 4 bring in a bunch of syntactic improvements. They make media queries much more readable and maintainable.

https://drafts.csswg.org/mediaqueries-4/#mq-syntax

Here's an example:

Before:

@media (min-width: 20em), not all and (min-height: 40em) {
@media not all and (pointer: none) {
…
}
}

After:

@media ((width >= 20em) or (height < 40em)) and (pointer) {
…
}

Firefox Nightly now supports paint-order for HTML text:
https://twitter.com/TobiReif/status/966711161390497792

we dont hav mani food in our villeg,so we ned a food supplie

Idea you have my utmost diversion.

We need outside strokes for text, because the current centered strokes are not pretty - the intrude the font fill.

An image illustrating how centered strokes aren't pretty / don't do what typically is intended (leaving the fill of the font unaffected):
https://twitter.com/TobiReif/status/942805851017969664

I hope you will implement stroke-align:outset.

Related w3 document:
https://www.w3.org/TR/css-counter-styles-3/

The Internationalization WG observes that Edge does not pass the tests found here:

See https://www.w3.org/International/tests/repo/results/counter-styles.en.html (click on the large text in the left-most column to run the tests)

Several groups have observed the need for counter style support. The Arabic Layout TF finds that it is needed for Persian support. Richard Ishida reports that vertical text lists require it as well. Firefox is observed to provide this support.

Would be nice if Edge supports appearance (or -webkit-appearance) set as 'none' for <input> elements, like radio or checkbox.

New in CSS Media Queries Level 5:
https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

WebKit blog post covering the feature, justification, and examples:
https://webkit.org/blog/7551/responsive-design-for-motion/

Implement :focus-visible so that fewer developers remove all focus styles https://www.youtube.com/watch?v=ilj2P5-5CjI

Implement the color-gamut media feature: it lets authors detect screens with broader than usual color gamut, like the newer macs and iphones.

This is already supported in Chrome and Safari

https://drafts.csswg.org/mediaqueries-4/#descdef-media-color-gamut

`display: flow-root` is a modern way to force a block to be a formatting context that floated elements are contained in (aka clearfix).

From the spec [1]:

> The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

Tab Atkins and Elika Etemad (fantasai) from CSSWG consider the feature stable enough to be implemented [2].

[1] https://drafts.csswg.org/css-display-3/#valdef-display-flow-root
[2] https://discourse.wicg.io/t/1835/6

Other browsers support some level of CSS hints for printing to hint to the browser to use landscape over portrait, and what margins to use.

https://stackoverflow.com/questions/43755490/how-to-define-the-scale-and-letter-size-on-a-print-preview-in-microsoft-edge-or/45721616#45721616

<style>
@media print{
@page{
margin:1in;/* Default margin (for page content) */
/*margin:0in; Sets margin to zero AND hides all the page #/date/URL fluff */
size:landscape;/* Default to Landscape */
}
}
</style>

The update media query from Media queries level 4 let people tell apart media that responsively update the screen, from those that cannot, or those that can but only slowly.

Authors can use that to style things differently on print vs ebook readers, even though both media are paginated. This kind of nuance was not possible to express just with @media print {...}

The specification is over here:
https://drafts.csswg.org/mediaqueries-4/#descdef-media-update

The overflow-block and overflow-inline media queries from Media queries level 4 let people tell apart media that paginate vs media that scroll or media that clip using media features instead of media types.

That way, you can do

@media (overflow-block: paged) {
/* do something smart for pagination */
}

and that will do the right thing when printing AND in ebook readers that paginate instead of scrolling, instead of

@media print {
/* do something smart for pagination */
}

which would work on print but fail in ebook readers.

The specification is over here:
https://drafts.csswg.org/mediaqueries-4/#mf-overflow-block
https://drafts.csswg.org/mediaqueries-4/#mf-overflow-inline

When you're rendering to PDF, this is a vector format, so there's not actual limit on the resolution. The resolution media feature has been extended in media queries 4 to be able to express that.

https://drafts.csswg.org/mediaqueries-4/#valdef-media-resolution-infinite

Chrome recently added "scroll anchoring" and Edge should too! see here for more info https://blog.google/products/chrome/taking-aim-annoying-page-jumps-chrome/ https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html