image-rendering
Provides hints to the browser about how it should scale images.
| auto
|
pixelated
| crisp-edges
|
and I work at Google.
...or at least, some of it.
Defines several useful image-related features.
Level 3 is in CR, and features are showing up and unprefixing as we speak.
http://dev.w3.org/csswg/css-images-3
http://dev.w3.org/csswg/css-images-4, for some more experimental stuff
image-set("normal.png" 1x, "high-res.png" 2x, "print.png" 500dpi)
Lets you specify multiple resolutions of an image, and the browser will automatically choose which one to download, based on the screen's resolution and the current network speed.
Will power up soonish to match <picture> in functionality.
Smoothly fade between two images. Already works in WebKit/Blink (with an older syntax), and is used by CSS animations!
cross-fade( <percentage>? <image> [, <image> | <color> ]? )
Provides hints to the browser about how it should scale images.
|
| auto
|
pixelated
| crisp-edges
|
Phase 1 of making CSS actually handle layout
Dumps much of the text-related complication in favor of simpler, more useful abilities.
Been in CR for a while, and Firefox and Chrome are already unprefixed.
flex-flow
order
justify-* and align-* properties
flex
Finally, a layout system designed for pages.
Slice the page into cells, and position elements into those cells.
No extraneous markup, no source-order dependence, fully flexible.
body {
grid-template: "a c"
"b c"
"d d"
"e e";
}
#title { grid-area: a; }
...
body {
grid-template: "a d"
"c d"
"b e";
}
#title { grid-area: a; }
...
li.foo:nth-child(even) doesn't do what you want...
li:nth-child(even of .foo) does!
table.foo td p.bar,
table.foo th p.bar {
...
}
table.foo :matches(td, th) p.bar {
...
}
Variables! In CSS! OMG!
A common request for literally over a decade.
Works today in Firefox, prefixed in Safari. New Chrome implementation soonish.
:root {
--header-color: #006;
--main-color: #06c;
--accent-color: #c06;
}
a { color: var(--main-color); }
a:visited { color: var(--accent-color); }
h1 {
color: var(--header-color);
background: linear-gradient(var(--main-color), transparent 25%);
}
http://dev.w3.org/csswg/css-color
New Color draft includes a bunch of new functionality requested by authors, and some lessons from preprocessors.
hwb() (hue-whiteness-blackness) is a more intuitive variant of HSL
gray() lets you specify grays compactly and without repetition.
color() function lets you adjust colors, a la preprocessors, but live. Very useful with variables.
Throwing out the old & busted media types, in favor of new and more useful media features.
| Pointer | |||
|---|---|---|---|
| course | fine | ||
| Hover | yes | Wii-mote | Mouse |
| no | Touch | Cintiq (pens) | |
More are possible, such as ability to animate (distinguishes print/e-ink from normal screens). Let us know if you have more ideas!
Web Animations spec - exposing CSS Animation functionality directly to JS in a much more direct and easy way.
Motion Path (adopted from SVG) - animate an element around the page in 2d with the 'motion' property.
CSS suffers from an all-too-common problem - its solutions are big and tailored, and if you deviate too far from the ideal, tough luck.
Violates the ideas of the Extensible Web Manifesto.
CSS is complex and perf-sensitive, though.
Polyfilling will proceed in small steps.
Seems obvious and easy
@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") { ... }
Follow the Houdini Task Force http://drafts.css-houdini.org/ for more information.
Ask Me Anything - I Am A Spec Writer