Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Give CSS3 Some Love / FOWD2015

F8403810aba9bdec8f66588c856d0e2f?s=47 Dan Cork
November 04, 2015

Give CSS3 Some Love / FOWD2015

Give CSS3 Some Love
Future of Web Design 2015 - Rising Stars

F8403810aba9bdec8f66588c856d0e2f?s=128

Dan Cork

November 04, 2015
Tweet

Transcript

  1. Give CSS3 Some Love

  2. Because CSS4 Is Coming!

  3. Disclaimer:

  4. CSS4 Isn’t A Thing

  5. CSS Level 4 W orking Drafts

  6. CSS2.1 Last Major Version

  7. CSS Level 4 = CSS3 = CSS

  8. Confusing Much?

  9. What Am I Going T o T alk About

  10. CSS3 Usage

  11. How We Can Improve IT

  12. What’s Coming Soon

  13. @dancork

  14. Holiday Extras

  15. What’s The Problem

  16. CSS3 Usage is Poor

  17. T op 1 Million Websites http://trends.builtwith.com/css

  18. Max Width 270,538

  19. Max Width 27%

  20. Min Width 209,608

  21. Min Width 21%

  22. Media Queries 48%

  23. Chrome Anonymous Stats https://www .chromestatus.com/metrics/css/popularity

  24. transform 42.5%

  25. box-sizing 74.5%

  26. T oo often the web interface ends up being the

    lowest common denominator Henrik Joreteg
  27. Engineering a UI is complex

  28. little control over the environment

  29. Does the ux NEED to be the same?

  30. Who uses multiple browsers?

  31. elephant in the room

  32. None
  33. http://caniuse.com/usage_table.php

  34. IE8 1.38%

  35. >98% support CSS3

  36. CSS is unique

  37. Passes over unknown properties

  38. Less than half of web is responsive! IE is dying

    CSS is your friend CSS3 usage is poor
  39. What Can Be Done?

  40. Avoid vendor prefixes

  41. border-radius: 5px;

  42. -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;

  43. Will become outdated

  44. technical debt

  45. T ool up with Autoprefixer postcss/autoprefixer

  46. W rite pure css

  47. W orks with LESS and SASS

  48. CLI, GRUNT , GULP or WEBP ACK

  49. Minimises T echnical Debt

  50. Media queries

  51. None
  52. None
  53. Mobile first?

  54. Majority of mobile browsers support queries

  55. FOCUS ON JOBS, THEN SCREENS, BUT NEVER DEVICES https://blog.intercom.io/why-mobile-first-may-already-be-outdated/ Paul

    Adams
  56. Box Sizing

  57. Old box model was stupid

  58. Especially when building a grid

  59. Border Box

  60. Feb 1 International Box Sizing Awareness Day

  61. https://css- tricks.com/ international-box- sizing-awareness- day/

  62. OMG! It works in IE8

  63. html { box-sizing: border-box; } *, *:before, *:after { box-sizing:

    inherit; }
  64. T ransform

  65. T op/Left vs T ranslate

  66. Positioning T op/Left

  67. UI animation T ranslate

  68. top/left has large paint time

  69. 3D transforms hardware accelerated

  70. a { transform: translate3d(0,0,0); } a { transform: scale3d(1,1,1); }

  71. a { transform: translateZ(0); } a { transform: scaleZ(1); }

  72. no jank

  73. not everything is accelerated

  74. transform:translate transform:scale transform:rotate opacity

  75. but you can do a lot with those!

  76. Scale & Mouse events

  77. Making Material Design https://www .youtube.com/watch?v=rrT6v5sOwJg

  78. None
  79. None
  80. High Performance Animation http://www .html5rocks.com/en/tutorials/speed/high-performance-animations/

  81. csstriggers. com

  82. Vendor prefixes are stupid Go responsive, consider default Border-box all

    the things T ransform for UI Animation
  83. The New Stuff

  84. Feature Queries

  85. @supports

  86. @supports (display:flex) { section { display: flex } }

  87. @supports (column-width: 20rem) and (column-span: all) { div { column-width:

    20rem } div h2 { column-span: all } }
  88. Limited Support?

  89. JavaScript API

  90. CSS.supports()

  91. Polyfill

  92. Media Queries

  93. light-level

  94. dim normal washed

  95. @media (light-level: dim) { .app { background: black; color: white;

    } } @media (light-level: washed) { .app { background: white; color: black; } }
  96. hover

  97. none on-demand hover

  98. .element .tooltip { /* hide tooltip */ } @media (hover)

    { .element .inline-tooltip { /* hide inline tooltip */ } .element:hover .tooltip { /* show tooltip */ } }
  99. pointer

  100. none coarse fine

  101. .link { padding 1em; } @media (pointer:fine) { .link {

    padding: 0.25em; } }
  102. any-hover any-pointer

  103. pointer hover none hover course fine smartphones, touch screens stylus-based

    screens mouse, touch pad Nintendo Wii, Kinect
  104. custom media queries

  105. @custom-media --small (max-width: 520px); @media (--small) { /* styles for

    small viewport */ }
  106. PostCSS postcss/postcss-custom-media

  107. ranges

  108. @media (min-width: 600px) and (max-width: 1000px) {}

  109. @media (width > 600px) and (width < 1000px) {}

  110. @media (600px < width < 1000px) {}

  111. PostCSS postcss/postcss-media-minmax

  112. Relational :has()

  113. div:has(p){ background: #FF0000; }

  114. Change CSS based on content

  115. TO-DO

  116. <div class=“todo”> <input /> <ul> </ul> </div>

  117. <div class=“todo”> <input /> <ul class=“empty”> </ul> </div>

  118. <div class=“todo”> <input /> <ul style=“display:none;”> </ul> </div>

  119. .todo ul { display:none; } .todo ul:has(li) { display:block; }

  120. .todo ul:not(:has(li)) { display:none; }

  121. Ordering is important

  122. .todo ul:not(:has(li)) { display:none; }

  123. .todo ul:has(:not(li)) { display:none; }

  124. Browser support is limited

  125. It’s non existent

  126. We can try it

  127. Polyfill.js philipwalton/polyfill

  128. Polyfill({selectors: [“:has"]}) .doMatched(function (rules) { rules.each(function (rule) { $(rule.getSelectors()) .css(rule.getDeclaration());

    }); });
  129. Feature queries removes reliance on JavaScript :has() is too awesome!!!

    New media queries, understand the environment better
  130. last decade's "pretty good” is today’s "a bit shit" Jake

    Archibald
  131. Thank Y ou TWITTER: @DANCORK SLIDES: SPEAKERDECK.COM/DANCORK/FOWD2015