Chris Heilmann - @codepo8 - June 10, 2015, Webinale, Berlin

No more Excuses leftLet’s make the Web excellent!

Chris Heilmann@codepo8

“But we have to support Internet Explorer”

“We would love to use all this cool HTML5 stuff…”

This even became a running gag…

This made me angry…

So I took drastic measures…

HTML5 is backwards compatible and fault tolerant.

It should not matter what browser our end users have.

But Internet Explorer dropped off our radar…

As cool, modern developers, we made our choice…

inkknife_2000 https://www.flickr.com/photos/23155134@N06/15582432508

Does IE even matter?

Netmarketshare.com

Statcounter.com

Out-of-the-box browsers really matter!

Standards & Features

• WebGL

• WebSockets

• CSS3 Gradients

• Blocked scoped variables

• Pointer Events

• Fullscreen API

• Device Orientation

• Flexbox

• Encrypted Media

Extensions

• CSS3 Regions

• File API

• AppCache

• IndexedDB

• CSS3 Media Queries

• Canvas

• CSS3 Transforms

What was off was the messaging around it.

• Out-of-the-box Windows 10 browser

• Desktop, Mobile, Xbox. Hololens, IOT…

• Evergreen and constantly updated

• On par with other browsers

• Free upgrade for Windows 7 and 8 to Windows 10

• Very, very soon this will matter to us as developers

I am not here to tell you about browser speed and feature comparisons…

Instead, I want to report to you how the browser was created…

Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337808731

Faceymcface1 https://www.flickr.com/photos/12335386@N00/4337808731

…and what that means about us as developers of the web.

A fork from the past

The engine split

Interoperability: a new approach

“The web should just work for everyone – users, developers, and businesses.”

If standard defines an API behavior but all other browsers behave differently, is it a standard?

Interoperability means the web “just works” if ($.client.profile().name === 'msie') {

var IHateIE = {'scrollTop': context.$textarea.scrollTop(),'pos': context.$textarea.textSelection('getCaretPosition',

{startAndEnd: true})};

context.$textarea.data('IHateIE', IHateIE);}

For some reason IE seems to be calculating that differently. You might have to put in a special rule for IE there.

In Chrome, the error does not occur, the xml is appended successfully and the other methods after these two run as expected. In IE however, a hierarchyRequestError is thrown at the appendChild statement.

no matter HOW I passed the ko object to the child window, something got lost. Horrible behavior, IE...

Why does the following code throw an 'Unspecified error' (on the appendChild line) in IE11 which I click the button?

Getting the right, modern content

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

User-Agent Strings

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

User-Agent Strings

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

Mozilla/5.0

The HTML5 Standard even does this!

window.mobileCheck = function() {

var check = false;

(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);

return check; }

Please don’t do UA sniffing

Please don’t do UA sniffingPlease avoid UA sniffing as much as possible

Always do feature detection

(If isolating a bug) Sniff for specific browser versions

Assume unknown browsers are good

Interoperable intersectionTh

e M

obile

Web

Interoperable intersectionTh

e M

obile

Web

Prioritizing interop

Inte

rop 2

Inte

rop 1

Inte

rop 3

Inte

rop 0

Worked in IE11

Used by real sitesWorks in other browsers

We anticipate sites will require this functionality soon

Real site usage is farther out or never

Font Resource Handling

Before loading font resources, IE and Firefox check the font server’s CORS header, and the font’s installable header (as per W3C specification).

This is done to ensure that the font usage rights are honored.

WebKit does not check CORS / installable header.

before after

Control Appearance OverridesApple added ways to restyle HTML controls on the iPhone to match OS control look and feel.

Web developers add custom markup to disable Apple’s styles and provide their own.

-webkit-appearance: none ← Most common value.

-webkit-appearance: button

-webkit-appearance: checkbox

-webkit-appearance: radio

etc..

before after

Control Appearance Overrides

Some sites restyle input controls using -webkit-appearance: none for critical functionality.

before after

GradientsApple originally added support for gradients to WebKit using a Core Graphics friendly syntax.

During standardization the syntax was changed leaving WebKit incompatible with the standard. Some sites continue to use the original Apple syntax. Proprietary Apple Markup (still in WebKit):

-webkit-gradient(linear, left top, right bottom, colorstop(0, #FFFFFF), color-stop(1, #00A3EF));

Webkit-prefixed W3C Standard Gradient in WebKit:

-webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

Unprefixed W3C standard:

linear-gradient(to bottom right, FFFFFF 0%, #00A3EF 100%);

before after

innerHTML orphaned children

To date,

of these types of fixes are in Edge.

Removing code (yay!)

VML

attachEvent()

VB Script

Conditional Comments

X-UA-Compatible

currentStyle

IE Layout Quirks

MS-prefixed Events

Rememberingthe IEisms thathave passed

Using data to design a platform

Insiders Program3+ million users

33 trillion pages44 billion sites7 thousand APIs

bing

Web Crawler

Instrumentation

Microsoft Edge

Implementing XPath: crawler data in action

Implementing XPath: crawler data in action

Hypothesis: Most XPath queries can be rewritten in CSS selectors

//element1/element2/element3//element[@attribute="value"].//*[contains(concat(" ", @class, " "), " classname ")]

element1 > element2 > element3element[attribute="value"]*.classname

Trial run #1

94%

Tweaking, trial run #2

97%

Using open source JavaScript to complete it

Selectors Engine

Wicked-Good-Xpathcode.google.com/p/wicked-good-xpath

C++

JS

97%

3%

Standards and roadmap

Specifications

MayJune July AugSept Oct Nov Dec Jan Feb Mar April130

140

150

160

170

180

190

200

210

Under Consideration In DevelopmentPreview Release

Planning in the open

http://status.modern.ie

What’s available in Microsoft Edge now

What’s in the works now

How decisions are made for the future…

Real World Usage Data

Developer/Partner Feedback

Standards Stability

Development Capacity

Personally, I do not care what browser you use or prefer. Nobody should make that decision for you!

Fact is, that Microsoft Edge is coming and will be something a lot of people use.

The good news is that if you support standards and don’t assume one special browser, you’re ready for it!

We now have a chance to do things right for the web by working towards interoperability.

https://status.modern.ie/

@MSEdgeDev

All the information in one place…

https://dev.modern.ie

Join in and help build a browser for you

uservoice.modern.iestatus.modern.ie

remote.modern.ieinsider.windows.com

@codepo8