SlideShare a Scribd company logo
1 of 87
Download to read offline
HTML5 and CSS3: Exploring
   Mobile Possibilities
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Roby on Rails
Mozilla is a global non-profit
dedicated to putting you in control
of your online experience and
shaping the future of the Web for
the public good
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
CSS Media Queries
width                 color
height                color-index
device-width          monochrome
device-height         resolution
orientation           scan
aspect-ratio          grid
device-aspect-ratio
min-width
max-width
orientation
<link rel="stylesheet"
  href="pretty.css"
  media="screen and (min-width: 500px)">
.nav {
    width: 150px;
}

@media screen and (min-width: 500px) {
    .nav {
        width: 300px;
    }
}
@media screen and (min-width: 500px) and (max-width: 1024px) {
    .nav {
        width: 200px;
    }
}
@media screen and (min-width: 100px),
@media handheld {
    .nav {
        width: 350px;
    }
}
@media only screen and (min-width: 100px) {
    .nav {
        width: 350px;
    }
}
@media not screen and (min-width: 100px) {
    .nav {
        width: 100%;
    }
}
@media screen and (orientation: landscape) {
    .nav {
        float: left;
        width: 20%;
    }
    .main {
        float: right;
        width: 80%;
    }
}
@media screen and (orientation: portrait) {
    .nav {
        width: 100%;
    }
    .main {
        width: 100%;
    }
}
<meta name="viewport"
    content="width=device-width, initial-scale=1.0">

