Cross browser web development
Download as PPTX, PDF0 likes422 views
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.
![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;
}](https://image.slidesharecdn.com/cross-browserwebdevelopment-150417133523-conversion-gate02/85/Cross-browser-web-development-8-320.jpg)
Cross browser web development
- 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)