Slide 1
Slide 1 text
WEBKIT
VS.
THE MOBILE WEB
Is there a second browser wars?
Slide 2
Slide 2 text
THE BROWSERS
Trident Gecko
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
THE STANDARDS PROCESS
Working Draft
Last Call Working Draft
Candidate Recommendation
Recommendation
Slide 5
Slide 5 text
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.
Microsoft practically defeated Netscape by the time IE6 was released.
This had devastating consequences on the Open Web Platform.
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
EXPERIMENTAL WEB STANDARDS
section {
-webkit-transition:1s;
}
section {
-ms-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
-o-transition:1s;
transition:1s;
}
Slide 9
Slide 9 text
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);
}
Slide 10
Slide 10 text
EXAMPLE
WebKit Everything else
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
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! )