Don't Break the Web: Why Web Standards Matter

The Web community has come a long way in pushing for solid cross-browser standards support and it's incredibly important that as developers we focus on leveraging these standards in a responsible and practical way. In this talk, we'll discuss and learn about the standards process, the best practices for identifying and embracing stable standards, and how to leverage standards responsibly to build websites that are cross-browser and available to broad audiences.

Transcript

3. somegeekintn.com
4. by cogdogblog
5. by kertrats01
8. International Electrotechnical Commission International Commission on the Rules for the Approval of Electrical Equipment National Electrical Manufacturers' Association
14. • There were no recent additions or changes and no renaming or major changes are expected • Supported by at least two browsers other than Internet Explorer • Interoperable across all these browsers for the features’ core use cases • Already used on the Web, including in their unprefixed form • Reached Candidate Recommendation or are likely to become Candidate Recommendations
24. drop their prefix Candidate Recommendation stage
25. by Richard O. Barry
30. by t.na (黑臉娜
33. Stats via Ars Technica
42. // If not IE then use addEventListener… if (navigator.userAgent.indexOf("MSIE") == -1) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
43. if (window.addEventListener) { window.addEventListener( “load”, popMessage, false ); } else if (window.attachEvent) { window.attachEvent( “onload”, popMessage); }
44. What happens when feature detection looks like this?
45. function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
48. Widely used
50. Test for @font-face
51. function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = 'text/css'; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature('CSS2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/\r+|\n+/g, '') .indexOf(rule.split(' ')[0]) === 0; }; bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }'); head.removeChild(style); return bool; };
53. if (Modernizr.fontface){ … }
55. http://www.flickr.com/photos/keepingtime_ca
56. http://www.flickr.com/photos/theophilusphotography
57. http://www.flickr.com/photos/antichrista/
76. IE Developer Tools Firebug Chrome Developer Tools Safari Developer Tools