advanced html & css techniques for developing webkit mobile applications

157
Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications Michael T. Smith Senior Developer, Magnani Caruso Dutton September 16, 2009

Upload: michael-smith

Post on 10-May-2015

10.269 views

Category:

Technology


3 download

DESCRIPTION

Michael Smith, senior developer at Magnani Caruso Dutton, will give a tutorial on the latest and greatest CSS techniques for building native-like applications on the iPhone and Palm Pre (and other WebKit based browsers) with minimal images and strongly reusable code.Discussion will include current and future browser support, implementation issues and best practices. We will quickly touch on new JavaScript and HTML 5 features (new events and client side storage) to give a well-rounded example. Example code and demonstrations will be used throughout the talk.

TRANSCRIPT

Page 1: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Advanced HTML & CSS Techniques for DevelopingWebkit Mobile Applications

Michael T. SmithSenior Developer, Magnani Caruso Dutton

September 16, 2009

Page 2: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Who I Am?

Page 3: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Who I Am?

- Senior Developer, Magnani Caruso Dutton

Page 4: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Who I Am?

- Senior Developer, Magnani Caruso Dutton

- Discover Financial Services, AT&T, London 2012

Page 5: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Who I Am?

- Senior Developer, Magnani Caruso Dutton

- Discover Financial Services, AT&T, London 2012

- Full Time Web Developer

Page 6: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Who I Am?

- Senior Developer, Magnani Caruso Dutton

- Discover Financial Services, AT&T, London 2012

- Full Time Web Developer

- Part Time Cocoa Developer

Page 7: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

Page 8: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

Page 9: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

Page 10: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

- Palm Pre?

Page 11: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

- Palm Pre?

- 1,500,000 by end of year (?)

Page 12: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

- Palm Pre?

- 1,500,000 by end of year (?)

- Android?

Page 13: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

- Palm Pre?

- 1,500,000 by end of year (?)

- Android?

- 8,000,000 by end of year (?)

Page 14: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

- Palm Pre?

- 1,500,000 by end of year (?)

- Android?

- 8,000,000 by end of year (?)

Page 15: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

iPhone, Pre, Android?

- iPhone, iPod touch?

- More than 45,000,000 sold

- Palm Pre?

- 1,500,000 by end of year (?)

- Android?

- 8,000,000 by end of year (?)

...but...

Page 16: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

Page 17: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

Page 18: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

- Build for one -- test for all

Page 19: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

- Build for one -- test for all

- Some differences

Page 20: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

- Build for one -- test for all

- Some differences

- Progressive enhancement

Page 21: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

- Build for one -- test for all

- Some differences

- Progressive enhancement

- Somethings will work

Page 22: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

- Build for one -- test for all

- Some differences

- Progressive enhancement

- Somethings will work

- Others won’t

Page 23: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit

- WebKit browser engine across all three platforms

- Build for one -- test for all

- Some differences

- Progressive enhancement

- Somethings will work

- Others won’t

- The user doesn’t miss out

Page 24: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Webkit Background

Page 25: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Webkit Background

- Actively developed, open source browser engine

Page 26: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Webkit Background

- Actively developed, open source browser engine

- Dave Hyatt (http://surfingsafari.com),Safari & Webkit Architect

Page 27: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Webkit Background

- Actively developed, open source browser engine

- Dave Hyatt (http://surfingsafari.com),Safari & Webkit Architect

- Began implementing CSS extensions that are working drafts for the W3C

Page 28: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Let’s begin...

Page 29: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

Page 30: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Two forms:

Page 31: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Two forms:

- Web Application

Page 32: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Two forms:

- Web Application

- the original, non-native answer to the SDK

Page 33: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Two forms:

- Web Application

- the original, non-native answer to the SDK

- Web-based App

Page 34: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Two forms:

- Web Application

- the original, non-native answer to the SDK

- Web-based App

- going to flickr.com and getting a customized view

Page 35: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

Web-based App Web App

Page 36: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

Page 37: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Form is determined by user and developer

Page 38: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Form is determined by user and developer

- User must choose to “Save to Home Screen”

Page 39: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

“Web Application” Basics

- Form is determined by user and developer

- User must choose to “Save to Home Screen”

- Developer uses HTML meta tags to customize the application for the iPhone

Page 40: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

Page 41: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

Page 42: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

Page 43: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

Page 44: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

<link rel="apple-touch-startup-image" href="/startup.png">

Page 45: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

<link rel="apple-touch-startup-image" href="/startup.png">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Page 46: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML<meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]">

Page 47: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML<meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]">

