Real solutions, no tricks
Seu SlideShare está sendo baixado.
×
![YepNope
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});](https://image.slidesharecdn.com/angels-versus-demons-120417044159-phpapp01/75/angels-versus-demons-balancing-shiny-and-inclusive-33-2048.jpg?cb=1669243949)
Confira estes a seguir
Recomendadas
Mais Conteúdo rRelacionado
Diapositivos para si (20)
Quem viu também gostou (6)
Semelhante a Angels versus demons: balancing shiny and inclusive (20)
Mais de Chris Mills (19)
Mais recentes (20)
Angels versus demons: balancing shiny and inclusive
- 1. Angels vs. demons
- 2. Balancing shiny and inclusive
- 3. Contact me! cmills@opera.com @chrisdavidmills http://www.slideshare.net/chrisdavidmills http://dev.opera.com http://www.w3.org/community/webed/
- 4. What we’ll talk about ‣ Do you really need The Shiny™? ‣ Progressively enhance, don’t rely on it ‣ Built in alternatives, versus building your own ‣ ...use polyfills/shims ‣ Don’t screw over your users!
- 5. Calling all good web angels ‣ Accessibility ‣ Usability ‣ A whole web of devices to support ‣ Let’s be responsible!
- 6. Thou shalt make content accessible wherever possible
- 7. Generally this means text ‣ Or a text alternative ‣ Alt text or longdesc really isn’t that expensive ‣ Transcripts/text tracks?
- 8. <canvas>/WebGL are cool ‣ But don’t use them to build entire UIs! ‣ Use a base of HTML with enhancements on top
- 9. Optimize your content... ‣ As much as possible across different browsing contexts ‣ Responsive design rocks*
- 10. Responsive design ‣ The web is responsive by default ‣ So let’s try not to screw it up ‣ Media queries ‣ Responsive media ‣ Viewport
- 11. Thou shalt design defensively
- 12. Defensive design by default ‣ Is your content still readable without those shadows, or background gradients ‣ Provide background colours as fallbacks ‣ Test thoroughly on older browsers ‣ A lot of the blingy stuff gracefully degrades
- 13. Example: CSS animation ‣ If done properly, a lot of CSS animations and transitions can be used unobtrusively ‣ For example, by default the element is set to be in its usable state, but then the animation is applied over the top to bring the animation to that state
- 14. Example: Web fonts ‣ This is a perfect feature to use now! ‣ IE has supported EOT since IE4/5! ‣ You can use the bulletproof web font syntax - see fontsquirrel.com
- 15. HTML5 <video> <video controls> <source src="video-file.mp4" type="video/mp4"> <source src="video-file.webm" type="video/webm"> <track src="en.vtt" kind="subtitles" srclang="en" label="English subtitles"> <!-- Flash player often referenced in here: will play the MP4 version of the video --> </video>
- 16. Flash fallbacks viable ‣ Flash can just load the MP4 version of the video ‣ Also consider jPlayer, Sublime, etc. ‣ And http://mediaelementjs.com/ ‣ mediaelements even fakes the entire media API in Flash/Silverlight
- 17. You can build in support for <track> ‣ Building in support when it doesn’t exist ‣ JSCaptions, Captionator, videosub, playr
- 18. Polyfills
- 19. Add in support where needed ‣ Using JavaScript ‣ Fake SVG in old IE versions using VML ‣ Fake box-shadow using IE filters (although they are evil — every time you use IE filters, god kills a kitten)
- 20. Adding HTML5 support to browsers ‣ Older browsers don’t support them! ‣ But you can style any unknown element, so just set all the “block level” elements to display as block, at the top of your CSS: ‣ article { display: block; }
- 21. Oh, but IE 6-8 need some more help ‣ They refuse to style unknown elements, unless you create instances of them in the DOM ‣ document.createElement('article');
- 22. CSS3 PIE for CSS bling support ‣ http://css3pie.com/ ‣ Awesome little library ‣ Add support to IE6-8 for box-shadow, border- radius, gradients and transparent colours ‣ But not text-shadow, which is a little frustrating
- 23. CSS3- mediaqueries.js ‣ http://code.google.com/p/css3-mediaqueries-js/ ‣ Add media queries support to IE ‣ A bit clunky, when you resize, but it works
- 24. Excanvas ‣ http://excanvas.sourceforge.net/ ‣ Add <canvas> support to IE
- 25. Selectivizr ‣ http://selectivizr.com/ ‣ Adds support for CSS3 selectors to IE6-8
- 26. Providing alternatives with Modernizr/yepnope
- 27. Modernizr ‣ The mother of all feature detection libraries ‣ Available at modernizr.com
- 28. Modernizr CSS example <html lang="en-US" class="no-js"> <head> ... <script src="modernizr.js"></script> ... </head>
- 29. Modernizr CSS example <html class=" js flexbox canvas canvastext webgl no- touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no- cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en-US">
- 30. Modernizr CSS example #wrapper:hover, #wrapper:focus { transform: rotateX(180deg); }
- 31. Modernizr CSS example .no-csstransforms3d #wrapper #front { transition: 0.8s all ease-in; } .no-csstransforms3d #wrapper:hover #front, .no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%); }
- 32. Modernizr JS example function rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); } else { back.style.zIndex = "5"; }; };
- 33. YepNope yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });
- 34. In general, this rocks ‣ Modernizr/yepnope can add a fair bit of weight to your page: 49KB for the full library ‣ But you can create a smaller custom version that just includes the tests you need ‣ There are some things that can’t be detected
- 35. Thou shalt stop lusting after a monoculture
- 36. Not on my watch! ‣ A monoculture would ruin the web ‣ Competition is vital for innovation ‣ Browser vendors control standards ‣ If we had a monoculture, a single company would control web standards ‣ Do we want one company to control the Web?
- 37. And we can make this stuff work cross browser background: -webkit-linear-gradient(#ff0000,#000000); background: -moz-linear-gradient(#ff0000,#000000); background: -ms-linear-gradient(#ff0000,#000000); background: -o-linear-gradient(#ff0000,#000000); background: linear-gradient(#ff0000, #000000);
- 38. Common sense prevails? ‣ If you are going to use prefixed features, use all the prefixes! ‣ Don’t use single vendor-only features ‣ If it’s only in one rendering engine, it means it’s not ready yet
- 39. Thou shalt not browser sniff, lest ye be struck down
- 40. UA string chaos! ‣ Mosaic: NCSA_Mosaic/2.0 (Windows 3.1) ‣ Netscape: Mozilla/1.0 (Win3.1) ‣ IE: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) ‣ Firefox: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826 ‣ Konqueror: Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)
- 41. ‣ Opera: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51, or Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51, or Opera/9.51 (Windows NT 5.1; U; en) ‣ Safari: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5 ‣ Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/ 525.13 (KHTML, like Gecko) Chrome/ 0.2.149.27 Safari/525.13
- 42. Thou shalt let user agreements ruin your users’ experience!
- 43. Use of any Web browsers (other than generally available third-party browsers), engines, software, spiders, robots, avatars, agents, tools or other devices or mechanisms to navigate, search or determine the NYSE Web-site is strictly prohibited.
- 44. You agree you will not, and will not permit any third party to obstruct, receive, modify or otherwise interfere with the display or delivery of advertisements on the NYSE Web-site.
- 45. You may print or download a single, unaltered, permanent copy or one temporary copy in a single computer’s memory of any Content for your personal, non-commercial use only
- 46. You agree to review this Agreement each time you access the NYSE Euronext Web-site so that you are aware of any and all modifications made to this Agreement since your last visit
- 47. NYSE Euronext prohibits ... unauthorized hypertext links by others to the NYSE Euronext Web-site. NYSE Euronext reserves the right to disable any unauthorized links.
- 48. Compromise?
