Interface Styling & Scripting on WebKit Mobile

4,575 views

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,575
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • - Modern CSS3-based techniques available in WebKit

  • * My name is David (Aurelio) from uxebu (munich/amsterdam), a mobile web company
    * We develop cross platform mobile apps with JavaScript, HTML/CSS for the interface
    * we use the web technologies to increase our app's reach
    * Common codebase, distinct interface styles
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * “Micro-styling”
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * “Micro-styling”
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * “Micro-styling”
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * “Micro-styling”
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * “Micro-styling”
    * Scripting transforms and animations
  • TouchScroll: A JS-based scrolling layer for WebKit Mobile/Touch
    * CSS: box layout, transitions, transforms, gradients
    * JS: transform matrix, bezier curves
  • First topic: layout with flexible boxes
  • Flexible Box Layout:
    * Direction of document flow: Parent box lays out child boxes horizontally/vertically
    * Boxes can stretch along the axis individually
    * Similar to “display: table”, without its disadvantages
    * Boxes stay in the document flow, no floats, no absolute positioned elements
    * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views.
    * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800)
    * W3C Working Draft, no futureless technique
  • Flexible Box Layout:
    * Direction of document flow: Parent box lays out child boxes horizontally/vertically
    * Boxes can stretch along the axis individually
    * Similar to “display: table”, without its disadvantages
    * Boxes stay in the document flow, no floats, no absolute positioned elements
    * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views.
    * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800)
    * W3C Working Draft, no futureless technique
  • Flexible Box Layout:
    * Direction of document flow: Parent box lays out child boxes horizontally/vertically
    * Boxes can stretch along the axis individually
    * Similar to “display: table”, without its disadvantages
    * Boxes stay in the document flow, no floats, no absolute positioned elements
    * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views.
    * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800)
    * W3C Working Draft, no futureless technique
  • Flexible Box Layout:
    * Direction of document flow: Parent box lays out child boxes horizontally/vertically
    * Boxes can stretch along the axis individually
    * Similar to “display: table”, without its disadvantages
    * Boxes stay in the document flow, no floats, no absolute positioned elements
    * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views.
    * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800)
    * W3C Working Draft, no futureless technique
  • Flexible Box Layout:
    * Direction of document flow: Parent box lays out child boxes horizontally/vertically
    * Boxes can stretch along the axis individually
    * Similar to “display: table”, without its disadvantages
    * Boxes stay in the document flow, no floats, no absolute positioned elements
    * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views.
    * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800)
    * W3C Working Draft, no futureless technique
  • Example from TouchScroll: Simple header and footer layout – everyday task for phone developers, but not realizable with CSS2: Viewport behavior of WebKit Mobile optimized for document displaying, not for applications.

    * Show flexibility in browser
  • * Simple markup
    * Even simpler styling
  • * Simple markup
    * Even simpler styling
  • * Simple markup
    * Even simpler styling
  • * Simple markup
    * Even simpler styling
  • * Simple markup
    * Even simpler styling
  • * Simple markup
    * Even simpler styling
  • * Simple markup
    * Even simpler styling
  • Another example from TouchScroll: flexible tab bar – tabs resize horizontally like table cells
    * Show in Browser
  • Again: simple markup and styling
  • Again: simple markup and styling
  • Again: simple markup and styling
  • Again: simple markup and styling
  • Again: simple markup and styling
  • Again: simple markup and styling
  • * It’s possible to display elements independently from source order (box-direction, box-ordinal-group)
    * alignment orthogonal to the display-axis
  • * It’s possible to display elements independently from source order (box-direction, box-ordinal-group)
    * alignment orthogonal to the display-axis
  • * It’s possible to display elements independently from source order (box-direction, box-ordinal-group)
    * alignment orthogonal to the display-axis

  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Types of transforms:
    * All transforms exist for 2d and 3d (since when?)
    * Rotations, skews, translations, scalings
    * Matrix support (2x2, 4x4)
    * Don’t affect other elements in the document flow
    * Again, W3C drafts
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 – bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 – bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 – bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 – bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 – bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 – bad performance, no perspective
  • Show demos on iPhone: poster circle, morphing power cube






  • * border images: image as border, dividing it into nine fields
    * gradients: use everywhere instead of an image
    *
  • * border images: image as border, dividing it into nine fields
    * gradients: use everywhere instead of an image
    *
  • * border images: image as border, dividing it into nine fields
    * gradients: use everywhere instead of an image
    *
  • * border images: image as border, dividing it into nine fields
    * gradients: use everywhere instead of an image
    *
  • * border images: image as border, dividing it into nine fields
    * gradients: use everywhere instead of an image
    *
  • * border images: image as border, dividing it into nine fields
    * gradients: use everywhere instead of an image
    *
  • * All three techniques combined: border-image, gradient, mask
    * Advantage: better maintainability, fast changes
  • * All three techniques combined: border-image, gradient, mask
    * Advantage: better maintainability, fast changes
  • * All three techniques combined: border-image, gradient, mask
    * Advantage: better maintainability, fast changes

  • * Transitions: smooth change between two states, easy to script
    * Animations: Keyframe-based, explicit starting state, repeatable
  • * Transitions: smooth change between two states, easy to script
    * Animations: Keyframe-based, explicit starting state, repeatable
  • * Transitions between two states for one or more properties (comma-separated)
    * Transitions have a duration, and optionally delay and timing function
    * On iPhone: Hardware acceleration for opacity and transform
  • * Transitions between two states for one or more properties (comma-separated)
    * Transitions have a duration, and optionally delay and timing function
    * On iPhone: Hardware acceleration for opacity and transform
  • * Transitions between two states for one or more properties (comma-separated)
    * Transitions have a duration, and optionally delay and timing function
    * On iPhone: Hardware acceleration for opacity and transform
  • * Transitions between two states for one or more properties (comma-separated)
    * Transitions have a duration, and optionally delay and timing function
    * On iPhone: Hardware acceleration for opacity and transform
  • * Keyframes are defined seperately from in CSS
    * Each keyframe contains information about property states
    * Are added to a selector
    * Optional timing function for each keyframe
  • * Keyframes are defined seperately from in CSS
    * Each keyframe contains information about property states
    * Are added to a selector
    * Optional timing function for each keyframe
  • * Keyframes are defined seperately from in CSS
    * Each keyframe contains information about property states
    * Are added to a selector
    * Optional timing function for each keyframe
  • * Keyframes are defined seperately from in CSS
    * Each keyframe contains information about property states
    * Are added to a selector
    * Optional timing function for each keyframe
  • * Easing functions represented by a cubic bezier curve
    * Normalized coordinate system [0, 1]
    * Two explicit control points within the coordinate system

  • * Easing functions represented by a cubic bezier curve
    * Normalized coordinate system [0, 1]
    * Two explicit control points within the coordinate system

  • * Easing functions represented by a cubic bezier curve
    * Normalized coordinate system [0, 1]
    * Two explicit control points within the coordinate system

  • * Easing functions represented by a cubic bezier curve
    * Normalized coordinate system [0, 1]
    * Two explicit control points within the coordinate system

  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable “t”
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable “t”
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable “t”
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable “t”
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable “t”
    * solving for x or y involves complex numbers
  • * construction in dependency of “t”

  • * all bubbling
    * on iPhone 3G, webkitTransitionEnd fires late
  • * all bubbling
    * on iPhone 3G, webkitTransitionEnd fires late
  • * all bubbling
    * on iPhone 3G, webkitTransitionEnd fires late
  • * all bubbling
    * on iPhone 3G, webkitTransitionEnd fires late
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix
    * Methods to translate, scale, rotate
    * Methods multiply, inverse
    * toString() returns CSS compatible matrix function definition
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix
    * Methods to translate, scale, rotate
    * Methods multiply, inverse
    * toString() returns CSS compatible matrix function definition
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix
    * Methods to translate, scale, rotate
    * Methods multiply, inverse
    * toString() returns CSS compatible matrix function definition
  • * WebKitCSSMatrix represents a 4x4/16x16 transform matrix
    * Methods to translate, scale, rotate
    * Methods multiply, inverse
    * toString() returns CSS compatible matrix function definition
  • * Same algorithm as WebKit for t approximasation
    * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves
    * Smoothly chained animations
    * Don’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
  • * Same algorithm as WebKit for t approximasation
    * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves
    * Smoothly chained animations
    * Don’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
  • * Same algorithm as WebKit for t approximasation
    * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves
    * Smoothly chained animations
    * Don’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
  • * Same algorithm as WebKit for t approximasation
    * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves
    * Smoothly chained animations
    * Don’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
  • * Two constructors in global scope
    * Useful for dynamic animation construction?
  • * Two constructors in global scope
    * Useful for dynamic animation construction?



  • Interface Styling & Scripting on WebKit Mobile

    1. 1. Making it smooth Interface Styling & Scripting for WebKit Mobile David Aurelio – uxebu Consulting Ltd. & Co. KG
    2. 2. We open the mobile web.
    3. 3. Topics Layout Transforms Animation Styling JavaScript Support
    4. 4. TouchScroll JavaScript/CSS 3 Based Scrolling http://u.nu/8uvg8
    5. 5. Flexible Boxes s t r e t c h Photo: http://www.flickr.com/photos/18773952@N00/416987309 – by mahalie – cc licensed
    6. 6. display: (-webkit-)box; horizontal/vertical box positioning flexible boxes swiss army knife for layout tasks In WebKit and Gecko for years W3C Draft: “Flexible Box Layout Module”
    7. 7. Layout w/Header & Footer
    8. 8. Layout w/Header & Footer <div class="screen"> ! <div class="head"><!-- Header bar --></div> ! <div class="contents"><!-- Screen contents --></div> ! <div class="footer"><!-- Footer / toolbar --></div> </div> .screen { ! display: -webkit-box; ! -webkit-box-orient: vertical; ! -webkit-box-pack: justify; } .contents { ! -webkit-box-flex: 1; }
    9. 9. Horizontal Tab Bar
    10. 10. Horizontal Tab Bar <div class="tabs"> ! <a href="#about">About</a> ! <a href="#horiz">Horizontal</a> ! <a href="#twodim">2-Dimensional</a> </div> .tabs { ! display: -webkit-box; ! -webkit-box-pack: justify; } .tabs > a { ! width: 1px; ! -webkit-box-flex: 1; }
    11. 11. More in “display: box” display order vs. source order alignment multiple lines
    12. 12. CSS Transforms Photo: http://www.flickr.com/photos/jiazi/1061447777/ – by jiazi – cc licensed
    13. 13. CSS 3 Transforms } Rotate Matrix Skew Translate Scale
    14. 14. -webkit-transform: … rotate(30deg) rotateX/Y/Z rotate3d skew(20deg [, 10deg]) skewX/Y translate translateX/Y/Z translate3d scale(1.2) scaleX/Y scale3d matrix(1, 0, 0, 1, 0, 0) matrix3d perspective(200)
    15. 15. Demos
    16. 16. More Style Border Images Transparency Masks Gradients Photo: http://www.flickr.com/photos/senor_codo/234774166 – by Señor Codo – cc licensed Frame: http://www.flickr.com/photos/eriwst/2303608353/ – by erwist – cc licensed
    17. 17. More Style Border Images -webkit-border-image: url(…) 3 3 3 3 stretch Gradients -webkit-gradient( linear, 0 0, 0 100%, from(#d67809), color-stop(0.5, #b51818), to(#b51887)) Transparency Masks -webkit-mask-image: url(…) + = -webkit-mask-box-image: …
    18. 18. More Style, Combined →
    19. 19. Movement: CSS Animations Photo: http://www.flickr.com/photos/raindog/6359617/ – by raindog – cc licensed
    20. 20. Types of Animations Transitions Keyframe-based animations
    21. 21. Transitions Transition between to states of a property delay, duration, timing function #mybox { ! -webkit-transition-property: opacity[, -webkit-transform]; ! -webkit-transition-delay: 0.1s[, 0]; ! -webkit-transition-duration: 120ms [, 2s]; ! -webkit-transition-timing-function: ease-out [, ease]; } document.getElementById("mybox").style.opacity = "0";
    22. 22. Keyframe based animations Keyframes defined seperately Encapsulate property state at keyframes @-webkit-keyframes 'diagonal-slide' { ! from { -webkit-transform: translate(0, 0); } ! 50% { -webkit-transform: translate(-50px, -50px); } ! to { -webkit-transform: translate(100px, 100px); } } div { ! -webkit-animation-name: 'diagonal-slide'; ! -webkit-animation-duration: 5s; ! -webkit-animation-iteration-count: 10; }
    23. 23. Timing Functions Cubic bezier curves From (0, 0) to (1, 1) Two explicit control points cubic-bezier(0.2, 0.6, 0.8, 0.6)
    24. 24. Cubic Bezier Curves y/out: progress → t→ x/in: elapsed time → http://www.w3.org/TR/css3-transitions/ – Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved.
    25. 25. Cubic Bezier Curves Graphic from http://de.wikipedia.org/wiki/Datei:Bezier_cubic_anim.gif – public domain
    26. 26. Script Support for CSS Photo: http://www.flickr.com/photos/86624586@N00/10187684/ – by kevinzim – cc licensed
    27. 27. Events webkitTransitionEnd webkitAnimationStart webkitAnimationIteration webkitAnimationEnd
    28. 28. Scripting Transforms WebKitCSSMatrix Instanciate from element state var s = window.getComputedStyle(elm); var m = new WebKitCSSMatrix(s.webkitTransform); Transforming methods Broken on Android < v2.0
    29. 29. Scripting Bezier Curves Bezier calculation library github.com/davidaurelio/css-beziers approximate t for given x or y Subdivide bezier curves
    30. 30. More? Interfaces WebKitCSSKeyframesRule, WebKitCSSKeyframeRule document.styleSheets[i].cssRules[j]
    31. 31. Linkmania http://uxebu.com/blog http://static.uxebu.com/~david/touchscroll/ http://developer.apple.com/safari/library/navigation/ http://webkit.org/blog/ http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-2d-transforms/ http://www.w3.org/TR/css3-3d-transforms/ http://www.w3.org/TR/css3-transitions/ http://www.w3.org/TR/css3-animations/ http://www.netzgesta.de/dev/cubic-bezier-timing-function.html http://github.com/davidaurelio
    32. 32. Questions?
    33. 33. Thank You Twitter: @void_0 david@uxebu.com

    ×