CSS: The Boring Bits - Speaker Deck

Slide 1

Slide 1 text

Peter Gasston @StopsAtGreen

Slide 2

Slide 2 text

CSS3: The boring bits. X

Slide 3

Slide 3 text

Boring things* The Matrix Revolutions The Lord of the Rings ﬁlms Coldplay Apple vs Android *Removed images of dubious provenance

Slide 4

Slide 4 text

Exciting CSS

Slide 5

Slide 5 text

.bar { ﬁlter: sepia(0.5); } Filters .foo { ﬁlter: grayscale(1); }

Slide 6

Slide 6 text

background-image: cross-fade( url('foo.png'), url('bar.png'), 50% ); cross-fade()

Slide 7

Slide 7 text

An interesting paradox: The more boring a CSS feature is, the more excited I get when someone does something cool with it.

Slide 8

Slide 8 text

Backgrounds & Borders http://dev.w3.org/csswg/css4-background/

Slide 9

Slide 9 text

background-position: h n v n; background-position: right 20px bottom 10%; Four values allows more ﬂexible placing of background images.

Slide 10

Slide 10 text

border-corner-shape: foo; border-corner-shape: bevel;

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

@namespace "http://www.w3.org/1999/xhtml"; @namespace svg "http://www.w3.org/2000/svg"; Namespaces http://www.w3.org/TR/css3-namespace/

Slide 13

Slide 13 text

a { color: #F00; } svg|a { color: #00F; }

Slide 14

Slide 14 text

@font-face { font-family: foo; src: url('foo.woff'); unicode-range: U+31-33; } unicode-range http://www.w3.org/TR/css3-fonts/#unicode-range-desc

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Device Adaptation http://dev.w3.org/csswg/css-device-adapt/

Slide 17

Slide 17 text

@viewport { width: 320px; }

Slide 18

Slide 18 text

@viewport { foo: bar; } @media screen and (max-width:320px) { @viewport { foo: baz; } }

Slide 19

Slide 19 text

Values http://www.w3.org/TR/css3-values/

Slide 20

Slide 20 text

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.

Slide 29

Slide 29 text

:not() e:not(.foo) {}

Slide 30

Slide 30 text

:nth-child(odd):not(:last-child) :nth-*

Slide 31

Slide 31 text

:matches() .foo .bar h1, .foo .bar h2, .foo .bar h3 {} .foo .bar :matches(h1,h2,h3) {}

Slide 32

Slide 32 text

: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.