Automated Identification of Cross-browser Issues in Web Applications
Cross browser web development
-
Upload
ilya-starostin -
Category
Software
-
view
317 -
download
0
Transcript of Cross browser web development
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)