CSS: Current, Soon, Someday (Web Directions Code 2017)

CSS: Current, Soon, Someday (Web Directions Code 2017)

Thanks to progressive enhancement, we can make use of many new CSS features, even though not everyone uses a browser that supports them. We'll take a look at examples of CSS that we can use now and what we can use with care. And it's not all about using new CSS; we can all play a part in its development, too.

C19ad910f6de3de7bfba85471496e0c4?s=128

Charlotte Jackson

August 03, 2017
Tweet

Transcript

  1. Charlotte Jackson, Ansarada @lottejackson CSS: Current, Soon, Someday Web Directions,

    Code 2017
  2. I can’t use in it production Browser support too low

    We need to support IE
  3. Illustration by Tiffany Tse at Shopify: https://www.shopify.com/partners/ blog/what-is-progressive-enhancement-and-why-should-you-care

  4. The user should be able to access all content and

    accomplish core tasks.” “
  5. CSS shapes

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

    2em 1em 0; border-radius: 25em; shape-outside: circle(50%); }
  8. None
  9. .shape { width: 20em; height: 20em; float: left; margin: 1em

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

  11. @supports (shape-outside: circle()) { /* this code will only run

    if the browser supports shape-outside: circle */ }
  12. None
  13. .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; } }
  14. .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; } }
  15. None
  16. .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; }
  17. .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; }
  18. .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; } }
  19. .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; } }
  20. None
  21. None
  22. CSS Grid

  23. .Grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  24. grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));

  25. grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));

  26. Flexbox Grid

  27. None
  28. .Card { display: flex; } .Card-primary { display: flex; flex-basis:

    50%; flex-direction: column; justify-content: space-between; } .Card-secondary { flex-basis: 50%; } Card-secondary Card-primary
  29. None
  30. None
  31. None
  32. .Grid { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); } .Grid-item

    { grid-column: 2 / 4; } .Grid-item:nth-child(3n+2) { grid-column: 1 / 3; } .Grid-item:nth-child(5n+3), .Grid-item:nth-child(7n+5) { grid-column: 3 / 5; }
  33. .Grid-item { grid-column: 2 / 4; }

  34. /* Flexbox fallback styles. */ .Grid { display: flex; flex-wrap:

    wrap; max-width: 850px; } .Grid-item:nth-child(3n+1), .Grid-item:nth-child(5n-4) { margin-left: 25%; } /* Flexbox fallback styles. */ /*CSS Grid styles*/ @supports (display: grid) { .Grid { display: grid;
  35. None
  36. None
  37. https://www.smashingmagazine.com/2017/07/ enhancing-css-layout-floats-flexbox-grid/ Progressively Enhancing CSS Layout: From Floats To Flexbox

    To Grid • By Manuel Matuzović
  38. https://rachelandrew.co.uk/archives/2017/03/20/ css-grid-fallbacks-and-overrides/

  39. jensimmons.com

  40. None
  41. None
  42. None
  43. The cicada principle

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

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

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

  48. .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); }
  49. CSS variables

  50. None
  51. None
  52. $text-color: black; :root { --brand-color: coral; }

  53. $text-color: black; :root { --brand-color: coral; } .button1, .button2 {

    color: $text-color; background-color: var(--brand-color); … }
  54. $text-color: black; :root { --brand-color: coral; } .button2 { --brand-color:

    rebeccapurple; } $text-color: white; .button1, .button2 { color: $text-color; background-color: var(--brand-color); }
  55. None
  56. https://madebymike.com.au/ writing/using-css-variables/

  57. Color function

  58. /*sass color function*/ darken($base-color, 10%) lighten($base-color, 10%)

  59. /*add a bit more green*/ .container { background-color: color-mod(#70bc53 green(227));

    }
  60. /*adjust multiple parts*/ .container { background-color: color-mod(#70bc53 hue(359) saturation(48%) lightness(49%)

    tint(37%)); }
  61. /*adjust multiple parts*/ :root { --base-color: #937b19; } .container {

    color: color-mod(var(--base-color) hue(359)); }
  62. None
  63. calc() var() color-mod() @apply nesting @extend

  64. None
  65. None
  66. https://jonathantneal.github.io/css-db/

  67. None
  68. None
  69. Slide Thank you! Charlotte Jackson, Ansarada @lottejackson Slides: https://speakerdeck.com/lottejackson