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

Keeping the web native!

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.

Stefan Baumgartner

June 02, 2014
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

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