Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cross Web Browser Development Jenny Kim. Cross Web Browser Development Intro - Why does it matter? Cause – What makes the difference? Solution – How to.

Similar presentations


Presentation on theme: "Cross Web Browser Development Jenny Kim. Cross Web Browser Development Intro - Why does it matter? Cause – What makes the difference? Solution – How to."— Presentation transcript:

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 /500 (+8) Google Chrome 26468/500 (+13) Internet Explorer 10320/500 (+6) Maxthon /500 (+15) Mozilla Firefox 20394/500 (+10) Opera /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 Yes1.0Yes /*Commen t*/ Import stylesheet Yes Character set Media- specific rules Yes For paged media Nightly Build No1.06.0

9 Cause – Web browser engines TridentGeckoWebKit KHTMLPrestoPrince XML ace Namespa ce declaratio n Yes ent Restrictio n by URLs mes Animatio n key Experime ntal face Define font s Condition al Rules No17.0 Nightly build c- alphabet Phonetic pronuncia tion 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 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


Download ppt "Cross Web Browser Development Jenny Kim. Cross Web Browser Development Intro - Why does it matter? Cause – What makes the difference? Solution – How to."

Similar presentations


Ads by Google