Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don't Break the Web: Why Web Standards Matter

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.

Rey Bango

April 09, 2013
Tweet

Other Decks in Programming

Transcript

  1. somegeekintn.com

    View full-size slide

  2. by cogdogblog

    View full-size slide

  3. by kertrats01

    View full-size slide

  4. International Electrotechnical Commission
    International Commission on the Rules for
    the Approval of Electrical Equipment
    National Electrical Manufacturers'
    Association

    View full-size slide

  5. • 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

    View full-size slide

  6. drop their prefix
    Candidate
    Recommendation stage

    View full-size slide

  7. by Richard O. Barry

    View full-size slide

  8. by t.na (黑臉娜

    View full-size slide

  9. Stats via Ars Technica

    View full-size slide

  10. // 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);
    }

    View full-size slide

  11. if (window.addEventListener) {
    window.addEventListener( “load”, popMessage, false );
    } else if (window.attachEvent) {
    window.attachEvent( “onload”, popMessage);
    }

    View full-size slide

  12. What happens when feature
    detection looks like this?

    View full-size slide

  13. 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;
    };

    View full-size slide

  14. Test for
    @font-face

    View full-size slide

  15. 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;
    };

    View full-size slide

  16. if
    (Modernizr.fontface){

    }

    View full-size slide

  17. http://www.flickr.com/photos/keepingtime_ca

    View full-size slide

  18. http://www.flickr.com/photos/theophilusphotography

    View full-size slide

  19. http://www.flickr.com/photos/antichrista/

    View full-size slide

  20. IE Developer Tools
    Firebug
    Chrome Developer Tools
    Safari Developer Tools

    View full-size slide