O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)

6.191 visualizações

Publicada em

HTML5 Conference 2016 で使用したスライド
Updated on 2016/09/06 - 講演時間不足で割愛した Edge & Safari の新機能紹介と一次情報源リンク集を追加しました

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)

  1. 1. 
 

  2. 2.
  3. 3.
  4. 4. 
 
 
 
 

  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9. W3C
 HTML5 Elements & Syntax WAI- ARIA HTML5 Parser multi media Content Model app cache sections HTML5 Forms
  10. 10. WHATWG HTML W3C
 HTML5 Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. Micro- data Web Storage
  11. 11. ECMAScript
 2015WHATWG HTML W3C
 HTML5 Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. Pro- mise Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Micro- data Itera- tors Proxy Collec- tions Web Storage
  12. 12. ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. Filter Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Pro- mise Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Micro- data Itera- tors Proxy Collec- tions Mask- ing Web Storage
  13. 13. Net Info Web Socket Protocol ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. SSL Filter Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion HSTS CORS DNT HTTP/2 Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Navi. Timing Beacon IETF Micro- data data URL Itera- tors Proxy Collec- tions fetch Brotli Mask- ing Web Storage QUIC Origin HPKP
  14. 14. Net Info Web Socket Protocol APNG ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. SSL Opus mp3 H.264 FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG File Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Navi. Timing Beacon IETF OGP Micro- data data URL Itera- tors Proxy Collec- tions fetch Brotli Mask- ing Web Storage Quarks Mode QUIC Origin HPKP
  15. 15. Net Info Web Socket Protocol APNG Full- screen ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Presen- tation SSL Opus mp3 H.264 FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Battery Status Shared Workers Web Crypto Page Visibility File Pointer Events Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Navi. Timing Beacon Writing Mode Web Anima- tions IETF OGP Micro- data data URL Itera- tors Proxy Collec- tions Permi- ssions DOM fetch EME Brotli Mask- ing Progressive Enhancement Web Storage Quarks Mode UI Events QUIC Origin HPKP
  16. 16. Net Info Web Socket Protocol APNG Full- screen ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Game- pad Presen- tation SSL Opus mp3 H.264 FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Web Audio Battery Status Shared Workers SIMD Web Crypto Page Visibility File Pointer Events Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Async Func. Navi. Timing Beacon Writing Mode Web Anima- tions IETF Khronos OGP Game, VR & High
 Performance Apps Micro- data data URL WebVR Shared Mem. Itera- tors Proxy Collec- tions asm.js Permi- ssions DOM WebGL fetch Web Assembly EME Brotli Mask- ing Progressive Enhancement Web Storage Quarks Mode UI Events QUIC Origin HPKP
  17. 17. Net Info Web Socket Protocol APNG Full- screen ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Game- pad Presen- tation SSL Opus mp3 H.264 FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Web Audio Battery Status Generic Sensor Shared Workers SIMD Web Crypto Page Visibility FIDO File Pointer Events MIDI Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Async Func. Navi. Timing Beacon Writing Mode Web Anima- tions IETF Khronos OGP Game, VR & High
 Performance Apps Device
 Control Micro- data data URL WebVR Shared Mem. Itera- tors Proxy Collec- tions asm.js Permi- ssions DOM WebGL fetch Web Assembly EME Brotli Mask- ing Progressive Enhancement Web Storage Quarks Mode UI Events QUIC Origin Blue- tooth USB HPKP
  18. 18. Net Info Web Socket Protocol APNG Full- screen WebRTC ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Game- pad Media Stream data channel Presen- tation SSL Media Recorder Opus mp3 H.264 FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Web Audio Battery Status Generic Sensor Shared Workers SIMD Web Crypto Page Visibility FIDO File Pointer Events MIDI Speech Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Async Func. Navi. Timing Beacon Writing Mode Web Anima- tions IETF Khronos OGP Game, VR & High
 Performance Apps Real-Time
 Communications Device
 Control Micro- data data URL ORTC WebVR Shared Mem. Itera- tors Proxy Collec- tions asm.js Permi- ssions DOM WebGL fetch Web Assembly EME Brotli Mask- ing Progressive Enhancement Web Storage Quarks Mode UI Events QUIC Origin Blue- tooth USB HPKP
  19. 19. Net Info Web Socket Protocol APNG Full- screen WebRTC ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Game- pad Media Stream data channel Presen- tation Push SSL Media Recorder Opus mp3 H.264 Service Worker FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Web Audio Battery Status Generic Sensor Shared Workers SIMD Web Crypto Page Visibility FIDO File Pointer Events MIDI Speech Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Async Func. Navi. Timing Beacon Writing Mode Web Anima- tions IETF Khronos OGP Game, VR & High
 Performance Apps Progressive Web Apps Real-Time
 Communications Device
 Control Micro- data data URL ORTC WebVR Shared Mem. Itera- tors Proxy Collec- tions asm.js Permi- ssions DOM WebGL fetch Web Assembly EME Brotli Mask- ing Progressive Enhancement Web App Manifest Web Storage Quarks Mode UI Events QUIC Origin Blue- tooth USB HPKP
  20. 20. Net Info Web Socket Protocol APNG Full- screen WebRTC HTML Components ECMAScript
 2015 CSSSnapshot 2015 WHATWG HTML W3C
 HTML5 URL HTTP TLS Elements & Syntax WAI- ARIA HTML5 Parser Web Workers Web Sockets API Canvas 2D multi media Content Model app cache sections HTML5 Forms Server- Sent ev. geo- location Orienta tion Notifi- cations Game- pad Media Stream data channel Presen- tation Push SSL Media Recorder Opus mp3 H.264 Service Worker FilterSVG WOFF Math ML RSS Layout Media Queries trans- form Tran- sitions & Anima- tions Flex Box Multi Column Fonts User Inter- face Shapes text decora- tion Indexed DB vibra- tion SMIL VP10 HSTS CORS RDF RDFa DNT VP9 WebM Open Media VP8 HTTP/2 PNG Web Audio Battery Status Generic Sensor Shared Workers SIMD Web Crypto temp- lates Shadow DOM Custom Elements Page Visibility FIDO Grid Layout File Pointer Events MIDI Speech Pro- mise CSP Class Module block scope Typed Array Arrow Func. Template Literals Gene- rators Async Func. Navi. Timing Beacon Exclu- sions Writing Mode Web Anima- tions IETF Khronos OGP Game, VR & High
 Performance Apps Progressive Web Apps Real-Time
 Communications Device
 Control Extensible
 for Anything! Micro- data data URL ORTC WebVR Shared Mem. Itera- tors Proxy Collec- tions asm.js Permi- ssions DOM WebGL fetch Web Assembly EME Brotli Mask- ing Progressive Enhancement Web App Manifest Web Storage Quarks Mode UI Events QUIC Origin Blue- tooth USB HPKP
  21. 21.
  22. 22.
  23. 23.
  24. 24. // 左から右へ水平に、上から下へ垂直方向に .exampleText1 { width:75px; writing-mode: horizontal-tb; } // 上から下へ垂直に、左から右へ水平方向に .exampleText2 { height:75px; writing-mode: vertical-lr; } // 上から下へ垂直に、右から左へ水平方向に .exampleText3 { height:75px; writing-mode: vertical-rl; } // 上から下へ垂直に、すべてのグリフを左へ横倒し .exampleText4 { height:75px; writing-mode: sideways-lr; } // 上から下へ垂直に、すべてのグリフを右へ横倒し .exampleText5 { height:75px; writing-mode: sideways-rl; }
  25. 25. 
 

  26. 26. 
 
 

  27. 27. // 一般的な合字の有効化 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga", "clig"; font-feature-settings: "liga", "clig"; } // 上付き序数表記 .class { font-variant-numeric: ordinal; -moz-font-feature-settings: "ordn"; -webkit-font-feature-settings: "ordn"; font-feature-settings: "ordn"; }
  28. 28.
  29. 29. 
 

  30. 30. var ab = new ArrayBuffer(1024); var sab = new SharedArrayBuffer(1024); var worker = new Worker("worker.js"); console.log(uInt8Array.byteLength); // 1024 worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); // ArrayBuffer は Worker に渡すとメインスレッドではクリアされる console.log(uInt8Array.byteLength); // 0 console.log(sab.byteLength); // 1024 worker.postMessage(sab, [sab]); // SharedArrayBuffer は Worker に渡してもメインスレッドに残る console.log(sab.byteLength); // 1024
  31. 31.
  32. 32. 
 

  33. 33.
  34. 34. 
 

  35. 35.
  36. 36. 
 

  37. 37.

×