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
   

   View Slide

2. @ddprrt
   

   View Slide

3. Netural
   

   View Slide

4. 2 0 1 1
   

   View Slide

5. 2 0 1 1
   

   View Slide

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”
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. B U T O N E C A N G E T G R E E D Y
   

   View Slide

10. View Slide

11. View Slide

12. F O R M S : S E L E C T S
    

    View Slide

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
    

    View Slide

14. 
    Select your Language
    Austrian
    German
    English
    French
    
    

    View Slide

15. select {
    appearance: none;
    }
    

    View Slide

16. select {
    appearance: none;
    border: 1px solid black;
    border-radius: 0;
    font-size: 20px;
    padding: 5px 40px 5px 5px;
    font-family: Helvetica;
    background: white;
    }
    

    View Slide

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;
    }
    

    View Slide

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
    

    View Slide

19. IE Hotfix for selection arrow
    !
    !
    ::-ms-expand {
    display: none;
    }
    

    View Slide

20. T H E R E I S M O R E
    http://bit.ly/1jKqgou
    ::-ms-check ::-ms-browse ::-ms-reveal ::-ms-clear
    

    View Slide

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
    

    View Slide

22. ::-webkit-file-upload-button ::-ms-browse
    

    View Slide

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
    

    View Slide

24. F O R M S : C H E C K B O X / R A D I O S
    

    View Slide

25. 
    Accept our terms and conditions
    

    View Slide

26. input[type="checkbox"] {
    position: absolute;
    left: -100%;
    top: -100%;
    opacity: 0;
    }
    

    View Slide

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;
    }
    

    View Slide

28. input[type="checkbox"]:checked + label:before {
    content: '\2713';
    text-align: center;
    }
    

    View Slide

29. input[type="checkbox"]:focus + label:before {
    outline: 3px solid blue;
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. E X T E N D I N G F U R T H E R
    ☰
    

    View Slide

35. E X T E N D I N G F U R T H E R
    ☰
    

    View Slide

36. E X T E N D I N G F U R T H E R
    ☰
    
    
    …
    
    

    View Slide

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
    }
    

    View Slide

38. J AVA S C R I P T ?
    

    View Slide

39. E X T E N D I N G T H E I D E A …
    

    View Slide

40. E X T E N D I N G T H E I D E A …
    

    View Slide

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;
    }
    

    View Slide

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);
    });
    

    View Slide

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 ?
    
    form input:valid {
    //… do something
    }
    http://bradfrostweb.com/blog/post/float-label-pattern/
    http://css-tricks.com/float-labels-css/
    

    View Slide

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 ?
    
    form input:valid {
    //… do something
    }
    http://bradfrostweb.com/blog/post/float-label-pattern/
    http://css-tricks.com/float-labels-css/
    

    View Slide

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 ?
    
    form input:valid {
    //… do something
    } HANDLE WITH CARE
    http://bradfrostweb.com/blog/post/float-label-pattern/
    http://css-tricks.com/float-labels-css/
    

    View Slide

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
    

    View Slide

47. N O P S E U D O S O N I N P U T
    • Pseudo Elements need Content
    
    
    Content
    
    
    http://fettblog.eu/blog/2013/10/21/content-vs-value/
    

    View Slide

48. N O P S E U D O S O N I N P U T
    • Pseudo Elements need Content
    this is content
    this is also content
    THIS IS NOT POSSIBLE
    
    
    Content
    
    
    http://fettblog.eu/blog/2013/10/21/content-vs-value/
    

    View Slide

49. P A R A L L A X S C R O L L I N G
    

    View Slide

50. View Slide

51. View Slide

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.
    

    View Slide

53. R E I N V E N T I N G T H E
    W H E E L
    

    View Slide

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’);
    }
    

    View Slide

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/
    

    View Slide

56. What is Parallax Scrolling actually?
    

    View Slide

57. L A Y E R 1
    

    View Slide

58. L A Y E R 2
    

    View Slide

59. L A Y E R 3
    

    View Slide

60. I N M O T I O N …
    

    View Slide

61. I N M O T I O N …
    

    View Slide

62. Parallax Scrolling originally was a way to simulate 3D
    !
    For the Web: Let’s use real 3D to simulate Parallax Scrolling
    

    View Slide

63. View Slide

64. View Slide

65. html, body {
    perspective: 1px;
    transform-style: preserve-3d;
    }
    

    View Slide

66. header:after {
    content: ‘’;
    background-image: …;
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    }
    

    View Slide

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);
    }
    

    View Slide

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);
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

75. header:after {
    content: '';
    height: 100vh; width: 100%;
    position: absolute;
    top: 70vh;
    }
    

    View Slide

76. header:after {
    content: '';
    height: 100vh; width: 100%;
    position: absolute;
    top: 70vh;
    background-image:
    linear-gradient(to bottom,
    transparent 0,
    black 70%);
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

80. F U L L D E M O :
    http://codepen.io/ddprrt/full/BbCes
    

    View Slide

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;
    }
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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)
    

    View Slide

85. 3.0
    

    View Slide

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
    

    View Slide

87. J S F R E E
    

    View Slide

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
    

    View Slide

89. View Slide

90. P R O G R E S S I V E E N H A N C E M E N T
    

    View Slide

91. F I N A L T I P S
    

    View Slide

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
    

    View Slide

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
    

    View Slide

94. J AVA S C R I P T T O H A N D L E S T A T E S
    

    View Slide

95. J AVA S C R I P T T O H A N D L E S T A T E S
    

    View Slide

96. workingdraft.de
    

    View Slide

97. what doesn’t kill me
    just makes me smaller
    

    View Slide

98. thx!
    fettblog.eu - @ddprrt - workingdraft.de
    

    View Slide