Web 技術とブラウザ ーいま知っておくべき Web 最新動向ー

概要

http://events.html5j.org/conference/2017/9/session/#h4

動画

資料

Last & This Year

  • HTML5終了(Obsolete)の提案のお知らせ(2017/08)

    • HTML3.2-5, XHTML -1.1 をObsolete Recommendation にするという提案
    • 実際HTML5終了しそう
  • 現在のWeb標準実装状況(Microsoft調べ)

    • Firefox と Chrome が API数ではリードを更に広げていっている

DevTools について

機能毎にブラウザも使い分けると良い

  • Web Fonts は Firefox,
  • JS Debug は Chromeとか

使い方は動画で見るとわかりやすい

  • Edge は Summit の公演を見ましょう

WebVR

  • GetInstalledRelatedApps
  • Web Budget API
  • Generic Sensors

  • 「開発中の機能をこのサイトで使わせてください」と申請すれば利用させてもらえる

  • あくまでもお試しなので、大規模サイトで使うと利用停止される

Chrome Update

Chrome 56

  • CSS position: sticky

Chrome 57

  • CSS Grid Layout に対応
  • Media Session API
    • 再生中のメディア情報をロック画面などに表示
    • デバイス向けの機能も積極実装する傾向が強く…

Chrome 58

  • IndexedDB 2.0 サポート完了

  • フル画面アプリ(display:fullscreen)

    • web app manifest にて指定すると全画面起動
    • iPhone X でのフル画面って
  • CSS display: flow-root

    • clear fix Hack にお別れするときがきました
    • Edge と Safari の早期対応に期待しましょう

Chrome 59

  • Headless Browsing サポート

    • ウインドウを開かないで自動処理、テスト可能に
    • Firefox も同時期に同様の機能をサポート
  • Notification の表示が macOS 標準UIに

  • Image Capture API

    • カメラで写真撮影(最大解像度撮影やズームなども…)
    • C言語移植でカメラアプリを作ったりできる

Chrome 60

  • Paint Timing API First Paint, First Contenful Paint, First Meaningful Paint, Time to Interactive などを測定可能に
  • Headless Browsing での自動テストにも対応!

Chrome 61

  • JavaScript Module のサポート!
  • Payment Request API!(デスクトップも)
  • Web Share API, WebUSB

Edge

  • Sonar(lintツール)に貢献
  • Payment Request API
  • Brotli でhtml,CSSなど圧縮
  • CSS Custom Properties
  • ePub Reader を内蔵

Edge最新

  • Service Worker に対応
  • WebVR, WebRTC 1.0…

Firefox51

  • WebGL2 に対応
  • HTTPページでパスワード入力に警告表示
  • Lets Encript とか使ってください
    • WebGL2
    • WebGL2 + WebAssembly

Firefox53,54

  • CSS Masks に対応
  • CSS display: flow-root
  • ビデオプレイヤーのUIが変わりました
  • HTTP 1 のパイプラインサポート廃止
  • WebVR 対応!

Safari 10.1

  • CSS Grid Layout サポート!
  • Fetch API, IndexedDB 2.0
  • Custom Elements(components)
  • Pointer Lock, Gamepad

Safari 11.0

  • WebAssembly サポート!
  • Resource Timing 2, User Timing2…
  • Drag and Drop(iOS でもサポート)
  • Variable Fonts(weight いっぱい用意しなくて良くなった)