default

Page 48: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML<meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]">

default black

Page 49: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML<meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]">

default black black-translucent

Page 50: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

<link rel="apple-touch-startup-image" href="/startup.png">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="viewport" content ="initial-scale = 2.3, user-scalable = no">

Page 51: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<meta name="viewport" content ="width = [200 to 10,000 || device-width]">

<meta name="viewport" content ="height = [223 to 10,000 || device-height]">

<meta name="viewport" content ="minimum-scale = [0.01 to 10.0]">

<meta name="viewport" content ="maximum-scale = [0.01 to 10.0]">

<meta name="viewport" content ="initial-scale = [minimum-scale to maximum-scale]">

<meta name="viewport" content ="user-scalable = [yes||no]">

All options can be combined via commas

Page 52: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

<link rel="apple-touch-startup-image" href="/startup.png">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="viewport" content ="initial-scale = 2.3, user-scalable = no">

<meta name="apple-mobile-web-app-capable" content="yes">

Page 53: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

HTML

<link rel="apple-touch-icon" href="/custom_icon.png">

<link rel="apple-touch-startup-image" href="/startup.png">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="viewport" content ="initial-scale = 2.3, user-scalable = no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="format-detection" content="telephone=no">

Page 54: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

...which brings usto the CSS...

Page 55: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit CSS Support

Page 56: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit CSS Support

- WebKit’s CSS support is spectacular.

Page 57: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit CSS Support

- WebKit’s CSS support is spectacular.

- Large subset of CSS 2.1 Specification

Page 58: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit CSS Support

- WebKit’s CSS support is spectacular.

- Large subset of CSS 2.1 Specification

- Portions of CSS 3 Specification

Page 59: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit CSS Support

- WebKit’s CSS support is spectacular.

- Large subset of CSS 2.1 Specification

- Portions of CSS 3 Specification

- (most written using -webkit-rule notation)

Page 60: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

WebKit CSS Support

- WebKit’s CSS support is spectacular.

- Large subset of CSS 2.1 Specification

- Portions of CSS 3 Specification

- (most written using -webkit-rule notation)

- 200+ rules

Page 61: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

borderborder-bottom

border-bottom-colorborder-bottom-styleborder-bottom-width

border-colorborder-left

border-left-colorborder-left-styleborder-left-width

border-rightborder-right-colorborder-right-styleborder-right-width

border-styleborder-top

border-top-colorborder-top-styleborder-top-width

border-widthmargin-bottom

margin-leftmargin-rightmargin-top

padding-bottompadding-left

padding-rightpadding-top

-webkit-border-bottom-left-radius

-webkit-border-bottom-right-radius

-webkit-border-image-webkit-border-radius

-webkit-border-top-left-radius-webkit-border-top-right-radius

-webkit-box-sizing-webkit-box-shadow

-webkit-margin-bottom-collapse-webkit-margin-collapse

-webkit-margin-start-webkit-margin-top-collapse

-webkit-padding-startbottomclear

directiondisplay

floatheight

leftline-heightmax-heightmax-widthmin-heightmin-width

opacityposition

righttop

unicode-bidivertical-align

widthz-indexzoomclip

overflowoverflow-xoverflow-y

resizevisibility

-webkit-animation-webkit-animation-delay

-webkit-animation-direction-webkit-animation-duration-webkit-animation-iteration-

count-webkit-animation-name

-webkit-animation-play-state-webkit-animation-timing-

function-webkit-backface-visibility

-webkit-box-reflect-webkit-mask

-webkit-mask-attachment-webkit-mask-box-image

-webkit-mask-clip-webkit-mask-composite

-webkit-mask-image-webkit-mask-origin

-webkit-mask-position-webkit-mask-position-x-webkit-mask-position-y

-webkit-mask-repeat-webkit-mask-size-webkit-perspective

-webkit-perspective-origin-webkit-transform

-webkit-transform-origin-webkit-transform-origin-x-webkit-transform-origin-y-webkit-transform-origin-z

-webkit-transform-style-webkit-transition

