CSS: Current, Soon, Someday

C19ad910f6de3de7bfba85471496e0c4?s=47 Charlotte Jackson
October 05, 2016
Design
1
400

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

Want more?

C19ad910f6de3de7bfba85471496e0c4?s=48 lottejackson
4
410
C19ad910f6de3de7bfba85471496e0c4?s=48 lottejackson
0
50
C19ad910f6de3de7bfba85471496e0c4?s=48 lottejackson
1
44
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
11
590
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
2
300
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
200
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
380
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
7
230
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
320
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
600
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
180
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
260

Transcript

  1. 1.

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

    September 2016
  2. 2.

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

  3. 3.
    None
  4. 4.

    http://codepen.io/collection/ AeMgpz/

  5. 5.

    Resistance

  6. 6.

    “Browser support is too low.” “I can’t use in it

    production.” “Pixel perfect.”
  7. 7.

    The user should be able to access all content and

    accomplish core tasks. ” “
  8. 8.

    CSS Shapes

  9. 9.
    None
  10. 10.

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

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

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

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

    Flexbox

  14. 14.
    None
  15. 15.
    None
  16. 16.

    form { display: flex; flex-flow: row wrap; ... } input

    { flex-grow: 1; ... } label { flex-basis: 100%; ... }
  17. 17.

    form { display: flex; flex-flow: row wrap; ... } input

    { flex-grow: 1; ... } label { flex-basis: 100%; ... }
  18. 18.

    form { display: flex; flex-flow: row wrap; ... } label

    { flex-basis: 100%; ... } input { flex-grow: 1; ... }
  19. 19.

    form { display: flex; flex-flow: row wrap; ... } label

    { flex-basis: 100%; ... } input { flex-grow: 1; ... }
  20. 20.

    form { display: flex; flex-flow: row wrap; ... } input

    { flex-grow: 1; ... } label { flex-basis: 100%; ... }
  21. 21.

    form { display: flex; flex-flow: row wrap; ... } input

    { flex-grow: 1; ... } label { flex-basis: 100%; display: block; ... }
  22. 22.

    Floating label pattern

  23. 23.
    None
  24. 24.
    None
  25. 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. 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. 27.

    input:not(:placeholder-shown) + label, input:focus + label { transform: translate(0, 0)

    scale(1); }
  28. 28.

    https://thatemil.com/blog/ 2016/01/23/floating-label-no-js- pure-css/

  29. 29.

    nth-child() + the Cicada Principle

  30. 30.

    https://en.wikipedia.org/wiki/Cicada#/media/File:Cicada_skin.jpg

  31. 31.
    None
  32. 32.

    .Card:nth-child(2n) {…} .Card:nth-child(3n) {…} .Card:nth-child(5n) {…} .Card:nth-child(7n) {…} .Card:nth-child(11n) {…}

  33. 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. 34.
    None
  35. 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. 36.

    nth-child() + a dash of Flexbox = Quantity queries

  37. 37.

    http://alistapart.com/article/ quantity-queries-for-css

  38. 38.
    None
  39. 39.

    nth-last-child(5) { color: red; }

  40. 40.

    li:nth-last-child(5):first-child { width: 66.6%; color: red; }

  41. 41.

    li:nth-last-child(odd):first-child { width: 100%; color: red; }

  42. 42.
    None
  43. 43.
    None
  44. 44.

    nth-child(3n-1)

  45. 45.

    li:nth-last-child(3n-1):first-child, li:nth-last-child(3n-1):first-child + li { width: 50%; color: pink; }

  46. 46.

    li:nth-last-child(3n-2):first-child, li:nth-last-child(3n-2):nth-child(4) { width: 66.6%; color: darkcyan; }

  47. 47.

    http://www.lottejackson.com/learning/ messing-with-quantity-queries

  48. 48.

    currentColor

  49. 49.

    body { … color: rebeccapurple; } form { border: 0.1em

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  50. 50.

    body { … color: deeppink; } form { border: 0.1em

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  51. 51.

    body { … color: darkcyan; } form { border: 0.1em

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  52. 52.

    body { … color: rebeccapurple; } form { border: 0.1em

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  53. 53.

    body { … color: deeppink; } form { border: 0.1em

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  54. 54.

    body { … color: darkcyan; } form { border: 0.1em

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  55. 55.
    None
  56. 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. 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. 58.

    <a href=""> <svg class="Icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <span>Say hi</span>

    </a>
  59. 59.

    <a href=""> <svg class="Icon" aria-hidden="true"> </svg> <span>Say hi</span> </a> <use

    xlink:href="#icon-mail"></use>
  60. 60.

    .Icon { fill: currentColor; }

  61. 61.

    <a href=""> <svg class="Icon" aria-hidden="true"> <use xlink:href="#icon-mail"></use> </svg> <span>Say hi</span>

    </a>
  62. 62.

    Blend modes

  63. 63.
    None
  64. 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. 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. 66.

    @supports

  67. 67.

    @supports (background-blend-mode: hue) { /* this code will only run

    if the browser supports background-blend-mode: hue */ }
  68. 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. 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. 70.
    None
  71. 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. 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. 73.
    None
  74. 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. 75.

    Grid layout

  76. 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. 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. 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. 79.
    None
  80. 80.
    None
  81. 81.
    None
  82. 82.
    None
  83. 83.

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

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

    Thank you! @lottejackson Charlotte Jackson / Clearleft, Brighton