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. 3.
  2. 6.

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

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

    The user should be able to access all content and

    accomplish core tasks. ” “
  4. 9.
  5. 10.

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

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

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

    2em 1em 0; border-radius: 25em; shape-outside: circle(50%); }
  8. 13.
  9. 14.
  10. 15.
  11. 16.

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

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

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

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

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

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

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

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

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

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

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

    { flex-grow: 1; ... } label { flex-basis: 100%; display: block; ... }
  17. 23.
  18. 24.
  19. 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; }
  20. 31.
  21. 34.
  22. 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); }
  23. 38.
  24. 42.
  25. 43.
  26. 49.

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

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

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

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

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

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

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

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

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

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

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

    solid; … } input { color: currentColor; border: 0.1em solid; … } button { background-color: currentColor; … }
  32. 55.
  33. 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>
  34. 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>
  35. 63.
  36. 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; }
  37. 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; }
  38. 66.
  39. 67.

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

    if the browser supports background-blend-mode: hue */ }
  40. 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; } }
  41. 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; }
  42. 70.
  43. 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; } }
  44. 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; } }
  45. 73.
  46. 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; } }
  47. 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
  48. 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; }
  49. 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; }
  50. 79.
  51. 80.
  52. 81.
  53. 82.
  54. 84.
  55. 85.
  56. 86.
  57. 87.