body { font-size: 10px; }
h1 { font-size: 2.4em; }
h1 span { font-size: 0.9167em; }
h1 span { font-size: 2.2rem; }
rem
The rem unit is always relative to the root font-size, not that of its parent as em is.
Slide 21
Slide 21 text
vh, vw, vmin
100vw
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.
Slide 22
Slide 22 text
attr(title)
attr(data-color color)
attr()
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.
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
calc()
width: calc(75% - 20px)
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
Selectors
http://dev.w3.org/csswg/selectors4/
Slide 27
Slide 27 text
:target
e { color: #F00; }
e:target { color: #00F; }
:target is applied to an internal link which the user has followed; e.g.
Slide 28
Slide 28 text
:dir()
e:dir(rtl) {}
Used for internationalised sites; rtl, ltr.
:any-link
:local-link
:link, :visited
:any-link means any link, regardless of its visited state; :local-link is for links on the same
domain.
Slide 33
Slide 33 text
:nth-column()
:nth-last-column()
:column()
Applied to, for example, tables. Will possible work for grid layouts too.
Slide 34
Slide 34 text
:future
:past
:current
Selectors based on temporal position, such as combined with audio, video, screen readers.
Slide 35
Slide 35 text
label:hover /for/ input
E /x/ F
A bit complicated this; the x value is an attribute of E which is equal to the id value of F. Best
example is
Slide 36
Slide 36 text
$E > F
The parent selector!!! The element E has styles applied if it contains element F.
Slide 37
Slide 37 text
: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.
Slide 38
Slide 38 text
Boring = Exciting
Slide 39
Slide 39 text
Still available.
Still not boring.
http://thebookofcss3.com