-webkit-transition-delay-webkit-transition-duration-webkit-transition-property-webkit-transition-timing-

functioncontent

counter-increment

counter-resetlist-style

list-style-imagelist-style-position

list-style-typeorphans

page-break-afterpage-break-beforepage-break-inside

widowsbackground

background-attachmentbackground-colorbackground-image

background-positionbackground-position-xbackground-position-y

background-repeatcolor

-webkit-background-clip-webkit-background-composite

-webkit-background-origin-webkit-background-size

fontfont-familyfont-sizefont-style

font-variantfont-weight

srcunicode-rangeletter-spacing

text-aligntext-decoration

text-indenttext-overflowtext-shadow

text-transformwhite-spaceword-break

word-spacingword-wrap

-webkit-marquee-webkit-marquee-direction

-webkit-marquee-increment-webkit-marquee-repetition

-webkit-marquee-speed-webkit-marquee-style-webkit-text-fill-color-webkit-text-security

-webkit-text-size-adjust-webkit-text-stroke

-webkit-text-stroke-color-webkit-text-stroke-width

-webkit-line-break

-webkit-appearance-webkit-nbsp-mode-webkit-rtl-ordering-webkit-user-drag

-webkit-user-modify-webkit-user-select

border-collapseborder-spacing

caption-sideempty-cellstable-layout

-webkit-border-horizontal-spacing

-webkit-border-vertical-spacing-webkit-column-break-after

-webkit-column-break-before-webkit-column-break-inside

-webkit-column-count-webkit-column-gap-webkit-column-rule

-webkit-column-rule-color-webkit-column-rule-style-webkit-column-rule-width

-webkit-column-width-webkit-columns

cursoroutline

outline-coloroutline-offsetoutline-styleoutline-widthpointer-events

-webkit-box-align-webkit-box-direction

-webkit-box-flex-webkit-box-flex-group

-webkit-box-lines-webkit-box-ordinal-group

-webkit-box-orient-webkit-box-pack

-webkit-touch-callout-webkit-dashboard-region-webkit-tap-highlight-color

Page 62: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 63: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 64: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

Page 65: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

- Rounds the corners of a box

Page 66: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

Page 67: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

-webkit-border-radius: radius;-webkit-border-radius: horizontal_radius vertical_radius;

Page 68: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

-webkit-border-radius: radius;-webkit-border-radius: horizontal_radius vertical_radius;

-webkit-border-bottom-left-radius: radius;-webkit-border-bottom-right-radius: radius;-webkit-border-top-left-radius: radius;-webkit-border-top-right-radius: radius;

Page 69: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

Page 70: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

Page 71: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

header #information { display: block; position: absolute; top: 13px; left: 15px; height: 18px; width: 18px; z-index: 100; font-family: "Georgia"; font-size: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-align: center; color: #686868; background-color: #FFFFFF; -webkit-border-radius: 9px;}

Page 72: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius

header #information { display: block; position: absolute; top: 13px; left: 15px; height: 18px; width: 18px; z-index: 100; font-family: "Georgia"; font-size: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-align: center; color: #686868; background-color: #FFFFFF; -webkit-border-radius: 9px;}

Page 73: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 74: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-box-shadow

Page 75: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-box-shadow(text-shadow)

Page 76: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-box-shadow(text-shadow)

- Simple shadow effects

- Very similar to layer effects in Photoshop

- Properties are arranged differently

Page 77: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-box-shadow(text-shadow)

text-shadow: color x_offset y_offset blur_radius;-webkit-box-shadow: x_offset y_offset blur_radius color;

text-shadow: #000000 0 -1px 0;-webkit-box-shadow: -1px 0 0 #000000;

Page 78: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

text-shadow

header h1 { display: block; position: relative; top: 9px; margin: 0; padding: 0; font-size: 18px; color: #FFFFFF; text-shadow: #000000 0 -1px 0; text-align: center;}

Page 79: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

text-shadow

Page 80: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 81: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient

Page 82: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient

- Not actually a rule — A “CSS Property Function”

- Used anywhere a url() function can be used

- ‘Experimental CSS 3’

Page 83: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient

Page 84: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient-webkit-gradient(type, start_point, end_point, stops);

Page 85: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient-webkit-gradient(type, start_point, end_point, stops);

-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, stops);

