1. Cross Web Browser Development Jenny Kim

2. 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

3. Intro – Why does it matter? So many browsers and devices now

4. Cause – what makes difference? Browser engine Web technology support – HTML5 – Plugins – JavaScript – CSS Browser versions Hardware / Screen size

5. Cause – Web browser engines EngineBrowsers WebKitSafari Chrome GeckoMozilla Firefox TridentInternet Explorer PrestoOpera

6. Cause – Web browser engines Different HTML5 support BrowserHTML5 Test Points Apple Safari 6.0378/500 (+8) Google Chrome 26468/500 (+13) Internet Explorer 10320/500 (+6) Maxthon 4.0464/500 (+15) Mozilla Firefox 20394/500 (+10) Opera 12.10419/500 (+9)

7. Cause – Web browser engines Different JavaScript Support Browser JavaS cript ECMA Script 3 DOM 1DOM 2DOM 3XPath DHTM L XMLHt tpReq uest Rich editing ChromeYes PartialYes IEYes PartialYes IE(Mac)Yes PartialNo YesNo FirefoxYes PartialYes OperaYes PartialYes SafariYes Partial Yes

8. Cause – Web browser engines Different CSS support – CSS2 `TridentGeckoWebKit KHTMLPrestoPrince XML CSS2 !important Weight increasing 7.01.085Yes1.0Yes /*Commen t*/ Comments3.01.085Yes1.0Yes @import Import stylesheet 8.01.0Yes 1.02.1 @charset Character set 5.51.0Yes4.2.31.0Yes @media Media- specific rules 5.51.0Yes 1.05.1 @page For paged media 8.019.0 Nightly Build No1.06.0

9. Cause – Web browser engines TridentGeckoWebKit KHTMLPrestoPrince XML CSS3 @namesp ace Namespa ce declaratio n 9.01.0Yes 1.05.0 @docum ent Restrictio n by URLs No6.0No @keyfra mes Animatio n key 10.016.0 Experime ntal No2.12No @font- face Define font 9.01.9.15254.32.26.0 @support s Condition al Rules No17.0 Nightly build No2.12No @phoneti c- alphabet Phonetic pronuncia tion No @region Region flow segment No Nightly build No

10. Solution – How to solve it? How to solve it? – What tools to check compatibility? – What ways to prevent conflicts?

11. Solution – Check compatibility Tools introduction – Cross Browser Testing Cross Browser Testing – MS modern.IE MS modern.IE – Google Browser Compatibility Detector Google Browser Compatibility Detector – Markup Validation Service Markup Validation Service – CSS Validation Service CSS Validation Service

12. Solution – Check compatibility Cross Browser Testing

13. Solution – Check compatibility MS modern.IE

14. Solution – Check compatibility Google Browser Compatibility Detector

15. Solution – Check compatibility Markup Validation Service

16. Solution – Check compatibility CSS Validation Service

17. Solution – Follow web standards Check web standard

18. Solution – Prevent possible conflicts Reset CSS html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,bl ockquote,fieldset,input,hr {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,str ong,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;}

19. Solution – Prevent possible conflicts Internet Explorer conditionnal comments.class { width:200px; /* All browsers */ *width:250px; /* IE */ _width:300px; /* IE6 */.width:200px; /* IE7 */ }

20. 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 {} }

21. Solution – Tips Avoid complexity Inclusion of DOCTYPE Choose target browsers Code validation Web Analytics

22. 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

23. Q/A