CSS: Current, Soon, Someday

Thanks to progressive enhancement, we can make use of new CSS properties, even when not everyone uses a browser that supports them. Here are some examples of CSS that we can use now; what we can use with care; and what we can be ready for.
But, it's not all about using new CSS properties; we can all play a part in their development too.

Transcript

1. CSS: Current, Soon, Someday @lottejackson Front end North / 30th September 2016
2. Hi, I’m Charlotte Charlotte Jackson / Clearleft, Brighton @lottejackson
4. http://codepen.io/collection/ AeMgpz/
5. Resistance
6. “Browser support is too low.” “I can’t use in it production.” “Pixel perfect.”
7. The user should be able to access all content and accomplish core tasks. ” “
8. CSS Shapes
10. .shape { width: 20em; height: 20em; float: left; margin: 1em 2em 1em 0; border-radius: 25em; shape-outside: circle(50%); }
12. .shape { width: 20em; height: 20em; float: left; margin: 1em 2em 1em 0; border-radius: 25em; shape-outside: circle(50%); }
13. Flexbox
16. form { display: flex; flex-flow: row wrap; ... } input { flex-grow: 1; ... } label { flex-basis: 100%; ... }
17. form { display: flex; flex-flow: row wrap; ... } input { flex-grow: 1; ... } label { flex-basis: 100%; ... }
18. form { display: flex; flex-flow: row wrap; ... } label { flex-basis: 100%; ... } input { flex-grow: 1; ... }
19. form { display: flex; flex-flow: row wrap; ... } label { flex-basis: 100%; ... } input { flex-grow: 1; ... }
20. form { display: flex; flex-flow: row wrap; ... } input { flex-grow: 1; ... } label { flex-basis: 100%; ... }
21. form { display: flex; flex-flow: row wrap; ... } input { flex-grow: 1; ... } label { flex-basis: 100%; display: block; ... }
22. Floating label pattern
25. <form action=""> <div class="Form-unit"> <input type="text" name="name" id="name" placeholder="E.g. Meg"> <label for="name">Name</label> </div> </form>
26. input:placeholder-shown + label { … transform-origin: left bottom; transform: translate(0, 1.75em) scale(2.2); } ::placeholder { opacity: 0; transition: inherit; } input:focus::placeholder { opacity: 1; }
27. input:not(:placeholder-shown) + label, input:focus + label { transform: translate(0, 0) scale(1); }
28. https://thatemil.com/blog/ 2016/01/23/floating-label-no-js- pure-css/
29. nth-child() + the Cicada Principle
30. https://en.wikipedia.org/wiki/Cicada#/media/File:Cicada_skin.jpg
32. .Card:nth-child(2n) {…} .Card:nth-child(3n) {…} .Card:nth-child(5n) {…} .Card:nth-child(7n) {…} .Card:nth-child(11n) {…}
33. .Card:nth-child(2n+1) {…} .Card:nth-child(3n+2) {…} .Card:nth-child(5n+3) {…} .Card:nth-child(7n+5) {…} .Card:nth-child(11n+7) {…}
35. .Card:nth-child(2n+1) .Card-image { border-top-left-radius: 59%; border-top-right-radius: 52%; border-bottom-left-radius: 59%; border-bottom-right-radius: 56%; transform: rotate(-6deg); } .Card:nth-child(2n+1) .Card-image:hover { border-top-left-radius: 51%; border-top-right-radius: 67%; border-bottom-left-radius: 64%; border-bottom-right-radius: 56%; transform: rotate(-4deg); }
36. nth-child() + a dash of Flexbox = Quantity queries
37. http://alistapart.com/article/ quantity-queries-for-css
39. nth-last-child(5) { color: red; }
40. li:nth-last-child(5):first-child { width: 66.6%; color: red; }
41. li:nth-last-child(odd):first-child { width: 100%; color: red; }
44. nth-child(3n-1)
45. li:nth-last-child(3n-1):first-child, li:nth-last-child(3n-1):first-child + li { width: 50%; color: pink; }
46. li:nth-last-child(3n-2):first-child, li:nth-last-child(3n-2):nth-child(4) { width: 66.6%; color: darkcyan; }
47. http://www.lottejackson.com/learning/ messing-with-quantity-queries
48. currentColor
49. body { … color: rebeccapurple; } form { border: 0.1em solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
50. body { … color: deeppink; } form { border: 0.1em solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
51. body { … color: darkcyan; } form { border: 0.1em solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
52. body { … color: rebeccapurple; } form { border: 0.1em solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
53. body { … color: deeppink; } form { border: 0.1em solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
54. body { … color: darkcyan; } form { border: 0.1em solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
56. <svg aria-hidden="true" style="position: absolute; width: 0; height: 0;" version="1.1" xmlns="http:// www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-book" width="100%" height="100%" viewBox="0 0 48 48"> <title>Book</title> <path d="M0 42a4 4 0 0 0 4 4h36a4 4 0 0 0 4-4v-6h1.8c1.22 0 2.2-.98 2.2-2.2V23.2c0-1.22-. 98-2.2-2.2-2.2H44v-6a4 4 0 0 0-4-4H7c-1.1 0-2-.9-2-2s.9-2 2-2h29.5a2.5 2.5 0 0 0 0-5H4a4 4 0 0 0-4 4v36zm34-13.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1-5 0z"/> </symbol> <symbol id="icon-locationPin" width="100%" height="100%" viewBox="0 0 20 20"> <title>Location Pin</title> <path d="M10 2.01C7.238 2.01 5 4.237 5 7c0 4.773 5 11 5 11s5-6.228 5-11c0-2.76-2.238-4.99-5-4.99zm0 7.75a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z"/> </symbol> <symbol id="icon-mail" width="100%" height="100%" viewBox="0 0 20 20"> <title>Mail</title> <path d="M1.574 5.286l7.5 4.03c.252.135.578.198.906.198.328 0 .654-.064.906-.2l7.5-4.028c. 49-.263.95-1.286.054-1.286H1.52c-.896 0-.434 1.023.054 1.286zm17.04 2.203c-.556.288-7.388 3.848-7.728 4.026s-.578.2-.906.2-.566-.022-.906-.2-7.133-3.74-7.688-4.028c-.39-.204-.386.035-. 386.22V15c0 .42.566 1 1 1h16c.434 0 1-.58 1-1V7.708c0-.184.004-.423-.387-.22z"/> </symbol> </defs> </svg>
57. <svg aria-hidden="true" style="position: absolute; width: 0; height: 0;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=“http://www.w3.org/ 1999/xlink”> <defs> <symbol id="icon-book" width="100%" height="100%" viewBox="0 0 48 48"> <title>Book</title> <path d="M0 42a4 4 0 0 0 4 4h36a4 4 0 0 0 4-4v-6h1.8c1.22 0 2.2-.98 2.2-2.2V23.2c0-1.22-.98-2.2-2.2-2.2H44v-6a4 4 0 0 0-4-4H7c-1.1 0-2-.9-2-2s.9-2 2-2h29.5a2.5 2.5 0 0 0 0-5H4a4 4 0 0 0-4 4v36zm34-13.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1-5 0z"/> </symbol> … </defs> </svg> <symbol id="icon-locationPin" width="100%" height="100%" viewBox="0 0 20 20"> <title>Location Pin</title> <path d="M10 2.01C7.238 2.01 5 4.237 5 7c0 4.773 5 11 5 11s5-6.228 5-11c0-2.76-2.238-4.99-5-4.99zm0 7.75a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z"/> </symbol>
58. <a href=""> <svg class="Icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <span>Say hi</span> </a>
59. <a href=""> <svg class="Icon" aria-hidden="true"> </svg> <span>Say hi</span> </a> <use xlink:href="#icon-mail"></use>
60. .Icon { fill: currentColor; }
61. <a href=""> <svg class="Icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <span>Say hi</span> </a>
62. Blend modes
64. .wrapper { background-image: linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url(“https://c7.staticflickr…”); … background-blend-mode: hue; }
65. .wrapper { background-image: linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url(“https://c7.staticflickr…”); … background-blend-mode: hue; }
66. @supports
67. @supports (background-blend-mode: hue) { /* this code will only run if the browser supports background-blend-mode: hue */ }
68. .wrapper { background-image: url(“https:// c7.staticflickr…"); } @supports (background-blend-mode: hue) { .wrapper { background-image: linear- gradient(lightblue 0%, pink 100%),linear-gradient(to right, pink 30%, white 100%), url(“https://c7.staticflickr.com/ 2/1510/…”); background-blend-mode: hue; } }
69. .wrapper { background-image: linear-gradient(lightblue 0%, pink 100%), linear-gradient(to right, pink 30%, white 100%), url(“https://c7.staticflickr…”); … background-blend-mode: hue; }
71. .shape{ width: 20em; height: 20em; float: left; margin: 0.25em 2em 1em 0; } @supports (shape-outside: circle()) { .shape { shape-outside: circle(50%); border-radius: 25em; } }
72. .shape{ width: 20em; height: 20em; float: left; margin: 0.25em 2em 1em 0; } @supports (shape-outside: circle()) { .shape { shape-outside: circle(50%); border-radius: 25em; } }
74. .wrapper { background-image: url(“https:// c7.staticflickr…"); } @supports (background-blend-mode: hue) { .wrapper { background-image: linear- gradient(lightblue 0%, pink 100%),linear-gradient(to right, pink 30%, white 100%), url(“https://c7.staticflickr.com/ 2/1510/…”); background-blend-mode: hue; } }
75. Grid layout
76. Flexbox is for laying out items in a single row or a column. Grid is for laying out items in two dimensional rows and columns. Flexbox Grid VS
77. .Card { width: 50%; float: left; } .Card:nth-child(2n+1) { float: none; margin-left: 25%; } .Card:nth-child(3n+2) { float: none; margin-left: 50%; } .Card:nth-child(5n+3) { float: none; margin-left: 50%; } .Card:nth-child(7n+5) { float: none; margin-left: 25%; } .Card:nth-child(11n+7) { float: none; margin-left: 0; }
78. .Grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); } .Grid-item { grid-column: span 2; } .Grid-item:nth-child(3n+1) { grid-column: span 2 / 4; } .Grid-item:nth-child(5n+5) { grid-column: span 2 / 5; }
83. http://igalia.github.io/css-grid- layout/enable.html
88. Thank you! @lottejackson Charlotte Jackson / Clearleft, Brighton