Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Chris Heilmann
@codepo8
christianheilmann.com
CSS vs. JavaScript:
Trust vs. Control
https://twitter.com/floatvoid/status/863605150799118336
https://twitter.com/gianablantin/status/860965927898054656
CSS see...
CSS is fault tolerant – this can be confusing
JavaScript is not fault tolerant – this can be disastrous
CSS
You apply your styles
and you hope it
worked.
JavaScript
You control the styling
and you can and should
verify that it...
embracethesquishiness.com
Means embracing the
squishiness of the web!
embracethesquishiness.com
Things beyond your
control:
• The browsers of your users
• The resolution, pixel depth and colou...
CSS
It is the job of the browser
to perform well, use GPU
resources and skip
functionality.
JavaScript
It’s your job to te...
So why do we constantly under-estimate CSS and
over-value the benefits of JavaScript?
CSS had a bumpy history…
• Initially very limited and a replacement for
visual HTML and attributes (font, bgcolor,
align…)...
Our solution was to patch with JavaScript.
We can read out conditions and react to them
creating HTML and applying styling.
But CSS has been going leaps and bounds
• Evergreen browsers are a thing
• Browser tooling gives detailed insights
• Suppo...
So here are some amazing things CSS can do
now and you should consider using…
Calculated CSS values
Calculations
developer.mozilla.org/en/docs/Web/CSS/calc
Calculations
developer.mozilla.org/en/docs/Web/CSS/calc
Calculations
developer.mozilla.org/en/docs/Web/CSS/calc
Media
Queries
Media Queries
developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Media Queries
developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Media Queries
developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Generated
content
Generated Content
a.singlediv.comhttps://developer.mozilla.org/en-US/docs/Web/CSS/::before
Generated Content
http://a.singlediv.com/
Animations
and transitions
Animations / Transitions
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
developer.mozilla.or...
Animations / Transitions
Animations / Transitions
Viewport Units
Viewport Units
Viewport Width (vw)
A percentage of the full viewport width.
f.e. 480px wide screen - 10vw is 10% or 48px
%...
Viewport Units
css-tricks.com/fun-viewport-units/
Viewport Units
css-tricks.com/fun-viewport-units/
Viewport Units
css-tricks.com/fun-viewport-units/
Flexbox
Flexbox
http://flexbox.buildwithreact.com/
Flexbox
flexboxfroggy.com/
Flexbox
vimeo.com/145055822
Flexbox
CSS Grid
Grid
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Grid
gridbyexample.com
Grid
gridbyexample.com
Grid
cssgridgarden.com
Grid
youtube.com/watch?v=N5Lt1SLqBmQs youtube.com/watch?v=5Z7lSSMwRgo
Grid
Grid and flexbox
Flexbox was designed for layout in
one dimension, layout in a row or a
column.
Grid was designed for two-...
CSS Custom
properties
(variables)
Custom Properties (variables)
developer.mozilla.org/en-US/docs/Web/CSS/--*
Custom Properties (variables)
youtube.com/watch?v=kZOJCVvyF-4
Custom Properties (variables)
CSS Feature Queries
CSS Feature Queries
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
CSS Feature Queries
http://a.singlediv.com/
CSS and JavaScript?
CSS and JavaScript working together is incredibly
powerful and the right thing to do.
CSS can’t solve everything…
speakerdeck.com/didoo/let-there-be-peace-on-css
Cristiano Rastelli
@areaweb
CSS and JavaScript working together in a
non-module world…
• Use CSS when you can using the things you
saw here
• If you n...
CSS and JavaScript working together in a
non-module world…
youtube.com/watch?v=kZOJCVvyF-4
CSS and JavaScript working together in a
non-module world…
youtube.com/watch?v=kZOJCVvyF-4
Every style change has consequences…
csstriggers.com
Paul Lewis @aerotwist
Das Surma @DasSurma
CSS is much more
reliable than it used
to be…
Users over authors over implementors over
specifiers over theoretical purity…
https://www.w3.org/TR/html-design-principles/
Our users deserve
interfaces that are
smooth, reliable and
don’t kill their batteries.
So, consider CSS a bit
more…
You can be lazy and build
on the work of the
community…
Super inspiring and highly active CSS folk!
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
THANKS!
CSS vs. JavaScript - Trust vs. Control
Upcoming SlideShare
Loading in …5
×

CSS vs. JavaScript - Trust vs. Control

1,055 views

Published on

I'm a little teapot, nobody reads this.

Published in: Education

