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

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
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
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
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
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
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
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
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Recently uploaded (20)

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
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
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...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
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
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
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
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

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);