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