CSS vs. JavaScript - Trust vs. Control

  1. 1. Chris Heilmann @codepo8 christianheilmann.com CSS vs. JavaScript: Trust vs. Control
  2. 2. https://twitter.com/floatvoid/status/863605150799118336 https://twitter.com/gianablantin/status/860965927898054656 CSS seems to be confusing for programmers…
  3. 3. CSS is fault tolerant – this can be confusing
  4. 4. JavaScript is not fault tolerant – this can be disastrous
  5. 5. CSS You apply your styles and you hope it worked. JavaScript You control the styling and you can and should verify that it worked
  6. 6. embracethesquishiness.com Means embracing the squishiness of the web!
  7. 7. embracethesquishiness.com Things beyond your control: • The browsers of your users • The resolution, pixel depth and colour settings of their devices • Their connection reliability and speed • Their connection restrictiveness – resources may be blocked • Their font size and zoom needs • The availability of resources on their machines for your product (is the CPU already burning?) • The amount of text content and image sizes in your product – CMS anyone?
  8. 8. CSS It is the job of the browser to perform well, use GPU resources and skip functionality. JavaScript It’s your job to test for support, to ensure rendering, painting and reflow is fast and to keep animation in sync.
  9. 9. So why do we constantly under-estimate CSS and over-value the benefits of JavaScript?
  10. 10. CSS had a bumpy history… • Initially very limited and a replacement for visual HTML and attributes (font, bgcolor, align…) • Patchy browser support and very odd errors without debugging options • Massive jump in functionality when iPhone became a thing and Apple called the shots • Lots of problems with browser wars around prefixes • Up until recently no layout model, but hacks using positioning and floating. So, too restrictive or too confusing
  11. 11. Our solution was to patch with JavaScript. We can read out conditions and react to them creating HTML and applying styling.
  12. 12. But CSS has been going leaps and bounds • Evergreen browsers are a thing • Browser tooling gives detailed insights • Support is well documented: caniuse.com • Support channels and bug tracking is available for almost all browsers • Pre-processors like Sass and Less have turned up the heat to innovate the spec faster, much like jQuery inspired JavaScript of today • Approaches like OOCSS (Nicole Sullivan) and Atomic Design (Brad Frost) help work with maintainability across different componentss
  13. 13. So here are some amazing things CSS can do now and you should consider using…
  14. 14. Calculated CSS values
  15. 15. Calculations developer.mozilla.org/en/docs/Web/CSS/calc
  16. 16. Calculations developer.mozilla.org/en/docs/Web/CSS/calc
  17. 17. Calculations developer.mozilla.org/en/docs/Web/CSS/calc
  18. 18. Media Queries
  19. 19. Media Queries developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
  20. 20. Media Queries developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
  21. 21. Media Queries developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  22. 22. Generated content
  23. 23. Generated Content a.singlediv.comhttps://developer.mozilla.org/en-US/docs/Web/CSS/::before
  24. 24. Generated Content http://a.singlediv.com/
  25. 25. Animations and transitions
  26. 26. Animations / Transitions developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
  27. 27. Animations / Transitions
  28. 28. Animations / Transitions
  29. 29. Viewport Units
  30. 30. Viewport Units Viewport Width (vw) A percentage of the full viewport width. f.e. 480px wide screen - 10vw is 10% or 48px % is percentage of the parent element, vw is percentage of the window. Viewport Height (vh) A percentage of the full viewport height. Viewport Minimum (vmin) A percentage of the viewport width or height, whichever is smaller. 10vmin = 10% of the current viewport width in portrait and 10% of the viewport height on landscape. Viewport Maximum (vmax) A percentage of the viewport width or height, whichever is larger.
  31. 31. Viewport Units css-tricks.com/fun-viewport-units/
  32. 32. Viewport Units css-tricks.com/fun-viewport-units/
  33. 33. Viewport Units css-tricks.com/fun-viewport-units/
  34. 34. Flexbox
  35. 35. Flexbox http://flexbox.buildwithreact.com/
  36. 36. Flexbox flexboxfroggy.com/
  37. 37. Flexbox vimeo.com/145055822
  38. 38. Flexbox
  39. 39. CSS Grid
  40. 40. Grid developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
  41. 41. Grid gridbyexample.com
  42. 42. Grid gridbyexample.com
  43. 43. Grid cssgridgarden.com
  44. 44. Grid youtube.com/watch?v=N5Lt1SLqBmQs youtube.com/watch?v=5Z7lSSMwRgo
  45. 45. Grid
  46. 46. Grid and flexbox Flexbox was designed for layout in one dimension, layout in a row or a column. Grid was designed for two- dimensional layout, layout in rows and columns at the same time. Grid can and should use Flexbox in its cells. developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout Why is there a flexbox and a grid?
  47. 47. CSS Custom properties (variables)
  48. 48. Custom Properties (variables) developer.mozilla.org/en-US/docs/Web/CSS/--*
  49. 49. Custom Properties (variables) youtube.com/watch?v=kZOJCVvyF-4
  50. 50. Custom Properties (variables)
  51. 51. CSS Feature Queries
  52. 52. CSS Feature Queries https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
  53. 53. CSS Feature Queries http://a.singlediv.com/
  54. 54. CSS and JavaScript?
  55. 55. CSS and JavaScript working together is incredibly powerful and the right thing to do.
  56. 56. CSS can’t solve everything… speakerdeck.com/didoo/let-there-be-peace-on-css Cristiano Rastelli @areaweb
  57. 57. CSS and JavaScript working together in a non-module world… • Use CSS when you can using the things you saw here • If you need to communicate with CSS, consider changing Custom Properties • If that’s not an option apply classes to parent elements using classList. • As a very last resort, you can alter the style directly
  58. 58. CSS and JavaScript working together in a non-module world… youtube.com/watch?v=kZOJCVvyF-4
  59. 59. CSS and JavaScript working together in a non-module world… youtube.com/watch?v=kZOJCVvyF-4
  60. 60. Every style change has consequences… csstriggers.com Paul Lewis @aerotwist Das Surma @DasSurma
  61. 61. CSS is much more reliable than it used to be…
  62. 62. Users over authors over implementors over specifiers over theoretical purity… https://www.w3.org/TR/html-design-principles/
  63. 63. Our users deserve interfaces that are smooth, reliable and don’t kill their batteries. So, consider CSS a bit more…
  64. 64. You can be lazy and build on the work of the community…
  65. 65. Super inspiring and highly active CSS folk!
  66. 66. CHRIS HEILMANN @CODEPO8 CHRISTIANHEILMANN.COM THANKS!

×