cross web browser development
DESCRIPTION
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? . - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/1.jpg)
Cross Web Browser Development
Jenny Kim
![Page 2: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/2.jpg)
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
![Page 3: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/3.jpg)
Intro – Why does it matter?
• So many browsers and devices now
![Page 4: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/4.jpg)
Cause – what makes difference?
• Browser engine• Web technology support– HTML5 – Plugins– JavaScript – CSS
• Browser versions• Hardware / Screen size
![Page 5: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/5.jpg)
Cause – Web browser enginesEngine BrowsersWebKit Safari
ChromeGecko Mozilla
FirefoxTrident Internet ExplorerPresto Opera
![Page 6: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/6.jpg)
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)
![Page 7: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/7.jpg)
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
![Page 8: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/8.jpg)
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
![Page 9: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/9.jpg)
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
![Page 10: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/10.jpg)
Solution – How to solve it?
• How to solve it? – What tools to check compatibility?– What ways to prevent conflicts?
![Page 11: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/11.jpg)
Solution – Check compatibility
• Tools introduction– Cross Browser Testing– MS modern.IE – Google Browser Compatibility Detector– Markup Validation Service– CSS Validation Service
![Page 13: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/13.jpg)
Solution – Check compatibility• MS modern.IE
![Page 14: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/14.jpg)
Solution – Check compatibility• Google Browser Compatibility Detector
![Page 16: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/16.jpg)
Solution – Check compatibility• CSS Validation Service
![Page 17: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/17.jpg)
Solution – Follow web standards• Check web standard
![Page 18: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/18.jpg)
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;}
![Page 19: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/19.jpg)
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 */ }
![Page 20: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/20.jpg)
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 {} }
![Page 21: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/21.jpg)
Solution – Tips
• Avoid complexity• Inclusion of DOCTYPE• Choose target browsers • Code validation• Web Analytics
![Page 22: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/22.jpg)
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
![Page 23: Cross Web Browser Development](https://reader035.vdocuments.site/reader035/viewer/2022070421/56816345550346895dd3d53b/html5/thumbnails/23.jpg)
Q/A