Your SlideShare is downloading. ×
The status of living HTML (highlights)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The status of living HTML (highlights)


Published on

A look at some exciting things happening in the world of HTML5 and related JavaScript APIs, including Web Components and responsive images.

A look at some exciting things happening in the world of HTML5 and related JavaScript APIs, including Web Components and responsive images.

Published in: Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan
  • 2. ● getUserMediagetUserMedia ● Web SocketsWeb Sockets ● WebGLWebGL ● WebRTCWebRTC Cool existing thingsCool existing things
  • 3. ● Web ComponentsWeb Components ● Responsive ImagesResponsive Images ● Service WorkerService Worker ● JSON for form dataJSON for form data ● OtherOther Shiny new thingsShiny new things
  • 4. Browser supportBrowser support Photo byPhoto by
  • 5. Web Components: TemplateWeb Components: Template ● Re-usable HTMLRe-usable HTML ● Only parsed when they are neededOnly parsed when they are needed ● Useful for a large suite of documentsUseful for a large suite of documents
  • 6. Web Components: Custom ElementsWeb Components: Custom Elements ● Extend existing elementsExtend existing elements ● Make your own elementsMake your own elements ● Custom elements must contain a hyphenCustom elements must contain a hyphen ● Name validator:Name validator: –
  • 7. Web Components: Shadow DOMWeb Components: Shadow DOM ● An “unseen” DOM attached to an elementAn “unseen” DOM attached to an element ● Encapsulation in HTML:Encapsulation in HTML: – ““private” scopeprivate” scope – independent of global stylesindependent of global styles ● Multiple shadows possibleMultiple shadows possible
  • 8. Shadow DOM:Shadow DOM: createShadowRoot()createShadowRoot()
  • 9. Shadow DOM: renderedShadow DOM: rendered
  • 10. Web Components: More...Web Components: More...
  • 11. Responsive ImagesResponsive Images ● srcsetsrcset attribute forattribute for <img><img> ● <picture><picture> elementelement ● ““Art direction” is possibleArt direction” is possible ● <img src=”...”><img src=”...”> fallbackfallback
  • 12. Responsive Images:Responsive Images: srcsetsrcset ● For high pixel density screens (e.g. “retina”)For high pixel density screens (e.g. “retina”) <img src="small.jpg"<img src="small.jpg" srcset="small.jpg 1x, large.jpg 2x">srcset="small.jpg 1x, large.jpg 2x">
  • 13. Responsive Images:Responsive Images: <picture><picture> ● With singleWith single <source><source> <picture><picture> <source srcset="small.jpg 1x,<source srcset="small.jpg 1x, large.jpg 2x">large.jpg 2x"> <img src="small.jpg" alt=”Portrait”><img src="small.jpg" alt=”Portrait”> </picture></picture>
  • 14. Responsive Images:Responsive Images: <picture><picture> ● With multiple sizesWith multiple sizes <picture><picture> <source sizes="100%"<source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w>srcset="pic400.jpg 400w, pic800.jpg 800w> <img src="pic400.jpg" alt="Portrait"><img src="pic400.jpg" alt="Portrait"> </picture></picture>
  • 15. Responsive Images:Responsive Images: <picture><picture> ● With multipleWith multiple <source><source> <picture><picture> <source media="(min-width: 600px)"<source media="(min-width: 600px)" srcset="large.jpg">srcset="large.jpg"> <source media="(min-width: 300px)"<source media="(min-width: 300px)" srcset="small.jpg">srcset="small.jpg"> <img src="small.jpg" alt=”Portrait”><img src="small.jpg" alt=”Portrait”> </picture></picture>
  • 16. Responsive Images:Responsive Images: <picture><picture> ● With multiple filetypesWith multiple filetypes <picture><picture> <source type="image/webp"<source type="image/webp" srcset="small.webp, large.webp 2x">srcset="small.webp, large.webp 2x"> <source type="image/jpg"<source type="image/jpg" srcset="small.jpg, large.jpg 2x">srcset="small.jpg, large.jpg 2x"> <img src="small.jpg" alt="Portrait"><img src="small.jpg" alt="Portrait"> </picture></picture>
  • 17. Responsive Images: More...Responsive Images: More...
  • 18. Service WorkerService Worker ● Goodbye ApplicationCacheGoodbye ApplicationCache ● Hello page-independent scriptsHello page-independent scripts ● ProposalProposal –
  • 19. Service WorkerService Worker ● Decides how to respond to a URI requestDecides how to respond to a URI request navigator.serviceWorker.register("/assets/v1/worker.js").then(navigator.serviceWorker.register("/assets/v1/worker.js").then( function(serviceWorker) {function(serviceWorker) { console.log("success!");console.log("success!"); serviceWorker.postMessage("Howdy from your installingserviceWorker.postMessage("Howdy from your installing page.");page."); // To use the serviceWorker immediately, you might call// To use the serviceWorker immediately, you might call window.location.reload()window.location.reload() },}, function(why) {function(why) { console.error("Installing the worker failed!:", why);console.error("Installing the worker failed!:", why); });});
  • 20. JSON for form dataJSON for form data ● Currently:Currently: – enctype=”multipart/form-data”enctype=”multipart/form-data” – enctype=”application/x-www-form-urlencoded”enctype=”application/x-www-form-urlencoded” ● New alternative:New alternative: – enctype=”application/json”enctype=”application/json” ● Proposal:Proposal: –
  • 21. Others (your homework)Others (your homework) ● PerformancePerformance – Performance Timeline APIPerformance Timeline API – User Timing APIUser Timing API – Page Visibility APIPage Visibility API ● Push APIPush API ● Resource PrioritiesResource Priorities ● Clipboard APIClipboard API ● Network Service Discovery APINetwork Service Discovery API
  • 22. How you can helpHow you can help ● Community Groups:Community Groups: – ● Testing:Testing: – – ● Documentation:Documentation: –
  • 23. The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan