Pro Yearly is on sale from $80 to $50! »

CSS: Current, Soon, Someday

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.

C19ad910f6de3de7bfba85471496e0c4?s=128

Charlotte Jackson

October 05, 2016
Tweet

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