CSS: Current, Soon, Someday

Transcript

1. CSS: Current, Soon, Someday @lottejackson Front end North / 30th

   September 2016

2. Hi, I’m Charlotte Charlotte Jackson / Clearleft, Brighton @lottejackson

3. None

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

9. None

10. .shape { width: 20em; height: 20em; float: left; margin: 1em

    2em 1em 0; border-radius: 25em; shape-outside: circle(50%); }
11. None

12. .shape { width: 20em; height: 20em; float: left; margin: 1em

    2em 1em 0; border-radius: 25em; shape-outside: circle(50%); }

13. Flexbox

14. None
15. None

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

23. None
24. None

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

31. None

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) {…}

34. None

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

38. None

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; }

42. None
43. None

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; … }
55. None

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

63. None

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; }
70. None

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; } }
73. None

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; }
79. None
80. None
81. None
82. None

83. http://igalia.github.io/css-grid- layout/enable.html

84. None
85. None
86. None
87. None

88. Thank you! @lottejackson Charlotte Jackson / Clearleft, Brighton