@tabatkins, Tab Atkins.
image(): fallbacks to color and a bunch of other things
image-set(): Lets you specify multiple resolutions of an image, i.e. for retina
cross-fade: smoothly tweet between two images.
image-rendering: Lets browser understand how it should scale up images. Crisp edges! Oh baby!
flex-box(): Hey, you should be using it already! Basically, it destroys grids with all their terrible math. Yay!
Grid by Example, Rachel Andrew Grid, CSS-Tricks Solved by Flexbox, Philip Walton Flexbox, CSS-Tricks
:nth-child(), :matches(): Selecting children is getting smarter.
Variables: CSS will have them! They currently work in Firefox.
Colors: Spec There will be 4/8 fihiy hex colors for alpha instead of converting to rgba, and other fun stuff.
hwb(): hue-whiteness-blackness
gray(): grays without repeating yourself. Nice! No more bajillion $brand-gray-lights or whatever.
language-gray(): grays without repeating yourself. Nice.
Media Queries: They're getting smarter! Ability to target phones used as night, or in bright light, or on e-ink screens. bada$$, amirite???
Animation!: Web Animations spec, Motion Path. Exposing CSS animations to JS in a more direct + easy way, and animations an element around the page in 2D with the motion property.
Polyfilling CSS: No language can grow forever. CSS is huge, and getting larger and larger. Cycle times to get new things into spec is really long (~5 years, yikes!). Doesn't mean we can't polyfill our solutions, though, such as with Media Queries, such as variables for media queries:
@custom-media foo (500px <= width <= 1200px);
@media ("foo") { ... }
CSS.customMedia.set("bar", true);
CSS.customMedia.set("baz", 500);
CSS.customMedia.set(
"qux",
MediaQueryList("(min-width: 500px)"))
@media ("bar") { ... }
@media ("baz" < 600) { ... }
@media ("qux") { ... }
More Polyfilling: Custom psuedo-classes, custom functions, mix-ins (functions on the block level, rather than value level), custom at-rules, custom layout???