Peter Gasston@StopsAtGreen
CSS3:        XThe boring bits.
Boring things* The Matrix RevolutionsThe Lord of the Rings films        Coldplay    Apple vs Android             *Removed i...
Exciting CSS
Filters.foo { filter: grayscale(1); }.bar { filter: sepia(0.5); }
cross-fade()background-image: cross-fade(  url(foo.png),  url(bar.png),  50%);
An interesting paradox:The more boring a CSS feature is, themore excited I get when someone does       something cool with...
Backgrounds & Borders     http://dev.w3.org/csswg/css4-background/
background-position: h n v n;    background-position:    right 20px bottom 10%;Four values allows more flexible placing of ...
border-corner-shape: foo;border-corner-shape: bevel;
border-clip: [x y];   border-clip: [visible invisible];   border-clip: 10px 1fr 10px;Custom border shapes; clip the border...
Namespaces@namespace "http://www.w3.org/1999/xhtml";@namespace svg "http://www.w3.org/2000/svg";                       htt...
a { color: #F00; }svg|a { color: #00F; }
unicode-range@font-face { font-family: foo; src: url(foo.woff); unicode-range: U+31-33;}       http://www.w3.org/TR/css3-f...
Device Adaptation<meta name="viewport" content="width=320">                     http://dev.w3.org/csswg/css-device-adapt/
@viewport { width: 320px; }
@viewport {  foo: bar;}@media screen and (max-width:320px) {  @viewport {    foo: baz;  }}
Values    http://www.w3.org/TR/css3-values/
rem  body { font-size: 10px; }  h1 { font-size: 2.4em; }  h1 span { font-size: 0.9167em; }  h1 span { font-size: 2.2rem; }...
100vw                   vh, vw, vmin       div { width: 25vw; }vh = viewport height, vw = viewport width, vmin = either vh...
attr()            attr(title)      attr(data-color color)The attr() value will now accept more than strings, as it current...
div::before { content: foo; }     div { content: replaced foo; }It’s proposed that you be able to replace content in any e...
calc()width: calc(75% - 20px)
cycle()  em { font-style: cycle(italic,normal); }Will cycle through the values depending on inherited values. For example,...
Selectors      http://dev.w3.org/csswg/selectors4/
:target         e { color: #F00; }         e:target { color: #00F; }:target is applied to an internal link which the user ...
:dir()                        e:dir(rtl) {}Used for internationalised sites; rtl, ltr.
:not()e:not(.foo) {}
:nth-*:nth-child(odd):not(:last-child)
:matches().foo .bar h1, .foo .bar h2, .foo .bar h3 {}.foo .bar :matches(h1,h2,h3) {}
:link, :visited                    :any-link                    :local-link:any-link means any link, regardless of its vis...
:column()       :nth-column()       :nth-last-column()Applied to, for example, tables. Will possible work for grid layouts...
:past                            :current                            :futureSelectors based on temporal position, such as ...
E /x/ F   label:hover /for/ inputA bit complicated this; the x value is an attribute of E which is equal to the id value o...
$E > FThe parent selector!!! The element E has styles applied if it contains element F.
:root { data-foo: #F00;}   h1 { color: data(foo);}                                                  http://dev.w3.org/cssw...
Boring = Exciting
Still available.Still not boring.      http://thebookofcss3.com
CSS: The Boring Bits
Upcoming SlideShare
Loading in...5
×

CSS: The Boring Bits

3,633

Published on

My talk at London Web Standards on 12th March 2012. Looking at new and (possible) future features of the less glamorous areas of the CSS spec.

Published in: Technology, Education
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,633
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

CSS: The Boring Bits

  1. 1. Peter Gasston@StopsAtGreen
  2. 2. CSS3: XThe boring bits.
  3. 3. Boring things* The Matrix RevolutionsThe Lord of the Rings films Coldplay Apple vs Android *Removed images of dubious provenance
  4. 4. Exciting CSS
  5. 5. Filters.foo { filter: grayscale(1); }.bar { filter: sepia(0.5); }
  6. 6. cross-fade()background-image: cross-fade( url(foo.png), url(bar.png), 50%);
  7. 7. An interesting paradox:The more boring a CSS feature is, themore excited I get when someone does something cool with it.
  8. 8. Backgrounds & Borders http://dev.w3.org/csswg/css4-background/
  9. 9. background-position: h n v n; background-position: right 20px bottom 10%;Four values allows more flexible placing of background images.
  10. 10. border-corner-shape: foo;border-corner-shape: bevel;
  11. 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. 12. Namespaces@namespace "http://www.w3.org/1999/xhtml";@namespace svg "http://www.w3.org/2000/svg"; http://www.w3.org/TR/css3-namespace/
  13. 13. a { color: #F00; }svg|a { color: #00F; }
  14. 14. unicode-range@font-face { font-family: foo; src: url(foo.woff); unicode-range: U+31-33;} http://www.w3.org/TR/css3-fonts/#unicode-range-desc
  15. 15. Device Adaptation<meta name="viewport" content="width=320"> http://dev.w3.org/csswg/css-device-adapt/
  16. 16. @viewport { width: 320px; }
  17. 17. @viewport { foo: bar;}@media screen and (max-width:320px) { @viewport { foo: baz; }}
  18. 18. Values http://www.w3.org/TR/css3-values/
  19. 19. 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.
  20. 20. 100vw vh, vw, vmin div { width: 25vw; }vh = viewport height, vw = viewport width, vmin = either vh or vw, whichever is smaller. It’sa length measure that’s relative to the viewport, not the parent.
  21. 21. attr() attr(title) attr(data-color color)The attr() value will now accept more than strings, as it currently does. You can specify thetype to be color, url, number, and more.
  22. 22. div::before { content: foo; } div { content: replaced foo; }It’s proposed that you be able to replace content in any element, rather than just ::afteror ::before.
  23. 23. calc()width: calc(75% - 20px)
  24. 24. cycle() em { font-style: cycle(italic,normal); }Will cycle through the values depending on inherited values. For example, em will be havefont-style: italic if its parent is normal, or normal if its parent is italic.
  25. 25. Selectors http://dev.w3.org/csswg/selectors4/
  26. 26. :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”>
  27. 27. :dir() e:dir(rtl) {}Used for internationalised sites; rtl, ltr.
  28. 28. :not()e:not(.foo) {}
  29. 29. :nth-*:nth-child(odd):not(:last-child)
  30. 30. :matches().foo .bar h1, .foo .bar h2, .foo .bar h3 {}.foo .bar :matches(h1,h2,h3) {}
  31. 31. :link, :visited :any-link :local-link:any-link means any link, regardless of its visited state; :local-link is for links on the samedomain.
  32. 32. :column() :nth-column() :nth-last-column()Applied to, for example, tables. Will possible work for grid layouts too.
  33. 33. :past :current :futureSelectors based on temporal position, such as combined with audio, video, screen readers.
  34. 34. E /x/ F label:hover /for/ inputA bit complicated this; the x value is an attribute of E which is equal to the id value of F. Bestexample is <label for=”foo”> <input id=”foo”>
  35. 35. $E > FThe parent selector!!! The element E has styles applied if it contains element F.
  36. 36. :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 toelements.
  37. 37. Boring = Exciting
  38. 38. Still available.Still not boring. http://thebookofcss3.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×