11. border-clip: [x y];
border-clip: [visible invisible];
border-clip: 10px 1fr 10px;
Custom border shapes; clip the border to show the areas you want.
20. rem
body { font-size: 10px; }
h1 { font-size: 2.4em; }
h1 span { font-size: 0.9167em; }
h1 span { font-size: 2.2rem; }
The rem unit is always relative to the root font-size, not that of its parent as em is.
21. 100vw
vh, vw, vmin
div { width: 25vw; }
vh = viewport height, vw = viewport width, vmin = either vh or vw, whichever is smaller. It’s
a length measure that’s relative to the viewport, not the parent.
22. attr()
attr(title)
attr(data-color color)
The attr() value will now accept more than strings, as it currently does. You can specify the
type to be color, url, number, and more.
23. div::before { content: 'foo'; }
div { content: replaced 'foo'; }
It’s proposed that you be able to replace content in any element, rather than just ::after
or ::before.
25. cycle()
em { font-style: cycle(italic,normal); }
Will cycle through the values depending on inherited values. For example, em will be have
font-style: italic if its parent is normal, or normal if its parent is italic.
32. :link, :visited
:any-link
:local-link
:any-link means any link, regardless of its visited state; :local-link is for links on the same
domain.
33. :column()
:nth-column()
:nth-last-column()
Applied to, for example, tables. Will possible work for grid layouts too.
34. :past
:current
:future
Selectors based on temporal position, such as combined with audio, video, screen readers.
35. E /x/ F
label:hover /for/ input
A bit complicated this; the x value is an attribute of E which is equal to the id value of F. Best
example is <label for=”foo”> <input id=”foo”>
36. $E > F
The parent selector!!! The element E has styles applied if it contains element F.
37. :root { data-foo: #F00;}
h1 { color: data(foo);}
http://dev.w3.org/csswg/css-variables/
CSS Variables. Uses the data- pattern from the HTML5 data attributes. Scoped by applying to
elements.