新規追加!

iOS9で追加されたヤツ。新規追加でいろんな機能がでたみたいッスね。
後で確認用に少し組んでみます。
参考サイトQiita

backdropフィルタ対応

なんやらよーけあるみたいっすね。
CSS3のフィルタ効果って所でしょうか。

blur()

blur(2px);

ブラー処理 ピクセルで指定

 -webkit-backdrop-filter: blur(2px);

grayscale()

grayscale(90%);

グレースケール パーセント指定

 -webkit-backdrop-filter: grayscale(90%);

saturate()

saturate(30%);

彩度 パーセント指定

 -webkit-backdrop-filter: saturate(30%);

sepia()

sepia(99%);

セピア パーセント指定

 -webkit-backdrop-filter: sepia(99%);

invert()

invert(0.3);

反転 0~1の間で指定
基本0or1? 道中の値はグレーでマスクされてるような・・・なんとも言えない

-webkit-backdrop-filter: invert(0.3);

contrast()

contrast(250%);

コントラスト デフォ100% パーセント指定
上限はない?

-webkit-backdrop-filter: contrast(250%);

brightness()

brightness(3);

明るさ 0.0~上限なし?

-webkit-backdrop-filter: brightness(3);

hue-rotate()

hue-rotate(250deg);

色相変換 円になったカラー、グルグル回してる感じなんですかね(;´Д`)
degだし。
なので、0~360 361degは1degと同じになるようです。

-webkit-backdrop-filter: hue-rotate(250deg);

カルーセルバナー

スワイプで動く奴だそうで。
えー、こんなのできるんかー!
縦横両方いけるようですね。ただ、縦の場合はheightちゃんと設定しようぜって事ですか。
スクロールタイプも2通りあるようです。
scroll-snap-type: mandatory;で、途中でとまる
-webkit-scroll-snap-type: mandatory;で

1横
2横
3横
.snap {
 margin: 20px auto;
 width: 80%;
 overflow: auto;
 white-space: nowrap;
 -webkit-scroll-snap-points-x: repeat(100%);
 -webkit-scroll-snap-type: mandatory;
 -webkit-overflow-scrolling: touch;
}
.snap > div {
 width: 100%;
 height: 150px;
 display: inline-block;
 line-height: 150px;
 text-align: center;
 font-size: 50px;
}
.snap > div:nth-child(even) {
 background-color: #87EA87;
}
.snap > div:nth-child(odd) {
 background-color: #87CCEA;
}
1縦
2縦
3縦
.snap2 {
 height: 200px;
 width: 220px;
 overflow-x: hidden;
 overflow-y: auto;
 -webkit-scroll-snap-points-y: repeat(200px);
 -webkit-scroll-snap-type: proximity;
 font-size: 0;
 margin: 0 auto;
}
.snap2 > div {
 width: 200px;
 height: 200px;
 display: inline-block;
 line-height: 200px;
 text-align: center;
 font-size: 100px;
}
.snap2 > div:nth-child(even) {
 background-color: #87EA87;
}
.snap2 > div:nth-child(odd) {
 background-color: #87CCEA;
}

Navigation Timing API

ブラウザーがWebの画面を表示する時にどこにどれだけ時間がかかているか知るAPI
だそうですが。。。
アクセス開始から細かく区切って秒数を保管しているようですね。
どこからどこまでが時間かかってるのかが分かるようですが。うわぁ。地味だなぁ(;´Д`)

感圧タッチイベント

これがやりたかったの!!!
感圧測定やっちゃうっぽい?
タッチとタッチムーブとかで動く 結果:

ムーブのほうは想定通り動きますが、タッチ部分に関しては出るんだけど・・・なんだか・・・
3Dタッチは正直アプリ専用じゃないかと思ってます。WEBは使いこなせる人がきっといない。
ハンバーガーメニューよりも分かりにくい(アイコンつけようにも表示領域の問題で厳しいんじゃないかと)
公式からのイベント動かなかったっぽい?
まだやりかけですが、引き続き調査してみる事にします