Media Fragments URI

You can play media from certain time using Media Fragments URI.

If you want to get some videos (e.g. small tutorial) you would send some requests(lesson1.mp4, lesson2.mp4, lesson3.mp4)

It is so bother.

You had better to combine all videos and request it only using Media Fragments URI. It will reduce to prepare multiple media resources.

The format is below.

<source type="video/webm" src="video.webm#[start],[end]">

example

This video will play from 3s to 5s.

<video class="video" muted controls>
	<source type="video/webm" src="http://tomoyukikashiro.me/sample/video/landscape.webm#3,5">
	<source type="video/mp4" src="http://tomoyukikashiro.me/sample/video/landscape.mp4#3,5">
</video>

Deomo

http://codepen.io/Tkashiro/full/KwVeRM

Browser Support

Almost browser support it including mobile browser.

media query

@media only screen and (-webkit-min-device-pixel-ratio: 2),
	   only screen and (min-resolution: 2dppx){
	   
	   // css for high resolution display here 
}

Attension of media query solution

You should use resolution property to specify high resolution display. Because device-pixel-ratio is non-standard property. But iOS safari dose not support resolution property.

Actually, You need to use both property.

browser support

image-set in background-image

.img-image-set{
  width: 200px;
  height: 200px;
  display: block;
  background-repeat: no-repeat;
  background-image: -webkit-image-set(
    url(http://dummyimage.com/200x200/000000/fff&text=min-resolution-1) 1x, // for non-retina
    url(http://dummyimage.com/400x400/000000/fff&text=min-resolution-2) 2x  // for retina
  );
  background-size: contain;
}

Attension of image-set solution

You can use background-image#image-set to specify high resolution display. It is more simply than media query. All of mobile browser including Android browser can use it.

brower support

Deomo

http://codepen.io/Tkashiro/full/NPxwwg

Reference

Outline

How to set :active style to button in mobile ? if you set touchstart and touchend eventListener and switch class (e.g. .active) to button you are happy :) I’ll tell you easier way.

CSS

css is normal. you set :hover, :forcus, and :active Pseudo-classes.

.btn {
  background-color: blue;
}
.btn:hover {
  background-color: red;
}
.btn:focus {
  background-color: green;
}
.btn:active {
  background-color: gray;
}

Javascript

There are a trick. You should set empty function to touchstart event in body like this.

window.onload = function() {
    if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
        document.body.addEventListener('touchstart', function() {}, false);
    }
}

Demo

Try it

Result

There are some difference between browser. These table is summary of style.

browser hover clicking after click
chrome :hover :active :focus
firefox, safari :hover :active :hover
mobile safari   :active :hover
android default browser   :hover :hover

please tell me android chrome result. I don’t have it.

Best plactice

Desktop

match :hover and :focus style.

sass

$hover: red

.btn {
  background-color: blue;
}
.btn:hover {
  background-color: $hover;
}
.btn:focus {
  background-color: $hover;
}
.btn:active {
  background-color: gray;
}

mobile

nothing.

Reference

<label for="fullName">Name</label>
<input type="text" name="name" id="fullName" placeholder="Full name" required autocomplete="name">

These parts of form has 2 important things. name and autocomplete attribute.

name and autocomplete attribute provide hint for autocomplete.

If you put appropriate value in name and autocomplete these may be hint for autocomplete. It’s helpful for mobile user to input payment data (e.g. card number)

You can check autocomplete value in whatwg specification. (this specification is extended from that of W3C)

specification

https://html.spec.whatwg.org/multipage/forms.html#autofill

example

  • nam
  • honorific-prefix
  • given-name
  • additional-name
  • family-name
  • honorific-suffix
  • nickname
  • username
  • new-password
  • current-password
  • organization-title
  • organization

etc…

Attension

Auto-complete only works when the form method is post.

call autocomplete from Javascript

  • user click button to call autocomplete.
  • browser show dialog to input card and address information.

  • after save it, information you need is inputed automatically from saved data.

  • if this is second visit you only select data from dialog.

sample page

https://codepen.io/Tkashiro/full/EajRrG

html

<h1>Credit Card Information</h1>
<form id="cardf-form" action="POST">
  <div>
    <label for="f-email">email</label>
    <input id="f-email" type="email" autocomplete="email" name="email">
  </div>
  <div>
    <label for="f-card-name">card name</label>
    <input id="f-card-name" type="text" autocomplete="cc-name" name="card-name">
  </div>
  <div>
    <label for="f-card-num">card number</label>
    <input id="f-card-num" type="text" autocomplete="cc-number" name="card-num">
  </div>
  <div>
    <label for="f-card-exp-month">card expire month</label>
    <input id="f-card-exp-month" type="text" autocomplete="cc-exp-month" name="card-exp-month">
  </div>
  <div>
    <label for="f-card-exp-year">card expire year</label>
    <input id="f-card-exp-year" type="text" autocomplete="cc-exp-year" name="card-exp-year">
  </div>
  <div>
    <label for="f-card-csc">card security code</label>
    <input id="f-card-csc" type="text" autocomplete="cc-csc" name="card-csc">
  </div>
</form>
<button id="request-autocomplete">Request AutoComplete</button>

Javascript

document.addEventListener('DOMContentLoaded', function(){
    var button = document.querySelectorAll('#request-autocomplete')[0];
    var form = document.querySelectorAll('#cardf-form')[0];
    button.addEventListener('click', function(event) {
        form.requestAutocomplete();
        event.preventDefault();
    });
  
    form.addEventListener('autocomplete', function() {
    });
  
    form.addEventListener('autocompleteerror', function(event) {
      if (event.reason == 'invalid') {
      }
      else if (event.reason == 'cancel') {
      }
      else if (event.reason == 'disabled') {
      }
    });
});

Attension

  • you meet to call .requestAutocomplete() in https page.
  • .requestAutocomplete() need to be called from user action. (e.g. click)
  • you have to check whatwg specification about autocomplete value. browser input data automatically by the reference autocomplete value.

Reference

According to Google Web Fundamentals, there are 5 responsive design pattern.

in these type of pattern, flexbox help your layout flexible. So you can use these pattern +10 IE.

  • Mostly fluid
  • Column Drop
  • Layout shifter
  • Tiny tweaks
  • Off canvas

Mostly fluid

sample

Column Drop

sample

Layout shifter

sample

Tiny tweaks

sample

Off canvas

sample