Page 86: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient-webkit-gradient(linear, start_point, end_point, color-stop(position, color));

-webkit-gradient(radius, inner_center, inner_radius, outer_center, outer_radius, color-stop(position, color));

Page 87: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #B8B8B7), color-stop(0.49, #9C9C9C), color-stop(0.50, #797979), color-stop(1.00, #656565));

Page 88: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-gradient

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #B8B8B7), color-stop(0.49, #9C9C9C), color-stop(0.50, #797979), color-stop(1.00, #656565));

Page 89: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 90: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

Page 91: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Alpha-level based masks

Page 92: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Alpha-level based masks

- Knock out portions of a box with a pattern (image, gradient, etc.)

Page 93: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Alpha-level based masks

- Knock out portions of a box with a pattern (image, gradient, etc.)

- Works in a “layered” context:

Page 94: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Alpha-level based masks

- Knock out portions of a box with a pattern (image, gradient, etc.)

- Works in a “layered” context:

- mask

Page 95: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Alpha-level based masks

- Knock out portions of a box with a pattern (image, gradient, etc.)

- Works in a “layered” context:

- mask

- border

Page 96: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Alpha-level based masks

- Knock out portions of a box with a pattern (image, gradient, etc.)

- Works in a “layered” context:

- mask

- border

- background

Page 97: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

Page 98: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Layers alpha channel masks on to objects

Page 99: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Layers alpha channel masks on to objects

- Can clip complex shapes based on a grayscale image (even -webkit-gradient!)

Page 100: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

- Layers alpha channel masks on to objects

- Can clip complex shapes based on a grayscale image (even -webkit-gradient!)

- A pain in the butt to use.

Page 101: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

-webkit-mask: attachment, clip, origin, image, repeat, composite, box-image;

-attachment: Allows the mask to scroll with the page

-clip: Extends mask into border

-origin: Mask’s anchor position

-image: The mask image

-repeat: Sets the mask’s ability to repeat

-composite: Extends mask into padding

-box-image: Sets a mask for a border box

Page 102: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-mask

t

border: 1px solid #C0C8CC;border-left: 2px solid #C0C8CC;

-webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px;

-webkit-mask: no-repeat url(images/mask-btn-left.png);

background-color: #B6BDC1;background: -webkit-gradient(linear, left bottom, left top, color-stop(0.48, #b5bcc0), color-stop(0.49, #c8d0d4), color-stop(0.50, #c0c8cc), color-stop(0.61, #d4dbdd), color-stop(1.00, #f4fcfe) );

Page 103: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 104: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

Page 105: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

- Basic CSS transition

Page 106: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

- Basic CSS transition

- Specified by property

Page 107: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

- Basic CSS transition

- Specified by property

- Similar (but simplified) timing functions to a tweening library

Page 108: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

-webkit-transition: property duration timing_function delay;

Page 109: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

-webkit-transition: property duration timing_function delay;

-webkit-transition-property: property;-webkit-transition-duration: duration;-webkit-transition-timing- function: timing_function;-webkit-transition-delay: delay;

Page 110: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

Page 111: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

#toDoInfo { position: absolute; left: 10px; top: -320px; z-index: 75; display: block; width: 300px; height: 320px; background: #B8B8B7; -webkit-border-radius: 10px; -webkit-transition: top .25s linear;}

#toDoInfo.visible { top: 36px;}

Page 112: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

Page 113: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

linear

Page 114: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

linear ease

Page 115: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

ease-in-out

linear ease

Page 116: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

ease-in-out ease-out

linear ease

Page 117: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

ease-in-out ease-out ease-in

linear ease

Page 118: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

Page 119: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

- cubic-bezier() CSS Property function can create custom “tweens”

Page 120: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

- cubic-bezier() CSS Property function can create custom “tweens”

Page 121: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transition

- cubic-bezier() CSS Property function can create custom “tweens”

-webkit-transition-timing-function: cubic-bezier(p0x, p0y, p1x, p1y);

Page 122: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 123: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

Page 124: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

- Allows 3D and Flat transformations of objects

Page 125: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

- Allows 3D and Flat transformations of objects

- Simple interface

Page 126: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

- Allows 3D and Flat transformations of objects

- Simple interface

- Customizable (matrix) transformations

Page 127: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

