Best practices for cross-browser compatibility of Drupal website

Vadim Mirgorod

@dealancer

dealancer@gmail.com

http://vmirgorod.name

03/01/11

Gold Sponsor ofDrupalCamp Kyiv 2011

03/01/11

Silver Sponsors ofDrupalCamp Kyiv 2011

4

Usage share of web browsers: March 2011

Internet Explorer (43.2%) Mozilla Firefox (28.6%) Google Chrome (14.6%) Safari (6.3%) Opera (2.6%) Mobile browsers (4.7%)

Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

5

Top 12 browsers by StatCounter: May 2011

Source: http://gs.statcounter.com/#browser_version-ww-monthly-201105-201105-bar

← IE 7.0

← IE 6.0

6

Drupal theming observations

• Modern browsers• IE 6 and IE 7• Opera• Fonts• Drupal core CSS• Fixed-width layout

7

Drupal theming suggestions

• float: left instead of display: inline­block

• PNG for transparent background• Rounded Corners

– border­radius for Webkit and Opera– ­moz­border­radius for Mozilla– Rounded Corners module for IE

• Web safe fonts• Specific styles for different browsers

8

Conditional Comments

<!­­[if IE 6]>

Special instructions for IE 6 here

<![endif]­­>

Image by Brenda Starr

9

Conditional Comments (IE)

Should start with

<!­­[if IE]>

<!­­[if IE 5]>

<!­­[if IE 5.0]>

<!­­[if gte IE 5]>

<!­­[if lt IE 6]>

<!­­[if lte IE 5.5]>

<!­­[if gt IE 6]>

gt – greater thenlt – lower thengte – greater then or equal tolte – lower then or equal to

10

Conditional Comments(non-IE)

<!­­[if !IE]><!­­>

<h1>You are NOT using Internet Explorer</h1>

<!­­<![endif]­­>

<!­­[if IE 6]><!­­>

<h1>You are using EITHER IE 6 OR a non­IE</h1>

<!­­<![endif]­­>

<!­­[if IE 6]>Instructions for IE6<!­­>

Instructions for IE6 and non­IE

<!­­<![endif]­­>

11

Conditional Comments in Conditional Comments in DrupalDrupal

3 Paths3 PathsImage by Image by Ryan B SchultzRyan B Schultz

12

Padawan Path:sites/all/themes/your_theme/page.tpl.php

13

Jedi Knight Path:sites/all/themes/your_theme/template.php

14

Jedi Master Path (D7):sites/all/themes/your_theme/template.php

See drupal_pre_render_conditional_comments()

15

CSS HacksCSS Hacks

Image by Image by LincolnianLincolnian

16

CSS Hacks/Filters

A hack is a method of exploiting the way a web browser parses CSS rules, to control the styles a webpage receives.

‘Control’ includes the ability to hide or change rules based on the browser type and/or version.

17

CSS Hacks Examples

18

JavaScript Trick

Image by Image by Jenn and TonyJenn and Tony

19

JavaScript Tricktheme.js:

opera.css:

20

Useful modules for cross- browser compatibility

21

Conditional Stylesheets(D6 and D7)

you_theme.info:

; Set the conditional stylesheets that are processed by IE.

stylesheets­conditional[lt IE 7][all][] = ie6­and­below.css

stylesheets­conditional[IE 9][all][] = ie9.css

stylesheets­conditional[IE][print][] = ie­print.css

http://drupal.org/project/conditional_styles

22

Conditional CSS Integration(D6)

http://drupal.org/project/conditional_css

23

IE CSS Optimizer(D6)

Solves the Internet Explorer limitation of loading not more than 31 CSS files per HTML page. Provides flexible settings for CSS optimization.

http://drupal.org/project/ie_css_optimizer

24

IE Unlimited CSS Loader(D6)

Does almost the same as IE CSS Optimizer does with a small differences. Have no settings.

Allows for up to 9 additional stylesheets explicitly embedded in page.tpl.php, that the module logic does not know about.

http://drupal.org/project/unlimited_css

25

Testing Tools

Image by tronixstuff

26

Browser compatibility testing software

• Compatibility mode in IE8• IE Tester: http://ietester.com/• MultiplesIEs: http://tredosoft.com/multiple_ie• Multi-Safari:

http://michelf.com/projects/multi-safari/• Mozilla Firefox Collection:

http://mozilla-firefox-collection.en.softonic.com/

27

IE Tester

28

Web Services

• http://browserlab.adobe.com/

• http://ipinfo.info/netrenderer/• http://www.webdevlab.com/• Many others

29

HTML/CSS Validators

Web services:http://validator.w3.org/http://jigsaw.w3.org/css-validator/

Firefox addons:http://users.skynet.be/mgueury/mozilla/

https://addons.mozilla.org/en-US/firefox/addon/css-validator/

30

Virtual Machines

Virtual Machine emulates behavior of PC running Guest OS. VM is executed on top of Host OS or Hypervisor. Several instances of Virtual Machine could work simultaneously.

Software: Oracle VirtualBox, VMWare, Microsoft VirtualPC, etc...

31

Browser Tools

• Firebug for Firefox• Firebug Light• Internet Explorer Developer Tools• Webkit Web Inspector

Questions?

Feedback@dealancerdealancer@gmail.comhttp://vmirgorod.name