Cross Web Browser Development
description
Transcript of Cross Web Browser Development
Cross Web Browser Development
Jenny Kim
Cross Web Browser Development
• Intro - Why does it matter? • Cause – What makes the difference? • Solution – How to solve it?– Using compatibility checking tools – Prevent possible conflicts
• Wrap up
Intro – Why does it matter?
• So many browsers and devices now
Cause – what makes difference?
• Browser engine• Web technology support– HTML5 – Plugins– JavaScript – CSS
• Browser versions• Hardware / Screen size
Cause – Web browser enginesEngine BrowsersWebKit Safari
ChromeGecko Mozilla
FirefoxTrident Internet ExplorerPresto Opera
Cause – Web browser engines• Different HTML5 support
Browser HTML5 Test Points
Apple Safari 6.0 378/500 (+8)
Google Chrome 26 468/500 (+13)
Internet Explorer 10 320/500 (+6)
Maxthon 4.0 464/500 (+15)
Mozilla Firefox 20 394/500 (+10)
Opera 12.10 419/500 (+9)
Cause – Web browser engines• Different JavaScript Support
Browser JavaScript
ECMAScript
3DOM 1 DOM 2 DOM 3 XPath DHTM
LXMLHttpReq
uestRich
editing
Chrome Yes Yes Yes Yes Partial Yes Yes Yes Yes
IE Yes Yes Yes Yes Partial Yes Yes Yes Yes
IE(Mac) Yes Yes Partial No No No Yes No No
Firefox Yes Yes Yes Yes Partial Yes Yes Yes Yes
Opera Yes Yes Yes Yes Partial Yes Yes Yes Yes
Safari Yes Yes Yes Yes Partial Yes Yes Yes Yes
Cause – Web browser engines• Different CSS support – CSS2
` Trident Gecko WebKit KHTML Presto Prince XML
CSS2
!important Weight increasing 7.0 1.0 85 Yes 1.0 Yes
/*Comment
*/Comments 3.0 1.0 85 Yes 1.0 Yes
@import Import stylesheet 8.0 1.0 Yes Yes 1.0 2.1
@charset Character set 5.5 1.0 Yes 4.2.3 1.0 Yes
@mediaMedia-specific rules
5.5 1.0 Yes Yes 1.0 5.1
@page For paged media 8.0 19.0 Nightly
Build No 1.0 6.0
Cause – Web browser enginesTrident Gecko WebKit KHTML Presto Prince
XML
CSS3
@namespace
Namespace declaration
9.0 1.0 Yes Yes 1.0 5.0
@document
Restriction by URLs No 6.0 No No No No
@keyframes
Animation key 10.0 16.0 Experime
ntal No 2.12 No
@font-face
Define font 9.0 1.9.1 525 4.3 2.2 6.0
@supports
Conditional Rules No 17.0 Nightly
build No 2.12 No
@phonetic-
alphabet
Phonetic pronunciation
No No No No No No
@regionRegion flow segment
No No Nightly build No No No
Solution – How to solve it?
• How to solve it? – What tools to check compatibility?– What ways to prevent conflicts?
Solution – Check compatibility
• Tools introduction– Cross Browser Testing– MS modern.IE – Google Browser Compatibility Detector– Markup Validation Service– CSS Validation Service
Solution – Check compatibility• Cross Browser Testing
Solution – Check compatibility• MS modern.IE
Solution – Check compatibility• Google Browser Compatibility Detector
Solution – Check compatibility• Markup Validation Service
Solution – Check compatibility• CSS Validation Service
Solution – Follow web standards• Check web standard
Solution – Prevent possible conflicts
• Reset CSShtml,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;} ul,ol {list-style:none;} fieldset,img,hr {border:none;} caption,th {text-align:left;} table {border-collapse:collapse; border-spacing:0;} td {vertical-align:top;}
Solution – Prevent possible conflicts
• Internet Explorer conditionnal comments<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if IE6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
.class { width:200px; /* All browsers */ *width:250px; /* IE */ _width:300px; /* IE6 */ .width:200px; /* IE7 */ }
Solution – Prevent possible conflicts
• Targeting Google Chrome only
• Targeting Safari only
• Targeting Opera only
body:nth-of-type(1) p{ color: #333333; }
html:lang(en)>body .classname {}
@media all and (min-width: 0px){ .classname {} }
Solution – Tips
• Avoid complexity• Inclusion of DOCTYPE• Choose target browsers • Code validation• Web Analytics
Wrap Up
• Intro – Cross browser compatibility is getting important
• Cause – Different browser engines and supports • Solution – Check compatibility with multiple browsers – Follow web standard and remove possible dangers
Q/A