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

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

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

25. IE Tester

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

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