I'm Tab Atkins

and I work at Google.

@tabatkins

xanthir.com/+

xanthir.com

xanthir.com/talks/2015-03-11

The Future of CSS

...or at least, some of it.

Image Values

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() function!

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.

cross-fade() function

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> ]? )

image-rendering

Provides hints to the browser about how it should scale images.

auto
pixelated crisp-edges

Flexbox!

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.

http://dev.w3.org/csswg/css-flexbox

Four distinct improvements

  1. Layout direction with flex-flow
  2. Source-order independence with order
  3. Vertical and horizontal alignment (centering!) with the justify-* and align-* properties
  4. Flexiblity with flex

Grid Alignment!

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.

http://dev.w3.org/csswg/css-grid/

Grid Alignment!

body {
    grid-template: "a c"
                   "b c"
                   "d d"
                   "e e";
}
#title { grid-area: a; }
...

Grid Alignment!

body {
    grid-template: "a d"
                   "c d"
                   "b e";
}
#title { grid-area: a; }
...

Want More Examples?

New Selectors!

http://dev.w3.org/csswg/selectors/

:nth-child() - now does selector indexing

li.foo:nth-child(even) doesn't do what you want...

li:nth-child(even of .foo) does!

:matches() - Branching

table.foo td p.bar,
table.foo th p.bar {
  ...
}
table.foo :matches(td, th) p.bar {
  ...
}

CSS Variables!

Variables! In CSS! OMG!

A common request for literally over a decade.

Works today in Firefox, prefixed in Safari. New Chrome implementation soonish.

http://dev.w3.org/csswg/css-variables/

Var Example

: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%);
}

Color!

http://dev.w3.org/csswg/css-color

New Color draft includes a bunch of new functionality requested by authors, and some lessons from preprocessors.

New <color> types

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.

Media Queries!

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!

http://dev.w3.org/csswg/mediaqueries

Animation!

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.

Polyfilling CSS

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.

Polyfilling MQs

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") { ... }

More Polyfilling

  1. Custom pseudo-classes, functions, at-rules (call back to JS for handling)
  2. Custom layout - design tomorrow's flexbox-killer
  3. Custom paint - design new visual effects, cheaply, without abusing CSS

Follow the Houdini Task Force http://drafts.css-houdini.org/ for more information.

The End

Ask Me Anything - I Am A Spec Writer

@tabatkins

xanthir.com/+

xanthir.com

http://xanthir.com/talks/2015-03-11