WebKit vs the mobile Web

Transcript

1. WEBKIT VS. THE MOBILE WEB Is there a second browser wars?
2. THE BROWSERS Trident Gecko
3. THE OPEN WEB PLATFORM All layout engines implement the Open Web Platform. The Web platform is defined by standards bodies like:  World Wide Web Consortium (W3C)  HTML and DOM  CSS  Web Hypertext Application Technology Working Group (WHATWG)  Works to give the W3C common sense when defining standards (it’s a long story…)  European Carton Makers Association (ECMA)  Defined ECMAScript, a.k.a. JavaScript  Internet Engineering Task Force (IETF)  HTTP/1.0  Web Sockets  Atom
4. THE STANDARDS PROCESS Working Draft Last Call Working Draft Candidate Recommendation Recommendation
5. THE BROWSER WARS The first Web browser was called “WorldWideWeb”. It was made in 1991. In 1993, Mosaic was created. Microsoft and Netscape used it to create their own Web browsers. Microsoft’s Internet Explorer and Netscape competed over market share by adding new proprietary features to their own Web platforms.  e.g. <marquee> Microsoft practically defeated Netscape by the time IE6 was released. This had devastating consequences on the Open Web Platform.
6. DESKTOP BROWSER MARKET SHARE 89% 10% 1% 2001 Internet Explorer Netscape Other 55% 20% 18% 5% 2% 0% 2013 Internet Explorer Firefox Chrome Safari Opera Other
7. MOBILE BROWSER MARKET SHARE 61% 22% 2% 1% 10% 1% 3% 2013 Safari Android Chrome BlackBerry Opera Mini Internet Explorer Other 86% 10% 1% 3% 2013 (layout engines) WebKit Presto Mini Tident Unknown
8. EXPERIMENTAL WEB STANDARDS section { -webkit-transition:1s; } section { -ms-transition:1s; -moz-transition:1s; -webkit-transition:1s; -o-transition:1s; transition:1s; }
9. BROWSER SNIFFING VS. FEATURE SNIFFING Browser sniffing if (navigator.userAgent.indexOf(“WebKit") > 0 ) { // Run custom code for WebKit } else { // Run code that’s supported in other // browsers } Feature detection if(window.addEventListener) { // Browser supports "addEventListener" window.addEventListener("load", myFunction, false); } else if(window.attachEvent) { // Browser supports "attachEvent" window.attachEvent("onload", myFunction); }
10. EXAMPLE WebKit Everything else
11. EMERGENCY ACTION In early 2012, Mozilla and Opera decided they should support some -webkit- prefixes to improve compatibility. Later, the W3C’s CSS Working Group published a Call For Action. Later, the CSS Working Group allowed browser vendors to ship the following CSS modules without using -prefixes-:  CSS Transforms  CSS Transitions  CSS Animations Mozilla decided that they will only release prefixed properties in beta versions of Gecko.
12. CONCLUSION It’s up to you to prevent this from getting worse! Don’t be an ignorant Web developer. Use good practices like:  Progressive enhancement  Feature detection Use a different Web browser (like Firefox for Android! )