-webkit-transform: function(param);

Page 128: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

-webkit-transform: function(param);

matrixmatrix3d

perspective

rotate rotate3d rotateX rotateY rotateZ

scale scale3d scaleX scaleY scaleZ skewX skewY

translate translate3d translateX translateY translateZ

Page 129: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-transform

-webkit-transform: function(param);

matrixmatrix3d

perspective

rotate rotate3d rotateX rotateY rotateZ

scale scale3d scaleX scaleY scaleZ skewX skewY

translate translate3d translateX translateY translateZ

Example

Page 130: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-border-radius-webkit-box-shadow

-webkit-gradient-webkit-mask

-webkit-transition-webkit-transform-webkit-animation

Page 131: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

Page 132: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

- Explicit animation handled directly by CSS

Page 133: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

- Explicit animation handled directly by CSS

- Repeated effects, keyframes

Page 134: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

- Explicit animation handled directly by CSS

- Repeated effects, keyframes

- Uses an apple extension block (@-webkit-keyframes) to define the animation

Page 135: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

- Explicit animation handled directly by CSS

- Repeated effects, keyframes

- Uses an apple extension block (@-webkit-keyframes) to define the animation

- “Normal” CSS to turn animation on

Page 136: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

- Explicit animation handled directly by CSS

- Repeated effects, keyframes

- Uses an apple extension block (@-webkit-keyframes) to define the animation

- “Normal” CSS to turn animation on

Example

Page 137: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

Simple animation setup:

@-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; }}

Page 138: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

-webkit-animation

Simple animation setup:

@-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; }}

Simple animation Trigger:

div#bouncer { position: absolute; -webkit-animation-name: bounce; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate;}

Page 139: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Complex Animation Setup:

@-webkit-keyframes pulseAndMove { 0% { background: #0F0; left: 0px; top: 0px; } 25% { background: #F00; left: 20px; top: 20px; } 50% { background: #00F; } 75% { background: #0FF; left: 50px; top: 50px; } 100% { background: #F0F; }}

Complex Animation Trigger:

div#pulser { position: absolute; -webkit-animation-name: pulseAndMove; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate;}

Example

Page 140: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

...and everything else

Page 141: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

...and everything else

- Just a taste

Page 142: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

...and everything else

- Just a taste

- Apple is adding a lot more fine-grained control to CSS

Page 143: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

...and everything else

- Just a taste

- Apple is adding a lot more fine-grained control to CSS

-webkit-background

-webkit-marquee

-webkit-text

-webkit-column

-webkit-box

-webkit-tap

-webkit-touch

Page 144: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Tools

Page 145: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Tools

- CSS3 Gradient Builderhttp://gradients.glrzad.com (Damian built it!)

Page 146: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Tools

- CSS3 Gradient Builderhttp://gradients.glrzad.com (Damian built it!)

- Emulators:

- iPhone — Native, easy to use

- Android — Eclipse based, not easy to use

- Palm Pre — VirtualBox image, easy to use, takes some time to install

Page 147: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Resources

Page 148: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Resources

- Safari CSS Reference Guidehttp://developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

Page 149: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Resources

- Safari CSS Reference Guidehttp://developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

- Safari Web Content Guidehttp://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html

Page 150: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Resources

- Safari CSS Reference Guidehttp://developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

- Safari Web Content Guidehttp://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html

- Surfin’ Safarihttp://webkit.org/blog/

Page 151: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

JavaScript?

Page 152: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

JavaScript?

- A lot of new touch events

Page 153: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

JavaScript?

- A lot of new touch events

- HTML / JS Client Side Storage

Page 154: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

JavaScript?

- A lot of new touch events

- HTML / JS Client Side Storage

- GeoLocation API

Page 155: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

JavaScript?

- A lot of new touch events

- HTML / JS Client Side Storage

- GeoLocation API

NYC JS Meetup7pm, October 6, 2009

Rebar, Dumbo

Page 156: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Thanks...

- Damian Galarza, Associate DeveloperMagnani Caruso Dutton

- Victor Vasquez, Associate DesignerMagnani Caruso Dutton

Page 157: Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

Me: http://michaeltsmith.netCode: http://github.com/michaeltsmith

Slides: http://www.slideshare.net/michaeltsmith

[email protected]

Thank you, very much.