No more excuses left - Webinale 2015 Lunch keynote
-
Upload
christian-heilmann -
Category
Education
-
view
1.090 -
download
1
Transcript of No more excuses left - Webinale 2015 Lunch keynote
Chris Heilmann - @codepo8 - June 10, 2015, Webinale, Berlin
No more Excuses leftLet’s make the Web excellent!
HTML5 is backwards compatible and fault tolerant.
It should not matter what browser our end users have.
As cool, modern developers, we made our choice…
inkknife_2000 https://www.flickr.com/photos/23155134@N06/15582432508
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
• 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
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.
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?
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
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 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
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
Removing code (yay!)
VML
attachEvent()
VB Script
Conditional Comments
X-UA-Compatible
currentStyle
IE Layout Quirks
MS-prefixed Events
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
Using open source JavaScript to complete it
Selectors Engine
Wicked-Good-Xpathcode.google.com/p/wicked-good-xpath
C++
JS
97%
3%
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
How decisions are made for the future…
Real World Usage Data
Developer/Partner Feedback
Standards Stability
Development Capacity
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/