Submit Search
Upload
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
•
15 likes
•
15,064 views
Robert Nyman
Follow
Going through HTML5 and CSS3 possibilities with a mobile perspective
Read less
Read more
Technology
Entertainment & Humor
Report
Share
Report
Share
1 of 83
Download now
Download to read offline
Recommended
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman
Blog skins396734
Blog skins396734
pantangmrny
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
Robert Nyman
HTML5 workshop, forms
HTML5 workshop, forms
Robert Nyman
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Matteo Magni
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
CSS3 vs jQuery
CSS3 vs jQuery
Web Essentials Co., Ltd.
Insertcustomer
Insertcustomer
amirthalingam m
Recommended
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman
Blog skins396734
Blog skins396734
pantangmrny
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
Robert Nyman
HTML5 workshop, forms
HTML5 workshop, forms
Robert Nyman
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Matteo Magni
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
CSS3 vs jQuery
CSS3 vs jQuery
Web Essentials Co., Ltd.
Insertcustomer
Insertcustomer
amirthalingam m
Code Tops Comments
Code Tops Comments
Mr Giap
Coding part
Coding part
Sanjay Gupta
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
Java script
Java script
Sanjay Gunjal
Using jQuery to Extend CSS
Using jQuery to Extend CSS
Chris Coyier
Theme 23
Theme 23
bellaandzendaya
Angular js animate shashikant bhongale -20-7-16
Angular js animate shashikant bhongale -20-7-16
Shashikant Bhongale
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
psstoev
Document
Document
Naveed Anjum
Anko試食会
Anko試食会
susan335
Html5 and web technology update
Html5 and web technology update
Doug Domeny
course js day 3
course js day 3
Georgyi Grigoryev
Formato encuesta
Formato encuesta
Angie Padilla
JavaFXで開く新世代GUI
JavaFXで開く新世代GUI
Yuichi Sakuraba
Example wsdl file
Example wsdl file
venkatme83
Start your app the better way with Styled System
Start your app the better way with Styled System
Hsin-Hao Tang
Séminaire Web Services
Séminaire Web Services
e-Xpert Solutions SA
Horario
Horario
1wwefan
[Quality Meetup] M. Górski, M. Boś - Testy UI w Espresso z farmą w tle
[Quality Meetup] M. Górski, M. Boś - Testy UI w Espresso z farmą w tle
Future Processing
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman
Database Administration
Database Administration
Bilal Arshad
More Related Content
What's hot
Code Tops Comments
Code Tops Comments
Mr Giap
Coding part
Coding part
Sanjay Gupta
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
Java script
Java script
Sanjay Gunjal
Using jQuery to Extend CSS
Using jQuery to Extend CSS
Chris Coyier
Theme 23
Theme 23
bellaandzendaya
Angular js animate shashikant bhongale -20-7-16
Angular js animate shashikant bhongale -20-7-16
Shashikant Bhongale
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
psstoev
Document
Document
Naveed Anjum
Anko試食会
Anko試食会
susan335
Html5 and web technology update
Html5 and web technology update
Doug Domeny
course js day 3
course js day 3
Georgyi Grigoryev
Formato encuesta
Formato encuesta
Angie Padilla
JavaFXで開く新世代GUI
JavaFXで開く新世代GUI
Yuichi Sakuraba
Example wsdl file
Example wsdl file
venkatme83
Start your app the better way with Styled System
Start your app the better way with Styled System
Hsin-Hao Tang
Séminaire Web Services
Séminaire Web Services
e-Xpert Solutions SA
Horario
Horario
1wwefan
[Quality Meetup] M. Górski, M. Boś - Testy UI w Espresso z farmą w tle
[Quality Meetup] M. Górski, M. Boś - Testy UI w Espresso z farmą w tle
Future Processing
What's hot
(20)
Code Tops Comments
Code Tops Comments
Coding part
Coding part
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Java script
Java script
Using jQuery to Extend CSS
Using jQuery to Extend CSS
Theme 23
Theme 23
Angular js animate shashikant bhongale -20-7-16
Angular js animate shashikant bhongale -20-7-16
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
Document
Document
Anko試食会
Anko試食会
Html5 and web technology update
Html5 and web technology update
course js day 3
course js day 3
Formato encuesta
Formato encuesta
JavaFXで開く新世代GUI
JavaFXで開く新世代GUI
Example wsdl file
Example wsdl file
Start your app the better way with Styled System
Start your app the better way with Styled System
Séminaire Web Services
Séminaire Web Services
Horario
Horario
[Quality Meetup] M. Górski, M. Boś - Testy UI w Espresso z farmą w tle
[Quality Meetup] M. Górski, M. Boś - Testy UI w Espresso z farmą w tle
Viewers also liked
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman
Database Administration
Database Administration
Bilal Arshad
Database Administration
Database Administration
Bilal Arshad
Introduction to oracle database (basic concepts)
Introduction to oracle database (basic concepts)
Bilal Arshad
Introduction to Html5
Introduction to Html5
www.netgains.org
CBSE XII Database Concepts And MySQL Presentation
CBSE XII Database Concepts And MySQL Presentation
Guru Ji
Dbms
Dbms
sevtap87
html5.ppt
html5.ppt
Niharika Gupta
Php mysql ppt
Php mysql ppt
Karmatechnologies Pvt. Ltd.
Types of databases
Types of databases
PAQUIAAIZEL
Html Ppt
Html Ppt
vijayanit
MySQL partitions tutorial
MySQL partitions tutorial
Giuseppe Maxia
Introduction to HTML
Introduction to HTML
MayaLisa
Database administrator
Database administrator
Tech_MX
Basic DBMS ppt
Basic DBMS ppt
dangwalrajendra888
Dbms slides
Dbms slides
rahulrathore725
Ch8
Ch8
Bilal Arshad
Fundamentals of Database ppt ch01
Fundamentals of Database ppt ch01
Jotham Gadot
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
SlideShare
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
SlideShare
Viewers also liked
(20)
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Database Administration
Database Administration
Database Administration
Database Administration
Introduction to oracle database (basic concepts)
Introduction to oracle database (basic concepts)
Introduction to Html5
Introduction to Html5
CBSE XII Database Concepts And MySQL Presentation
CBSE XII Database Concepts And MySQL Presentation
Dbms
Dbms
html5.ppt
html5.ppt
Php mysql ppt
Php mysql ppt
Types of databases
Types of databases
Html Ppt
Html Ppt
MySQL partitions tutorial
MySQL partitions tutorial
Introduction to HTML
Introduction to HTML
Database administrator
Database administrator
Basic DBMS ppt
Basic DBMS ppt
Dbms slides
Dbms slides
Ch8
Ch8
Fundamentals of Database ppt ch01
Fundamentals of Database ppt ch01
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
Similar to HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
CSS3 Takes on the World
CSS3 Takes on the World
Jonathan Snook
Html5 intro
Html5 intro
Wilfred Nas
HTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Ivano Malavolta
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
Pablo Garaizar
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Eduardo Shiota Yasuda
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
This is a test
This is a test
cmailhotos4
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
CSS3 and jQuery
CSS3 and jQuery
psophy
Core CSS3
Core CSS3
Rachel Andrew
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Codemotion
Responsive Websites
Responsive Websites
Joe Seifi
HTML5, the new buzzword
HTML5, the new buzzword
Frédéric Harper
SVG overview
SVG overview
Satoshi Watanabe
Rapid Prototyping
Rapid Prototyping
Even Wu
Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
Similar to HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
(20)
CSS3 Takes on the World
CSS3 Takes on the World
Html5 intro
Html5 intro
HTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
This is a test
This is a test
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
CSS3 and jQuery
CSS3 and jQuery
Core CSS3
Core CSS3
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Responsive Websites
Responsive Websites
HTML5, the new buzzword
HTML5, the new buzzword
SVG overview
SVG overview
Rapid Prototyping
Rapid Prototyping
Introduccion a HTML5
Introduccion a HTML5
More from Robert Nyman
Have you tried listening?
Have you tried listening?
Robert Nyman
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Robert Nyman
Introduction to Google Daydream
Introduction to Google Daydream
Robert Nyman
Predictability for the Web
Predictability for the Web
Robert Nyman
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
Robert Nyman
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Robert Nyman
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Robert Nyman
Google tech & products
Google tech & products
Robert Nyman
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Robert Nyman
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Robert Nyman
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Robert Nyman
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Robert Nyman
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Robert Nyman
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Robert Nyman
Google, the future and possibilities
Google, the future and possibilities
Robert Nyman
Developer Relations in the Nordics
Developer Relations in the Nordics
Robert Nyman
What is Developer Relations?
What is Developer Relations?
Robert Nyman
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Robert Nyman
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Robert Nyman
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Robert Nyman
More from Robert Nyman
(20)
Have you tried listening?
Have you tried listening?
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Introduction to Google Daydream
Introduction to Google Daydream
Predictability for the Web
Predictability for the Web
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Google tech & products
Google tech & products
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Google, the future and possibilities
Google, the future and possibilities
Developer Relations in the Nordics
Developer Relations in the Nordics
What is Developer Relations?
What is Developer Relations?
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Recently uploaded
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Recently uploaded
(20)
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
1.
HTML5 and CSS3:
Exploring Mobile Possibilities
2.
3.
4.
5.
6.
7.
CSS Media Queries
8.
width
color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
9.
min-width max-width orientation
10.
<link rel="stylesheet"
href="pretty.css" media="screen and (min-width: 500px)">
11.
.nav {
width: 150px; } @media screen and (min-width: 500px) { .nav { width: 300px; } }
12.
@media screen and
(min-width: 500px) and (max-width: 1024px) { .nav { width: 200px; } }
13.
@media screen and
(min-width: 100px), @media handheld { .nav { width: 350px; } }
14.
@media only screen
and (min-width: 100px) { .nav { width: 350px; } }
15.
@media not screen
and (min-width: 100px) { .nav { width: 100%; } }
16.
@media screen and
(orientation: landscape) { .nav { float: left; width: 20%; } .main { float: right; width: 80%; } }
17.
@media screen and
(orientation: portrait) { .nav { width: 100%; } .main { width: 100%; } }
18.
<meta name="viewport"
content="width=device-width, maximum-scale=1.0">
19.
CSS3 Media Queries
and creating adaptive layouts
20.
http://mediaqueri.es/
21.
CSS Flex Box
22.
<div class="flex-container">
<section class="col-1">I am column 1</section> <section class="col-2">I am column 2</section> <section class="col-3">I am column 3</section> </div>
23.
.flex-container {
display: -moz-box; display: -ms-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -ms-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; }
24.
.col-1 {
-moz-box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .col-2 { -moz-box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .col-3 { -moz-box-flex: 2; -ms-box-flex: 2; -webkit-box-flex: 2; box-flex: 2; }
25.
.col-1 {
-moz-box-ordinal-group: 2; -ms-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; box-ordinal-group: 2; } .col-2 { -moz-box-ordinal-group: 3; -ms-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; box-ordinal-group: 3; } .col-3 { -moz-box-ordinal-group: 1; -ms-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; box-ordinal-group: 1; }
26.
flex- instead of
box-
27.
CSS Transitions
28.
/* Shorthand version
*/ #hello { display: inline-block; height: 20px; opacity: 0.3; -moz-transition: height 1s ease-out, opacity 1s ease; -ms-transition: height 1s ease-out, opacity 1s ease; -o-transition: height 1s ease-out, opacity 1s ease; -webkit-transition: height 1s ease-out, opacity 1s ease; transition: height 1s ease-out, opacity 1s ease; } #hello:hover { height: 40px; opacity: 1; }
29.
/* Shorthand version
*/ .menu-item { position: relative; display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; text-decoration: none; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; } .menu-item:hover { opacity: 1; -moz-transform: scale(2) rotate(30deg) translate(50px); -ms-transform: scale(2) rotate(30deg) translate(50px); -o-transform: scale(2) rotate(30deg) translate(50px); -webkit-transform: scale(1.2) rotate(30deg) translate(50px); transform: scale(2) rotate(30deg) translate(50px); }
30.
31.
.love-me {
-webkit-transform: translate3d(0, 0, 0); }
32.
CSS Animations
33.
.animation-container {
height: 60px; padding: 10px; -moz-animation-name: movearound; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-timing-function: ease; -webkit-animation-name: movearound; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease; } @-moz-keyframes movearound { from { width: 200px; background: #f00; opacity: 0.5; -moz-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -moz-transform: scale(1) rotate(0deg); } }
34.
@-webkit-keyframes movearound {
from { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -webkit-transform: scale(1) rotate(0deg); } }
35.
CSS box-shadow and
text-shadow
36.
37.
38.
text-overflow: ellipsis
39.
40.
41.
HTML5 Forms
42.
New form types <input
type="color"> <input type="range"> <input type="date"> <input type="search" results="5" <input type="datetime"> autosave="saved-searches"> <input type="datetime-local"> <input type="tel"> <input type="email"> <input type="time"> <input type="month"> <input type="url"> <input type="number"> <input type="week">
43.
44.
45.
46.
47.
48.
New form attributes <input
type="text" autocomplete="off"> <input type="text" autofocus> <input type="submit" formaction="http://example.org/save" value="Save"> <input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"> <input type="submit" formmethod="POST" value="Send as POST"> <input type="submit" formnovalidate value="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window">
49.
<input type="text" list="data-list"> <input
type="range" max="95"> <input type="range" min="2"> <input type="file" multiple> <input type="text" readonly> <input type="text" required> <input type="text" pattern="[A-Z]*"> <input type="text" placeholder="E.g. Robocop"> <input type="text" spellcheck="true"> <input type="number" step="5">
50.
New form elements <input
type="text" list="data-list"> <datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack Shephard"> <option value="James 'Sawyer' Ford"> <option value="John Locke"> <option value="Sayid Jarrah"> </datalist>
51.
<keygen></keygen> <meter min="0" max="10"
value="7"></meter> <input type="range" id="range"> <output for="range" id="output"></output> <progress max="100" value="70">70%</progress>
52.
<input type="range" id="range"> <output
for="range" id="output"></output> <script> (function () { var theForm = document.getElementById("the-form"); if ("oninput" in theForm) { theForm.addEventListener("input", function () { output.value = range.value; }, false); } })(); </script>
53.
54.
http://www.quirksmode.org/html5/inputs.html http://www.quirksmode.org/html5/inputs_mobile.html http://wufoo.com/html5/
55.
Link protocols
56.
<a href="tel:+441111234567">tel: link</a> <a
href="sms:+441111234567">sms: link</a> <a href="sms:+441111234567?body=Text%20me"> sms: with body </a> <a href="sms:+441111234567,+441111678901"> sms: with multiple numbers </a> <a href="sms:+441111234567,+441111678901?body=Text%20me"> sms: with multiple numbers + body </a>
57.
#browserlove
58.
Web Storage
59.
60.
sessionStorage.setItem("Charming", "Piers Morgan"); console.log(sessionStorage.getItem("Charming"));
61.
localStorage.setItem("Job", "Show host");
62.
var piersMorgan =
{ "Transportation" : "Segway", "Damage" : "Three broken ribs" }; localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan)); console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
63.
Web SQL
IndexedDB
64.
Geolocation
65.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
66.
67.
68.
Offline Web Applications
69.
// Poll the
navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
70.
<!DOCTYPE html> <html manifest="offline.appcache"> <head> ...
71.
CACHE MANIFEST # VERSION
10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
72.
History API
73.
var url =
"http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
74.
window.history.replaceState(state, title, url);
75.
76.
Mobile Perf
77.
weinre
78.
79.
80.
position: fixed overflow: scroll -webkit-overflow-scrolling:
touch Web Workers
81.
82.
83.
Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/
Twitter: @robertnyman robertnyman.com/css3/
Download now