<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
http://mediaqueri.es/
CSS Flex Box
<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>
.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;
}
.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;
}
.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;
}
flex- instead of box-
CSS Transitions
/* 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;
}
/* 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);
}
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
.love-me {
    -webkit-transform: translate3d(0, 0, 0);
}
CSS Animations
.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);
    }
}
@-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);
    }
}
CSS box-shadow and text-shadow
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
text-overflow: ellipsis
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 Forms
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">
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
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">
<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">
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>
<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>
<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>
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
http://www.quirksmode.org/html5/inputs.html

http://www.quirksmode.org/html5/inputs_mobile.html

http://wufoo.com/html5/
Link protocols
#b
                                                   ro
                                                        ws
                                                             er
<a href="tel:+441111234567">tel: link</a>                         lo
                                                                       ve

<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>
JavaScript on mobile
Web Storage
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
sessionStorage.setItem("Charming", "Piers Morgan");
console.log(sessionStorage.getItem("Charming"));
localStorage.setItem("Job", "Show host");
var piersMorgan = {
    "Transportation" : "Segway",
    "Damage" : "Three broken ribs"
};

localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan));

console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
Web SQL   IndexedDB
Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        alert(position.coords.latitude + ", " + position.coords.longitude);
    });
}
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Offline Web Applications
// Poll the navigator.onLine property
setInterval(function () {
    console.log(navigator.onLine);
}, 1000);
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
...
CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

NETWORK:
/live-updates
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",
title = "My blog",
state = {
    address : url
};

window.history.pushState(state, title, url);
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Mobile Perf
weinre
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
position: fixed

overflow: scroll

-webkit-overflow-scrolling: touch

Web Workers
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/    Twitter: @robertnyman
robertnyman.com/css3/

More Related Content

Similar to HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich

Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Chris Alfano
 
Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı
Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı
Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı adin sonsuz
 
Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat
Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat
Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat
Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat
Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı
Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı
Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı adin sonsuz
 
Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat
Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat
Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat
Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat
Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Firuzköy antika kol saati 0531 9810190 eski kurmalı saat
Firuzköy antika kol saati 0531 9810190 eski kurmalı saat Firuzköy antika kol saati 0531 9810190 eski kurmalı saat
Firuzköy antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Ambarlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ambarlı antika kol saati 0531 9810190 eski kurmalı saat alanlarAmbarlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ambarlı antika kol saati 0531 9810190 eski kurmalı saat alanlaradin sonsuz
 
Soğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Soğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlarSoğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Soğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlaradin sonsuz
 
Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat
Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat
Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat
Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat
Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Şirinevler antika kol saati 0531 9810190 eski kurmalı saat
Şirinevler antika kol saati 0531 9810190 eski kurmalı saat Şirinevler antika kol saati 0531 9810190 eski kurmalı saat
Şirinevler antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
Ataköy antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ataköy antika kol saati 0531 9810190 eski kurmalı saat alanlarAtaköy antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ataköy antika kol saati 0531 9810190 eski kurmalı saat alanlaradin sonsuz
 
Altınşehir antika kol saati 0531 9810190 eski kurmalı saat
Altınşehir antika kol saati 0531 9810190 eski kurmalı saat Altınşehir antika kol saati 0531 9810190 eski kurmalı saat
Altınşehir antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 
İçerenköy antika kol saati 0531 9810190 eski kurmalı saat
İçerenköy antika kol saati 0531 9810190 eski kurmalı saat İçerenköy antika kol saati 0531 9810190 eski kurmalı saat
İçerenköy antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 

Similar to HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich (20)

Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı
Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı
Merkez, Bağcılar antika kol saati 0531 9810190 eski kurmalı
 
Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat
Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat
Zeytinlik antika kol saati 0531 9810190 eski kurmalı saat
 
Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Evren,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
 
Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat
Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat
Yeniçamlıca antika kol saati 0531 9810190 eski kurmalı saat
 
Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı
Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı
Göztepe,Bağcılar antika kol saati 0531 9810190 eski kurmalı
 
Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat
Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat
Aşıkveysel antika kol saati 0531 9810190 eski kurmalı saat
 
Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat
Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat
Gümüşpala antika kol saati 0531 9810190 eski kurmalı saat
 
Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
Çınar,Bağcılar antika kol saati 0531 9810190 eski kurmalı saat
 
Firuzköy antika kol saati 0531 9810190 eski kurmalı saat
Firuzköy antika kol saati 0531 9810190 eski kurmalı saat Firuzköy antika kol saati 0531 9810190 eski kurmalı saat
Firuzköy antika kol saati 0531 9810190 eski kurmalı saat
 
Ambarlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ambarlı antika kol saati 0531 9810190 eski kurmalı saat alanlarAmbarlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ambarlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
 
Soğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Soğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlarSoğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
Soğanlı antika kol saati 0531 9810190 eski kurmalı saat alanlar
 
Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat
Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat
Şenlikköy antika kol saati 0531 9810190 eski kurmalı saat
 
Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat
Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat
Çobançeşme antika kol saati 0531 9810190 eski kurmalı saat
 
Şirinevler antika kol saati 0531 9810190 eski kurmalı saat
Şirinevler antika kol saati 0531 9810190 eski kurmalı saat Şirinevler antika kol saati 0531 9810190 eski kurmalı saat
Şirinevler antika kol saati 0531 9810190 eski kurmalı saat
 
Ataköy antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ataköy antika kol saati 0531 9810190 eski kurmalı saat alanlarAtaköy antika kol saati 0531 9810190 eski kurmalı saat alanlar
Ataköy antika kol saati 0531 9810190 eski kurmalı saat alanlar
 
Altınşehir antika kol saati 0531 9810190 eski kurmalı saat
Altınşehir antika kol saati 0531 9810190 eski kurmalı saat Altınşehir antika kol saati 0531 9810190 eski kurmalı saat
Altınşehir antika kol saati 0531 9810190 eski kurmalı saat
 
İçerenköy antika kol saati 0531 9810190 eski kurmalı saat
İçerenköy antika kol saati 0531 9810190 eski kurmalı saat İçerenköy antika kol saati 0531 9810190 eski kurmalı saat
İçerenköy antika kol saati 0531 9810190 eski kurmalı saat
 

More from Robert Nyman

Have you tried listening?
Have you tried listening?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 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google DaydreamRobert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the WebRobert Nyman
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaRobert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & productsRobert Nyman
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...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, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert 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...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...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 - IstanbulThe 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 - IstanbulRobert 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 goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goRobert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilitiesRobert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the NordicsRobert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?Robert Nyman
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupRobert Nyman
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiRobert Nyman
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiRobert Nyman
 

More from Robert Nyman (20)

Have you tried listening?
Have you tried listening?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 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability 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 2016The 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 2016The 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 IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle 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 ...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, JapanProgressive 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 - 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 - 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 - IstanbulThe 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 goThe 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 possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid 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, HelsinkiNew 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, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 

Recently uploaded

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 

Recently uploaded (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 

HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich

  • 1. HTML5 and CSS3: Exploring Mobile Possibilities
  • 6. Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
  • 10. width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  • 12. <link rel="stylesheet" href="pretty.css" media="screen and (min-width: 500px)">
  • 13. .nav { width: 150px; } @media screen and (min-width: 500px) { .nav { width: 300px; } }
  • 14. @media screen and (min-width: 500px) and (max-width: 1024px) { .nav { width: 200px; } }
  • 15. @media screen and (min-width: 100px), @media handheld { .nav { width: 350px; } }
  • 16. @media only screen and (min-width: 100px) { .nav { width: 350px; } }
  • 17. @media not screen and (min-width: 100px) { .nav { width: 100%; } }
  • 18. @media screen and (orientation: landscape) { .nav { float: left; width: 20%; } .main { float: right; width: 80%; } }
  • 19. @media screen and (orientation: portrait) { .nav { width: 100%; } .main { width: 100%; } }
  • 20. <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  • 24. <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>
  • 25. .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; }
  • 26. .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; }
  • 27. .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; }
  • 30. /* 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; }
  • 31. /* 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); }
  • 33. .love-me { -webkit-transform: translate3d(0, 0, 0); }
  • 35. .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); } }
  • 36. @-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); } }
  • 37. CSS box-shadow and text-shadow
  • 44. 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">
  • 50. 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">
  • 51. <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">
  • 52. 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>
  • 53. <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>
  • 54. <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>
  • 58. #b ro ws er <a href="tel:+441111234567">tel: link</a> lo ve <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>
  • 64. var piersMorgan = { "Transportation" : "Segway", "Damage" : "Three broken ribs" }; localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan)); console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
  • 65. Web SQL IndexedDB
  • 67. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
  • 71. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
  • 73. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
  • 76. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);