SlideShare a Scribd company logo
CSS3 & iPhonehttp://findmebyip.com/litmus/Estelle Weylhttp://standardista.comhttp://evotech.net/blog@estellevw
http://findmebyip.com/litmus/
CSS2.1
CSS3Unfinished, but well supported
iPhone = SafariNo need to do any Cross browser testing!!!
CSS3Safari Supports  all of CSS3Safari Supports  HTML5almost^much of^
CSS3 FeaturesCSS3 SelectorsText Shadow (2.0)Box Shadow (prefixed)Rounded Corners (prefixed)@font-faceColors & Alpha Transparency (hsla, rgba)OpacityMultiple background images
CSS3 FeaturesText-overflowGradientsTransformsBackground sizeMulti-column layoutAnimationsTransitionsBorder-imageReflections
HTML5databasesStorageOffline ApplicationsGeoLocation<canvas>, <svg>, <audio>, <video>Web Forms…
HTML5 Template<!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html>
HTML5 Input Typesdate  /time / datetime  / datetime-local  / month / weekemail urltelnumber range search
iPhone Input Behavior
iPhonev. DesktopInput file type does Not work<a href=“tel:14155551212>Call me</a>googlemaps, iTunes and Youtube links open widgetsmailto: opens mail applicationview source            debugger✔
Firebug for iPhone???Settings > Safari > Developer > Debug Console
Firebug for Safari?Switch user agent to iPhoneUse Web Inspector to debug
iPhone Simulator
And for Windows?And for Windows?
Beautiful bookmarks<link rel="apple-touch-icon" href="/iphoneicon.png" />apple-touch-icon.png
Targeting the PhoneViewport:<meta name="viewport" content="width=980”/><meta name="viewport" content="width=device-width”/><meta name="viewport"            content="user-scalable=no, width=device-width"/>Prohibit Zoom / Pinch:<meta name="viewport" content="width=device-width,             minimum-scale=1.0, maximum-scale=1.0" />
Targeting the Phone@media screen and (max-device-width: 480px){        /* iPhone CSS here */ }
Hide the Title bar<script>addEventListener("load", function() { 	setTimeout(hideURLbar, 0); }, false);		function hideURLbar(){			window.scrollTo(0,1);	}}</script>
Don’t reinvent the wheel
Sencha Touch
http://graffletopia.com/stencils/358http://graffletopia.com/stencils/392http://glyphish.com/
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
http://www.westciv.com/tools/gradients/
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
h1 {  white-space: nowrap;  width: 180px;   overflow: hidden;  -o-text-overflow: ellipsis;text-overflow: ellipsis;}
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
foo{   background-image: url(foo.png);   -moz-background-size: 100% 50%; //FF3.6    -o-background-size: 100% 50%;   //O 9.5  -webkit-background-size: 100% 50%; //Saf3.0               background-size: 100% 50%;}
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
CSS3 Selectors:nth-of-type()tr:nth-of-type(even) td{   background-color: #dedede;}
Thanks.Estelle WeylTwitter: @estellevwBlog: http://www.standardista.comhttp://evotech.net/blog
PrizesCopy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069
Ad

More Related Content

What's hot (20)

Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
Russ Weakley
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
Sofish Lin
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
 
Html5 ux london
Html5 ux londonHtml5 ux london
Html5 ux london
Todd Zaki Warfel
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
mwrather
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards
Aarron Walter
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
Kevin DeRudder
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
LESS
LESSLESS
LESS
Joe Seifi
 
CSS in React
CSS in ReactCSS in React
CSS in React
Joe Seifi
 
Fundamental JQuery
Fundamental JQueryFundamental JQuery
Fundamental JQuery
Achmad Solichin
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
Francesco Fullone
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
JayjZens
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
Russ Weakley
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
Sofish Lin
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy
 
Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQueryProgressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
Todd Zaki Warfel
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
mwrather
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Findability Bliss Through Web Standards
Findability Bliss Through Web StandardsFindability Bliss Through Web Standards
Findability Bliss Through Web Standards
Aarron Walter
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
Kevin DeRudder
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
CSS in React
CSS in ReactCSS in React
CSS in React
Joe Seifi
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
JayjZens
 

Viewers also liked (11)

Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Estelle Weyl
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
franksvalli
 
HTML5 Web Forms
HTML5 Web FormsHTML5 Web Forms
HTML5 Web Forms
Estelle Weyl
 
AWS Summit Berlin 2012 Talk on Web Data Commons
AWS Summit Berlin 2012 Talk on Web Data CommonsAWS Summit Berlin 2012 Talk on Web Data Commons
AWS Summit Berlin 2012 Talk on Web Data Commons
Hannes Mühleisen
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3
Lea Verou
 
Line Height (中文版)
Line Height (中文版)Line Height (中文版)
Line Height (中文版)
bigCat Mao
 
Html5移动网站开发实践
Html5移动网站开发实践Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Information Architecture On A Large Scale
Information Architecture On A Large ScaleInformation Architecture On A Large Scale
Information Architecture On A Large Scale
dglazkov
 
2013 11 mobile eating the world
2013 11 mobile eating the world2013 11 mobile eating the world
2013 11 mobile eating the world
Benedict Evans
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Estelle Weyl
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
franksvalli
 
AWS Summit Berlin 2012 Talk on Web Data Commons
AWS Summit Berlin 2012 Talk on Web Data CommonsAWS Summit Berlin 2012 Talk on Web Data Commons
AWS Summit Berlin 2012 Talk on Web Data Commons
Hannes Mühleisen
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3CSS3 secrets: 10 things you might not know about CSS3
CSS3 secrets: 10 things you might not know about CSS3
Lea Verou
 
Line Height (中文版)
Line Height (中文版)Line Height (中文版)
Line Height (中文版)
bigCat Mao
 
Html5移动网站开发实践
Html5移动网站开发实践Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Information Architecture On A Large Scale
Information Architecture On A Large ScaleInformation Architecture On A Large Scale
Information Architecture On A Large Scale
dglazkov
 
2013 11 mobile eating the world
2013 11 mobile eating the world2013 11 mobile eating the world
2013 11 mobile eating the world
Benedict Evans
 
Ad

Similar to iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development (20)

Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
 
HTML5 for Mobile
HTML5 for MobileHTML5 for Mobile
HTML5 for Mobile
Hiroshi Omata
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
ematrix
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Sergey Ilinsky
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
Ricardo Varela
 
Ruby & Python with Silverlight O RLY? YA RLY!
Ruby & Python with Silverlight O RLY? YA RLY!Ruby & Python with Silverlight O RLY? YA RLY!
Ruby & Python with Silverlight O RLY? YA RLY!
Martha Rotter
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
Mirza Asif
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
tonvanbart
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros Developer
Nyros Technologies
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
Doncho Minkov
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for Mobile
Chris Toohey
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
Rômulo Reis de Oliveira
 
Spring Surf 101
Spring Surf 101Spring Surf 101
Spring Surf 101
Alfresco Software
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
reybango
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
StarTech Conference
 
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
Patrick Lauke
 
&lt;img src="xss.com">
&lt;img src="xss.com">&lt;img src="xss.com">
&lt;img src="xss.com">
"&lt;u>aaa&lt;/u>
 
Fav
FavFav
Fav
helloppt
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
ematrix
 
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Building Complex GUI Apps The Right Way. With Ample SDK - SWDC2010
Sergey Ilinsky
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
Ricardo Varela
 
Ruby & Python with Silverlight O RLY? YA RLY!
Ruby & Python with Silverlight O RLY? YA RLY!Ruby & Python with Silverlight O RLY? YA RLY!
Ruby & Python with Silverlight O RLY? YA RLY!
Martha Rotter
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
Mirza Asif
 
Html and i_phone_mobile-2
Html and i_phone_mobile-2Html and i_phone_mobile-2
Html and i_phone_mobile-2
tonvanbart
 
Silver Light By Nyros Developer
Silver Light By Nyros DeveloperSilver Light By Nyros Developer
Silver Light By Nyros Developer
Nyros Technologies
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for Mobile
Chris Toohey
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
reybango
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
StarTech Conference
 
Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011Adaptive Layouts - standards>next London 28.05.2011
Adaptive Layouts - standards>next London 28.05.2011
Patrick Lauke
 
Ad

Recently uploaded (20)

MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptxWebinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
MSP360
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
Connect and Protect: Networks and Network Security
Connect and Protect: Networks and Network SecurityConnect and Protect: Networks and Network Security
Connect and Protect: Networks and Network Security
VICTOR MAESTRE RAMIREZ
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdfAre Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Telecoms Supermarket
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
BookNet Canada
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganQuantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur Morgan
Arthur Morgan
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptxWebinar - Top 5 Backup Mistakes MSPs and Businesses Make   .pptx
Webinar - Top 5 Backup Mistakes MSPs and Businesses Make .pptx
MSP360
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
Connect and Protect: Networks and Network Security
Connect and Protect: Networks and Network SecurityConnect and Protect: Networks and Network Security
Connect and Protect: Networks and Network Security
VICTOR MAESTRE RAMIREZ
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdfAre Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Are Cloud PBX Providers in India Reliable for Small Businesses (1).pdf
Telecoms Supermarket
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser EnvironmentsHCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environments
panagenda
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...Canadian book publishing: Insights from the latest salary survey - Tech Forum...
Canadian book publishing: Insights from the latest salary survey - Tech Forum...
BookNet Canada
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 

iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development

Editor's Notes

  • #4: History of support of CSS, and why it’s ok to move forward
  • #5: History of support of CSS, and why it’s ok to move forward
  • #6: History of support of CSS, and why it’s ok to move forward
  • #7: History of support of CSS, and why it’s ok to move forward
  • #8: standardista
  • #9: standardista
  • #18: To enable this, you have to first enable the menu barClick &gt; show menu bar under the gearsThen go to preferences &gt; advanced &gt; check “show develop menu in menubar”
  • #19: selecting the +, or &apos;add bookmark&apos; from the bottom nav, selecting &quot;Add to Home Screen&quot; from the bookmarks menuOptionally editing the title of the bookmark, andSelecting &quot;Add&quot;.
  • #20: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • #21: Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • #23: Sorry, but no source was attributed
  • #24: Javascript LibrariesEasiest to use is Joe Hewitt’s IUIMore full featured is JQTouchFor full fledged apps, Sencha Touch.
  • #25: Graffetopia = GUI and Wireframe
  • #30: http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradients.html
  • #37: .foo { background-image: url(bg-image.png); -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ -o-background-size: 100% 100%; /* Opera 9.5 */ -webkit-background-size: 100% 100%; /* Safari 3.0 */             background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */Background-size:= [ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,2} | cover | contain }