and I work at Google.
...or at least, some of it.
to <side-or-corner>
"image()
functionBasically a souped-up url()
background: image("foo.webp", "foo.svg", "foo.png", blue);
background: image("arrow.png" ltr);
background: image(rgba(0,0,255,.2)), url(foo.jpg);
image-resolution
image-orientation
rotate()
transforms.object-fit
, object-position
Revival of an old 2003 spec
Defines the ::marker
pseudo-element
@counter-style leaves { type: repeating; glyphs: url(leaf1.jpg) url(leaf2.jpg) url(leaf3.jpg); } @counter-style binary { type: numeric; glyphs: "0" "1"; }
@counter-style dice { type: additive; additive-glyphs: 6 ’⚅‘, 5 ’⚄‘, 4 ’⚃‘, 3 ’⚂‘, 2 ’⚁‘, 1 ’⚀‘; suffix: ’‘; }
⚀ One ⚁ Two ⚂ Three ... ⚅⚄ Eleven ⚅⚅ Twelve ⚅⚅⚀ Thirteen
Basically, display:block for applications.
Dumps much of the text-related complication in favor of simpler, more useful abilities.
Is nearly done being rewritten right now, and is currently being re-implemented in Chrome (other browsers should follow shortly).
Combining an input and a button
<div style="display: flexbox;"> <input style="width: flex(); display: block;"> <button>foo</button> </div>
Horizontal navigation bar
<style> ul { display: flexbox; } li { width: flex(); } </style> <ul> <li><a>Products</a></li> ... <li><a>Training</a></li> </ul>
Accordions
<style> .accordion { display: flexbox; flex-flow: column; flex-pack: start; } .accordion > section { height: 0; overflow: hidden; } .accordion > section.active { height: flex(1); } <style> <section class=accordion> <h1>First section</h1> <section>Cool stuff to show in this section</section> ... </section>
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/css3-values/
This spec defines all the basic value types that CSS uses across its specs
Also defines the syntax used in property descriptions, if you ever wondered what the hell "&&" meant in a spec.
vw
, vh
units are relative to the size of the window
ex
is relative to the font's x-height, similar to the em
rem
is the em
from the root element
ch
is the width of the "0" (an 'average character')
Lets you do math in CSS, combining things that are comparable
calc(50% + 20px)
calc(100% / 7)
attr()
lets you pull values from attributes on the element
Useful for implementing the UA stylesheet, or for styling based on data-*
attributes
width: attr(data-size as px, 100px);
cycle()
takes several values, and "cycles" between them with each nested use
em { font-style: cycle(italic, normal); }
http://dev.w3.org/csswg/selectors4/
The first module to hit level 4!
Selectors are getting pretty powerful now
In HTML, the column of a cell is indicated implicitly, rather than directlly through nesting. This makes it impossible to style an element based on its column, except for the 4 properties that the spec allows <col> to have.
td:col(col.foo)
selects the cells within the column that matches "col.foo
"
td:nth-col(n)
and td:nth-last-col(n)
work in the expected way
:any-link
is :link
done right - matches both visited and unvisited links
:local-link
matches links to elsewhere in the same page
:local-link(n)
matches based on subsets of the path - :local-link(0)
looks only at the domain, :local-link(1)
looks at the domain and the first segment of the path, etc.
Only useful for presentation formats that are time-based, like karaoke captions in an HTML <video> or a screen reader
:current
matches the current active element
:past
and :future
matches elements that have already been passed, or haven't been hit yet, respectively
video::cue(:past) { color: red; } video::cue(:future) { color: white; } /* Bouncing ball left as an exercise for the reader */
Lets you follow IDREF attributes in the selector, like <label for=foo>
label:hover /for/ input { outline: thick dotted red; }
Questions and Answers
Variables! In CSS! OMG!
A common request for literally over a decade.
Previously, discussion was paralyzed by indecision and argument.
Now we have very rough agreement on the solution, and are starting experimental implementations.
@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%);
}
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
#main > header > h1 {
font-size: 2em;
background: blue;
color: white;
}
#main > header > h1 > a {
color: #ddf;
}
#main > header > h1 > a:visited {
color: #fdf;
}
#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
Questions and Answers