somegeekintn com National Electrical Manufacturers Association There were

somegeekintn. com

National Electrical Manufacturers Association

• 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 10 • 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

drop their prefix Candidate Recommendation stage

Stats via Ars Technica

// If not IE then use add. Event. Listener… if (navigator. user. Agent. index. Of("MSIE") == -1) { window. add. Event. Listener( “load”, pop. Message, false ); } else if (window. attach. Event) { window. attach. Event( “onload”, pop. Message); }

if (window. add. Event. Listener) { window. add. Event. Listener( “load”, pop. Message, false ); } else if (window. attach. Event) { window. attach. Event( “onload”, pop. Message); }

What happens when feature detection looks like this?

function(){ var sheet, bool, head = doc. Head || doc. Element, style = document. create. Element("style"), impl = document. implementation || { has. Feature: function() { return false; } }; style. type = 'text/css'; head. insert. Before(style, head. first. Child); sheet = style. sheet || style. Sheet; var support. At. Rule = impl. has. Feature('CSS 2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet. insert. Rule(rule, 0); result = (/src/i). test(sheet. css. Rules[0]. css. Text); sheet. delete. Rule(sheet. css. Rules. length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet. css. Text = rule; return sheet. css. Text. length !== 0 && (/src/i). test(sheet. css. Text) && sheet. css. Text. replace(/r+|n+/g, ''). index. Of(rule. split(' ')[0]) === 0; }; bool = support. At. Rule('@font-face { font-family: "font"; src: url(data: , ); }'); head. remove. Child(style); return bool; };

Widely used

Test for @font-face

function(){ var sheet, bool, head = doc. Head || doc. Element, style = document. create. Element("style"), impl = document. implementation || { has. Feature: function() { return false; } }; style. type = 'text/css'; head. insert. Before(style, head. first. Child); sheet = style. sheet || style. Sheet; var support. At. Rule = impl. has. Feature('CSS 2', '') ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet. insert. Rule(rule, 0); result = (/src/i). test(sheet. css. Rules[0]. css. Text); sheet. delete. Rule(sheet. css. Rules. length - 1); } catch(e) { } return result; } : function(rule) { if (!(sheet && rule)) return false; sheet. css. Text = rule; return sheet. css. Text. length !== 0 && (/src/i). test(sheet. css. Text) && sheet. css. Text. replace(/r+|n+/g, ''). index. Of(rule. split(' ')[0]) === 0; }; bool = support. At. Rule('@font-face { font-family: "font"; src: url(data: , ); }'); head. remove. Child(style); return bool; };

if (Modernizr. fontface){ … }

There is no standard screen resolution

This is not the standard image by Nic’s events’

More modern, but not the standard image by Hire London

Smaller, but not the standard image by Randolf Jorberg

Previous Microsoft. com

New Microsoft. com

device-width

@media

Breakpoint timeline

Decide whether different is ok IE 6 IE 10

Pixel perfect isn't always required IE 6 IE 10

Use the right tool for the job

Microsoft logo

data-resolved="true" <img alt="Microsoft" src="lg-2 x. png" data-source-index="1" />

data-disable-swap-below data-defer

data-disable-swap-below data-defer data-resolved="true" <img alt="Alt text" src="1600 x 540. jpg" data-source-index="0" />

'wf_Segoe. UI' local('Segoe UI'), local('Segoe WP'),

'wf_Segoe. UI'

'MSHPIcons. Regular'

'MSHPIcons. Regular' 'e 003' 'e 004'

'menu. png' 'search. png'