The CSS of Tomorrow

A look into the longer-term future of CSS; rich layouts and a programmatic syntax. Guest starring Superman!

Transcript

1. THE CSS3 OF TOMORROW PETER GASSTON @STOPSATGREEN BROKEN-LINKS.COM
5. “35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “350+ Amazing CSS3 Resources - All You'll Ever Need to Become a CSS3 Master!”
6. CSS3 TODAY border-radius: 5px; box-shadow: 2px 2px 4px #000; text-shadow: 4px 4px 2px #000;
7. BACKGROUNDS & BORDERS background-image: url('img1.png'), url('img2.png'), url('img3.png'); border-image: url('img1.png') 20 25 20 25 stretch;
8. SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child() :nth-of-type() | :nth-last-of-type()
9. OPACITY, ALPHA & COLOUR opacity: 0.5; color: rgba(255,0,0,0.5); color: hsl(0,100%,50%); color: hsla(0,100%,50%,0.5);
10. WEB FONTS @font-face { font-family: 'My Font'; src: url('/path/to/font.woff'); } h1 { font-family: 'My Font'; }
11. MEDIA QUERIES @media all and (min-device-width: 480px) @media all and (pixel-ratio: 2) @media screen not (monochrome) @media screen and (max-device-width: 640px) and (touch-enabled: 1)
13. GRADIENTS linear-gradient(45deg,red,yellow); repeating-linear-gradient(red,blue 10%); radial-gradient(circle cover,red,blue); repeating-radial-gradient(red,blue 10%);
14. TRANSFORMATIONS transform: rotate(45deg); transform: rotate3d(1,1,0,45deg);
15. TRANSITIONS & ANIMATIONS @keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; } } div { animation: foo 1s linear; } transition: all 2s 500ms ease-in;
16. TRANSITIONS & ANIMATIONS
19. MULTIPLE COLUMNS div { column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; } h2 { column-span: all; }
21. FLEXIBLE BOX LAYOUT A B div { display: flexbox; } .a,.b { width: 40%; } A B .a,.b { width: flex(1); } A B .a { width: flex(3); } .b { width: flex(2); }
22. FLEXIBLE BOX LAYOUT a .a { flex-align: center; flex-pack: center; width: flex(0); } c a b div { flex-flow: column; } .a,.b { flex-order: 2; } .c { flex-order: 1; }
23. GRID LAYOUT div { display: grid; grid-columns: 1fr 1fr 2fr; } div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 80px auto 10em; }
24. GRID LAYOUT article { grid-column: 2; grid-row: 2; grid-column-span: 2; }
25. GRID LAYOUT a b c .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; } a b c div { grid-template: 'abc'; }
26. GRID LAYOUT a b c div { grid-template: 'aa' 'bc'; } a b c div { grid-template: 'acc' 'a.b'; }
28. REGIONS a b .a { flow-into: foo; } .b { flow-from: foo; } b c d e .b, .c, .d, .e { flow-from: foo; } @region .b { color: #f00 }
29. LINE GRID article { layout-grid-line: 1.5; } h1 { layout-grid-mode: block; } p { layout-grid-mode: line; margin-bottom: 1gd; }
30. EXCLUSIONS div { shape-outside: circle(50%, 50%, 50px); wrap-flow: both; }
31. EXCLUSIONS div { shape-inside: polygon(150px,0 0,300px 300px,300px); }
32. EXCLUSIONS
34. PAGED MEDIA @media paged { height: 100%; overflow: paged-x; } <link rel="next" href="p2.htm"> @navigation { nav-right: link-rel(next); }
35. FILTER EFFECTS img { filter: grayscale(0.25); } img { filter: blur(5,2) sepia(1); }
36. SHADERS img { filter: custom(url(foo.fs), 20 20, phase 90); }
39. IMAGES background-image: image('img.svg','img.png',#f00); background-image: url(' img.png#xywh=0,20,25,30'); background-image: element(#foobar);
40. VALUES width: calc((12em * 3) + 10px); height: min(3em, 30px); list-style-type: cycle(disk, circle); content: attr(href);
41. CONDITIONAL RULES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports (display: box) or (background: linear-gradient) {} @supports not (transform: rotate3d) {}
42. CONDITIONAL RULES @document url('http://w3.org/index.html') {} @document url-prefix('http://w3.org/blog/') {} @document domain('w3.org') {} @document regexp('http://w3.org/[^/]*-\\d{8}/') {}
43. DEVICE ADAPTATION @viewport { width: device-width; } <meta name="viewport" content="width=device-width">
44. VARIABLES @var $myColor #f00; h1 { color: $myColor; }
45. MIXINS @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { @mix myStuff; font-weight: bold; }
46. MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { @mix myStuff(#00f); font-weight: bold; }
47. NESTING h1 { border: 1px solid #f00; & a { color: #00f; &:hover { color: #ff0; } } }
48. SELECTORS :matches(header,aside,div) h1 {} :not(header,aside,div) h1 {} $div h1 {}
50. THX. PLEASE BUY MY BOOK http://nostarch.com/css3.htm
51. Superman copyright is a contentious issue, but the images I use here belong to DC Comics and no permission was given. I hope they fall under fair use doctrines. You should buy a copy of All Star Superman – it’s really good! LEGAL NOTE