Successfully reported this slideshow.
Your SlideShare is downloading. ×

Interface Styling & Scripting on WebKit Mobile

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
Loading in …3
×

Check these out next

1 of 33 Ad
Advertisement

More Related Content

Similar to Interface Styling & Scripting on WebKit Mobile (20)

Recently uploaded (20)

Advertisement

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

Editor's Notes

  • - 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&apos;s reach
    * Common codebase, distinct interface styles
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * &amp;#x201C;Micro-styling&amp;#x201D;
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * &amp;#x201C;Micro-styling&amp;#x201D;
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * &amp;#x201C;Micro-styling&amp;#x201D;
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * &amp;#x201C;Micro-styling&amp;#x201D;
    * Scripting transforms and animations
  • Topics:
    * Layout: CSS-support for easy layouts
    * Element transforms w/o reflows
    * Animation with transitions and keyframes
    * &amp;#x201C;Micro-styling&amp;#x201D;
    * 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 &amp;#x201C;display: table&amp;#x201D;, 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 &amp;#x201C;display: table&amp;#x201D;, 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 &amp;#x201C;display: table&amp;#x201D;, 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 &amp;#x201C;display: table&amp;#x201D;, 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 &amp;#x201C;display: table&amp;#x201D;, 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 &amp;#x2013; 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 &amp;#x2013; 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&amp;#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group)
    * alignment orthogonal to the display-axis
  • * It&amp;#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group)
    * alignment orthogonal to the display-axis
  • * It&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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&amp;#x2019;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 &amp;#x2013; bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 &amp;#x2013; bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 &amp;#x2013; bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 &amp;#x2013; bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 &amp;#x2013; bad performance, no perspective
  • Yellow: 3d transform module
    Animations hw-accelerated on the iPhone
    3d transforms in Android 2.0 &amp;#x2013; 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 &amp;#x201C;t&amp;#x201D;
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable &amp;#x201C;t&amp;#x201D;
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable &amp;#x201C;t&amp;#x201D;
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable &amp;#x201C;t&amp;#x201D;
    * solving for x or y involves complex numbers
  • * In/x-axis: Time
    * Many different curves
    * cubic function depends on variable &amp;#x201C;t&amp;#x201D;
    * solving for x or y involves complex numbers
  • * construction in dependency of &amp;#x201C;t&amp;#x201D;

  • * 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&amp;#x2019;t use webkitTransitionEnd for chaining &amp;#x2013; 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&amp;#x2019;t use webkitTransitionEnd for chaining &amp;#x2013; 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&amp;#x2019;t use webkitTransitionEnd for chaining &amp;#x2013; 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&amp;#x2019;t use webkitTransitionEnd for chaining &amp;#x2013; 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?



×