HTML5, JavaScript & CSS Advancements
•
17 likes•7,130 views
HTML5 Conference 2016 で使用したスライド Updated on 2016/09/06 - 講演時間不足で割愛した Edge & Safari の新機能紹介と一次情報源リンク集を追加しました
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML5, JavaScript & CSS Advancements
Similar to HTML5, JavaScript & CSS Advancements (20)
More from dynamis
More from dynamis (20)
Recently uploaded
Recently uploaded (20)
HTML5, JavaScript & CSS Advancements
- 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