Cross-browser web development

Ilya StarostinSoftware Engineer

Introducing

… && ???

Browser engine structureUser Interface

Browser Engine

Rendering Engine

Network JavaScript Engine

XML/HTML Parser

Display back-end

More info: http://grosskurth.ca/papers/browser-archevol-20060619.pdf http://www-archive.mozilla.org/newlayout/doc/layout-2006-12-14/master.xhtml

Samples

Browser Engine Chromium - Mozilla/Firefox/Gecko(haven’t conventional name)

Chromium

Rendering Engine Version <28:webkitVersion >28: Blink (just updated webkit)

webkit Gecko Blink (just updated webkit)

Java Script engine V8 Nitro SpiderMonkey V8

Cross-browser CSS- Almost all css properties adds to browsers before standard is approved

- Vendors of Render Engine adds new ccs properties with vendor-specific prefixes

- When standard is approved, vendors should remove vendor-specific prefix

-webkit- -moz- -ms- Without prefix

Chrome(blink,webkit)Safari (webkit)Opera (blink)iOS Safari (webkit)etc…

Firefox (Gecko)Konqueror(Gecko)Mobile firefox (Gecko)etc…

Internet Explorer Spelling of propertyBy standerds

- Using of different vendor-specific properties in the same CSS class shouldn’t break your styles

Samples of correctly wrote ccs#container { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.header { background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

}

#container { text-align: -webkit-center; text-align: -moz-center; text-align: center;}

Hints:- Duplicate vendor-specific properties for all vendors.- Do not use prefixes for latest browsers (if they already supported property without prefix)- Syntax of some vendor-specific properties can be very different (like gradient)

Cross-browser JavaScript- Vendors of JavaScript Engine adds new API in test mode

- When standard is approved, vendors should remove vendor-specific prefix

webkit moz Without prefix

Chrome(blink,webkit)Safari (webkit)Opera (blink)iOS Safari (webkit)etc…

Firefox (Gecko)Konqueror(Gecko)Mobile firefox (Gecko)etc…

Spelling of propertyBy standards

- Prefixes of JS API looks like a Render Engine prefixed

msInternet Explorer

Samples of correctly wrote JavaScript…var element = document.getElementsByTagName(‘video’)[0];

function GetAvarageBrowserSpecificConstructors {

var constructors = {}; constructors.audio = window.AudioContext||window.webkitAudioContext; constructors.fullScreen = element.requestFullscreen || element.webkitRequestFullscreen || element.msRequestFullscreen; constructors.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; return constructors;}

InfoHints:- Duplicate vendor-specific properties for all vendors each time.- Check standards about API

Hints- Do not use Flash- Shumway (http://mozilla.github.io/shumway/) Flash –> Html5- http://caniuse.com- Prefix Free- Polyfill JS (Pointer Events)- Video.js (video element for old browsers)- Chrome Frame- Use modern frameworks, which works in all browsers (jQuery, underscore, kinetic, iScroll etc)