This document discusses cross-browser web development and provides examples of how to write CSS and JavaScript that is compatible across different browsers. It explains that browser engines add new features with vendor prefixes before standards are approved, and these should be removed when standards are adopted. It provides code samples showing how to write CSS and JavaScript using vendor prefixes for various browsers to ensure compatibility, as well as tips for cross-browser development such as checking standards, using polyfills and frameworks, and avoiding Flash.

1. Cross-browser web
development
Ilya Starostin
Software Engineer

2. Introducing
… && ???

3. Browser engine structure
User 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

4. Samples
Browser Engine Chromium - Mozilla/Firefox/
Gecko
(haven’t conventional name)
Chromium
Rendering Engine Version <28:
webkit
Version >28:
Blink (just updated
webkit)
webkit Gecko Blink (just updated
webkit)
Java Script engine V8 Nitro SpiderMonkey V8

5. 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 property
By standerds
- Using of different vendor-specific properties in the same CSS class shouldn’t break your styles

6. 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)

7. 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 property
By standards
- Prefixes of JS API looks like a Render Engine prefixed
ms
Internet Explorer

8. 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;
}

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

10. 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)