CSS: The Boring Bits

Transcript

1. Peter Gasston @StopsAtGreen
2. CSS3: The boring bits. X
3. Boring things* The Matrix Revolutions The Lord of the Rings films Coldplay Apple vs Android *Removed images of dubious provenance
4. Exciting CSS
5. .bar { filter: sepia(0.5); } Filters .foo { filter: grayscale(1); }
6. background-image: cross-fade( url('foo.png'), url('bar.png'), 50% ); cross-fade()
7. An interesting paradox: The more boring a CSS feature is, the more excited I get when someone does something cool with it.
8. Backgrounds & Borders http://dev.w3.org/csswg/css4-background/
9. background-position: h n v n; background-position: right 20px bottom 10%; Four values allows more flexible placing of background images.
10. border-corner-shape: foo; border-corner-shape: bevel;
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.
12. @namespace "http://www.w3.org/1999/xhtml"; @namespace svg "http://www.w3.org/2000/svg"; Namespaces http://www.w3.org/TR/css3-namespace/
13. a { color: #F00; } svg|a { color: #00F; }
14. @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
16. <meta name="viewport" content="width=320"> Device Adaptation http://dev.w3.org/csswg/css-device-adapt/
17. @viewport { width: 320px; }
18. @viewport { foo: bar; } @media screen and (max-width:320px) { @viewport { foo: baz; } }
19. Values http://www.w3.org/TR/css3-values/
20. 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.
21. 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.
22. 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.
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.
24. calc() width: calc(75% - 20px)
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.
26. Selectors http://dev.w3.org/csswg/selectors4/
27. :target e { color: #F00; } e:target { color: #00F; } :target is applied to an internal link which the user has followed; e.g. <a href=”#foo”>
28. :dir() e:dir(rtl) {} Used for internationalised sites; rtl, ltr.
29. :not() e:not(.foo) {}
30. :nth-child(odd):not(:last-child) :nth-*
31. :matches() .foo .bar h1, .foo .bar h2, .foo .bar h3 {} .foo .bar :matches(h1,h2,h3) {}
32. :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.
33. :nth-column() :nth-last-column() :column() Applied to, for example, tables. Will possible work for grid layouts too.
34. :future :past :current Selectors based on temporal position, such as combined with audio, video, screen readers.
35. 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 <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.
38. Boring = Exciting
39. Still available. Still not boring. http://thebookofcss3.com