Keeping the web native!

My slides from this year's webinale. Why use JavaScript when the web platform is capable of doing a lot more than you think. We'll look at how to style custom forms and what you can use input elements for, as well as find a natural way of doing Parallax Scrolling just in pure CSS.

Transcript

1. K E E P I N G T H E W E B N A T I V E S T E F A N B AU M G A R T N E R - @ D D P R R T
2. @ddprrt
3. Netural
4. 2 0 1 1
5. 2 0 1 1
6. 2 0 1 1 W A S A B A D Y E A R • Lots and lots of JavaScript to make IE7 behave like a modern browser • Lots and lots of Images to recreate CSS3 features • People just wanted to do the same flash as before, but it had “to work on the iPad”
7. J AVA S C R I P T I S A L I T T L E L I K E A M U S H R O O M I N S U P E R M A R I O
8. I T ’ S A N E X T R A C H A N C E W H E N D E A L I N G W I T H A R T D I R E C T O R S
9. B U T O N E C A N G E T G R E E D Y
12. F O R M S : S E L E C T S
13. Y O U WA N T T O K E E P T H E O R I G I N A L S E L E C T S vs
14. <select name="lang" id="lang"> <option value="*">Select your Language</option> <option value="AT">Austrian</option> <option value="DE">German</option> <option value="EN">English</option> <option value="FR">French</option> </select>
15. select { appearance: none; }
16. select { appearance: none; border: 1px solid black; border-radius: 0; font-size: 20px; padding: 5px 40px 5px 5px; font-family: Helvetica; background: white; }
17. select { appearance: none; border: 1px solid black; border-radius: 0; font-size: 20px; padding: 5px 40px 5px 5px; font-family: Helvetica; background: white url(…selectBox-arrow.gif) no-repeat 95% center; }
18. select { appearance: none; border: 1px solid black; border-radius: 0; font-size: 20px; padding: 5px 40px 5px 5px; font-family: Helvetica; background: white url(…selectBox-arrow.gif) no-repeat 95% center; } http://codepen.io/ddprrt/pen/leLab
19. IE Hotfix for selection arrow ! ! ::-ms-expand { display: none; }
20. T H E R E I S M O R E http://bit.ly/1jKqgou ::-ms-check ::-ms-browse ::-ms-reveal ::-ms-clear
21. T H E R E I S M O R E http://bit.ly/1jKqgou ::-ms-check ::-ms-browse ::-ms-reveal ::-ms-clear HANDLE WITH CARE
22. ::-webkit-file-upload-button ::-ms-browse
23. S T Y L I N G F O R M E L E M E N T S • Styling form elements with proprietary selectors might be good for one platform ! • Don’t expect any of those features to become standard ! • Rely on standard CSS features when styling, and just tweak when necessary
24. F O R M S : C H E C K B O X / R A D I O S
25. <input type="checkbox" id="cb1" /> <label for="cb1">Accept our terms and conditions</label>
26. input[type="checkbox"] { position: absolute; left: -100%; top: -100%; opacity: 0; }
27. input[type="checkbox"] + label:before { content: ''; position: absolute; width: 30px; height: 30px; font-size: 30px; line-height: 30px; margin-left: -40px; margin-top: 5px; }
28. input[type="checkbox"]:checked + label:before { content: '\2713'; text-align: center; }
29. input[type="checkbox"]:focus + label:before { outline: 3px solid blue; }
30. input[type="checkbox"]:focus + label:before { outline: 3px solid blue; } F U L L D E M O : http://codepen.io/ddprrt/pen/xsiDz
31. T H E P R O S • Native click behaviour for labels - no need to reimplement “checking” • Can use any image or style you like • Keyboard accessible
32. T H E P R O S • Native click behaviour for labels - no need to reimplement “checking” • Can use any image or style you like • Keyboard accessible T H E CO N S • Accesibilty: Does need CSS or Icon Fonts for high contrast mode
33. T H E R E I S A N I N V I S I B L E L I N K B E T W E E N L A B E L A N D I N P U T
34. E X T E N D I N G F U R T H E R <label for="navtoggler">☰</label>
35. E X T E N D I N G F U R T H E R <label for="navtoggler">☰</label>
36. E X T E N D I N G F U R T H E R <label for="navtoggler">☰</label> <input type="checkbox" id=“navtoggler"> <nav> … </nav>
37. E X T E N D I N G F U R T H E R nav { height: 0px; max-height: 0px; overflow: hidden; transition: max-height 0.5s; } ! #navtoggler:checked + nav { height: auto; max-height: 1000px }
38. J AVA S C R I P T ?
39. E X T E N D I N G T H E I D E A …
40. E X T E N D I N G T H E I D E A …
41. E X T E N D I N G T H E I D E A … fieldset { width: 550px; border: none; transition: margin-left 1s ease; }
42. E X T E N D I N G T H E I D E A … $('input[type="radio"]').on('change', function(){ var pos = $(this).next('label').data('offset');; $('fieldset').css('margin-left', -pos + 125); }); ! $('input[type="radio"]').each(function(){ var lbl = $(this).next('label'); lbl.data('offset',lbl.offset().left); });
43. F L O A T L A B E L P A T T E R N - C S S O N L Y ? <input type="text" required> form input:valid { //… do something } http://bradfrostweb.com/blog/post/float-label-pattern/ http://css-tricks.com/float-labels-css/
44. F L O A T L A B E L P A T T E R N - C S S O N L Y ? <input type="text" required> form input:valid { //… do something } http://bradfrostweb.com/blog/post/float-label-pattern/ http://css-tricks.com/float-labels-css/
45. F L O A T L A B E L P A T T E R N - C S S O N L Y ? <input type="text" required> form input:valid { //… do something } HANDLE WITH CARE http://bradfrostweb.com/blog/post/float-label-pattern/ http://css-tricks.com/float-labels-css/
46. U S I N G J AVA S C R I P T • Use JavaScript to handle states which cannot be handled by CSS ! • Use JavaScript for styling only if you have to calculate values. ! • For animations, use CSS animations/transitions
47. N O P S E U D O S O N I N P U T • Pseudo Elements need Content <p> <before goes here> Content <after goes there> </p> http://fettblog.eu/blog/2013/10/21/content-vs-value/
48. N O P S E U D O S O N I N P U T • Pseudo Elements need Content <p>this is content</p> <span>this is also content</span> <input>THIS IS NOT POSSIBLE</input> <p> <before goes here> Content <after goes there> </p> http://fettblog.eu/blog/2013/10/21/content-vs-value/
49. P A R A L L A X S C R O L L I N G
52. When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content using CSS transforms.
53. R E I N V E N T I N G T H E W H E E L
54. R E I N V E N T I N G T H E W H E E L $(‘a’).on(‘click’, function() { window.location.href = $(this).attr(‘href’); }
55. R E I N V E N T I N G T H E W H E E L $(‘a’).on(‘click’, function() { window.location.href = $(this).attr(‘href’); } http://uglyjs.github.io/2011/10/13/links-plus/ <a href="#" onclick="visit_url(<?php echo $url; ?>)”> ! function visit_url(url) { window.location = url; }
56. What is Parallax Scrolling actually?
57. L A Y E R 1
58. L A Y E R 2
59. L A Y E R 3
60. I N M O T I O N …
61. I N M O T I O N …
62. Parallax Scrolling originally was a way to simulate 3D ! For the Web: Let’s use real 3D to simulate Parallax Scrolling
65. html, body { perspective: 1px; transform-style: preserve-3d; }
66. header:after { content: ‘’; background-image: …; background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
67. header:after { content: ‘’; background-image: …; background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateZ(-1px); }
68. header:after { content: ‘’; background-image: …; background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateZ(-1px) scale(2); }
69. header:after { content: ‘’; background-image: …; background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateZ(-1px) scale(2); z-index: -1000; }
70. header:after { content: ‘’; background-image: …; background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateZ(-1px) scale(2); z-index: -1000; }
71. header:after { content: ‘’; background-image: …; background-size: cover; background-position: 50% 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateZ(-1px) scale(2); z-index: -1000; }
72. h1 { position: absolute; top: 50%; width: 100%; text-align: center; color: white; text-shadow: 2px 2px 2px #000; font-size: 3rem; transform: translateZ(-0.5px) scale(1.5) translateY(-50%); z-index: -500; }
73. h1 { position: absolute; top: 50%; width: 100%; text-align: center; color: white; text-shadow: 2px 2px 2px #000; font-size: 3rem; transform: translateZ(-0.5px) scale(1.5) translateY(-50%); z-index: -500; }
74. h1 { position: absolute; top: 50%; width: 100%; text-align: center; color: white; text-shadow: 2px 2px 2px #000; font-size: 3rem; transform: translateZ(-0.5px) scale(1.5) translateY(-50%); z-index: -500; }
75. header:after { content: ''; height: 100vh; width: 100%; position: absolute; top: 70vh; }
76. header:after { content: ''; height: 100vh; width: 100%; position: absolute; top: 70vh; background-image: linear-gradient(to bottom, transparent 0, black 70%); }
77. header:after { content: ''; height: 100vh; width: 100%; position: absolute; top: 70vh; background-image: linear-gradient(to bottom, transparent 0, black 70%); transform: translateZ(0.4px) scale(0.9); z-index: 400; }
78. header:after { content: ''; height: 100vh; width: 100%; position: absolute; top: 70vh; background-image: linear-gradient(to bottom, transparent 0, black 70%); transform: translateZ(0.4px) scale(0.9); z-index: 400; }
79. header:after { content: ''; height: 100vh; width: 100%; position: absolute; top: 70vh; background-image: linear-gradient(to bottom, transparent 0, black 70%); transform: translateZ(0.4px) scale(0.9); z-index: 400; }
80. F U L L D E M O : http://codepen.io/ddprrt/full/BbCes
81. S CO T T K E L L U M ’ S S A S S / CO M P A S S P A R A L L A X M I X I N @mixin parallax( $distance : 0, $perspective : 1 ) { @include transform( translateZ($distance * $perspective * 1px) scale(abs($distance - 1)) ); z-index: $distance * 1000; }
82. S CO T T K E L L U M ’ S S A S S / CO M P A S S P A R A L L A X M I X I N @mixin parallax( $distance : 0, $perspective : 1 ) { @include transform( translateZ($distance * $perspective * 1px) scale(abs($distance - 1)) ); z-index: $distance * 1000; } ! http://codepen.io/scottkellum/pen/bHEcA
83. T H E P R O S • Works on Smartphone Browsers • No scroll hi-jacking - everything is native • Natural barrier against humbug parallax • No 3D available? Won’t break!
84. T H E P R O S • Works on Smartphone Browsers • No scroll hi-jacking - everything is native • Natural barrier against humbug parallax • No 3D available? Won’t break! T H E CO N S • Does not work in any IE version (up to 11) and is not feature- testable (transform-style does exist, but just with ‘flat’) • Smartphone browser scrolling is clumsy (tough not as clumsy as with JS parallax)
85. 3.0
86. https://github.com/Modernizr/Modernizr/issues/805 New noPrefixes build option, which forces feature detects to only return true if the feature is supported without a vendor prefix http://fettblog.eu/blog/2014/02/20/no-prefixes/ https://github.com/Modernizr/Modernizr/issues/1082
87. J S F R E E
88. I N S T A G R A M ! I O S 5 S I N C E J U L Y 2 0 1 3
90. P R O G R E S S I V E E N H A N C E M E N T
91. F I N A L T I P S
92. C H O O S E W I S E L Y • Each element has a purpose • button, label, input, a 
 are meant to be interacted with • a is meant to have an URL
93. S T Y L E • Use standard CSS features • Use prefixes only if you 
 know what’s the deal • proprietary features might
 disappear in the future - 
 use carefully
94. J AVA S C R I P T T O H A N D L E S T A T E S
95. J AVA S C R I P T T O H A N D L E S T A T E S
96. workingdraft.de
97. what doesn’t kill me just makes me smaller
98. thx! fettblog.eu - @ddprrt - workingdraft.de