Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
•
17 likes•7,130 views
HTML5 Conference 2016 で使用したスライド Updated on 2016/09/06 - 講演時間不足で割愛した Edge & Safari の新機能紹介と一次情報源リンク集を追加しました
![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](https://image.slidesharecdn.com/edgewebtechnologiesandbrowservendors-160903082310/85/Edge-Web-Technologies-and-Browser-Vendors-Updated-on-2016-09-06-69-320.jpg)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
- 40. 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
- 41. 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
- 42. 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
- 43. 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
- 44. 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
- 45. 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
- 46. 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
- 47. 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
- 48. 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
- 55. // 左から右へ水平に、上から下へ垂直方向に .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; }
- 58. // 一般的な合字の有効化 .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"; }
- 69. 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