1.
Best practices for cross-browser compatibility of Drupal website Vadim Mirgorod

2.
Usage share of web browsers: January 2011 <ul><li>Internet Explorer (43.8%) </li></ul><ul><li>Mozilla Firefox (29.7%) </li></ul><ul><li>Google Chrome (13.0%) </li></ul><ul><li>Safari (6.1%) </li></ul><ul><li>Opera (2.2%) </li></ul><ul><li>Mobile browsers (4.3%) </li></ul>Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

3.
Top 12 browsers by StatCounter: January 2011 Source: http://gs.statcounter.com/#browser_version-ww-monthly-201001-201101-bar ← IE 7.0 ← IE 6.0

4.
Drupal theming observations <ul><li>Modern browsers </li></ul><ul><li>IE 6 and IE 7 </li></ul><ul><li>Opera </li></ul><ul><li>Fonts </li></ul><ul><li>Drupal core CSS </li></ul><ul><li>Fixed-width layout </li></ul>

5.
Drupal theming suggestions <ul><li>float: left instead of display: inline-block </li></ul><ul><li>PNG for transparent background </li></ul><ul><li>Rounded Corners </li></ul><ul><ul><li>border-radius for Webkit and Opera </li></ul></ul><ul><ul><li>-moz-border-radius for Mozilla </li></ul></ul><ul><ul><li>Rounded Corners module for IE </li></ul></ul><ul><li>Web safe fonts </li></ul><ul><li>Specific styles for different browsers </li></ul>

6.
Conditional Comments <!-- [if IE 6]> Special instructions for IE 6 here <![endif] --> Image by Brenda Starr

7.
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 then lt – lower then gte – greater then or equal to lte – lower then or equal to

8.
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]-->

9.
Conditional Comments in Drupal 3 Paths Image by Ryan B Schultz

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

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

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

13.
CSS Hacks Image by Lincolnian

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

15.
CSS Hacks Examples

16.
JavaScript Trick Image by Jenn and Tony

17.
JavaScript Trick theme.js: opera.css:

18.
Useful modules for cross- browser compatibility

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

20.
Conditional CSS Integration (D6) http://drupal.org/project/conditional_css

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

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

23.
Testing Tools Image by tronixstuff

24.
Browser compatibility testing software <ul><li>Compatibility mode in IE8 </li></ul><ul><li>IE Tester: http://ietester.com/ </li></ul><ul><li>MultiplesIEs: http://tredosoft.com/multiple_ie </li></ul><ul><li>Multi-Safari: http://michelf.com/projects/multi-safari/ </li></ul><ul><li>Mozilla Firefox Collection: http://mozilla-firefox-collection.en.softonic.com/ </li></ul>

25.
IE Tester

26.
Web Services <ul><li>http://browserlab.adobe.com/ </li></ul><ul><li>http://ipinfo.info/netrenderer/ </li></ul><ul><li>http://www.webdevlab.com/ </li></ul><ul><li>Many others </li></ul>

27.
HTML/CSS Validators <ul><li>Web services: </li></ul><ul><ul><li>http://validator.w3.org/ </li></ul></ul><ul><ul><li>http://jigsaw.w3.org/css-validator/ </li></ul></ul><ul><li>Firefox addons: </li></ul><ul><ul><li>http://users.skynet.be/mgueury/mozilla/ </li></ul></ul><ul><ul><li>https://addons.mozilla.org/en-US/firefox/addon/css-validator/ </li></ul></ul>

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

29.
Browser Tools <ul><li>Firebug for Firefox </li></ul><ul><li>Firebug Light </li></ul><ul><li>Internet Explorer Developer Tools </li></ul><ul><li>Webkit Web Inspector </li></ul>

30.
What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!