I'm Tab Atkins

and I work at Google.

The Future of CSS

...or at least, some of it.

Images!
Lists!
Flexbox!
Grid Layout!
Maybe more?
Q&A

The `image()` function

Basically a souped-up url()

background: image("foo.webp", "foo.svg", "foo.png", blue);
background: image("printable-logo.png" 1000dpi);
background: image("arrow.png" ltr);

Control how an image is scaled

image-rendering tells the browser what you expect when an image is scaled

Flexbox!

Basically, display:block for applications.

Dumps much of the text-related complication in favor of simpler, more useful abilities.

Thousands of household uses!

Combining an input and a button

<div style="display: box;">
	<input style="box-flex: 1; display: block;">
	<button>foo</button>
</div>

Horizontal navigation bar

<style>
	ul { display: box; }
	li { box-flex: 1; }
</style>
<ul>
	<li><a>Products</a></li>
	<li><a>About Us</a></li>
	<li><a>Store</a></li>
	<li><a>News & Events</a></li>
	<li><a>Training</a></li>
</ul>

Accordion
Multiline catalog

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.

Regions!

Let you flow text across multiple areas of a document.

Similar conceptually to multicol, but more freeform.

The End?

Questions and Answers

@tabatkins

+Tab Atkins

xanthir.com

CSS Variables!

Variables! In CSS! OMG!

A common request for literally over a decade.

Why so long?

Previously, discussion was paralyzed by indecision and argument.

Now we have rough agreement on the solution, and are starting experimental implementations.

Var Example


@var $header-color #006;
@var #main-color #06c;
@var #secondary-color #c06;
a { color: $main-color; }
a:visited { color: $secondary-color; }
h1 { 
  color: $header-color;
  background: linear-gradient(left,$main-color$, transparent 25%);
}

CSS Nesting!

Stylesheets often have tons of repetition in the selectors.

"#main > header > h1", "#main > header > h1 > a", "#main > header > h1 > a:visited", etc.

Verbose, hard to read, prone to hard-to-see errors

Nesting Example


#main > header > h1 {
  font-size: 2em;
  background: blue;
  color: white;
  & > a {
    color: #ddf;
    &:visited {
      color: #fdf;
    }
  }
}

Just syntax sugar for the long-form stuff.

Again, CSS preprocessors led the way.

Shorter stylesheets, better organization mean faster app development.

Explicitly indicates scoping opportunities, which might be useful for browser perf

The End