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
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
LoriGlavin3
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Fwdays
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
blackmambaettijean
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Recently uploaded
(20)
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
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