1. Best practices for cross-
browser compatibility of
Drupal website
Vadim Mirgorod
@dealancer
dealancer@gmail.com
http://vmirgorod.name

2. Gold Sponsor of
DrupalCamp Kyiv 2011
03/01/11

3. Silver Sponsors of
DrupalCamp Kyiv 2011
03/01/11

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
4

5. Top 12 browsers by
StatCounter: May 2011
← IE 7.0
← IE 6.0
5
Source: http://gs.statcounter.com/#browser_version-ww-monthly-201105-201105-bar

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

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
7

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

9. Conditional Comments (IE)
Should start with gt – greater then
<!­­[if IE]> lt – lower then
gte – greater then or equal to
<!­­[if IE 5]> lte – lower then or equal to
<!­­[if IE 5.0]>
<!­­[if gte IE 5]>
<!­­[if lt IE 6]>
<!­­[if lte IE 5.5]>
<!­­[if gt IE 6]>
9

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]­­>
10

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

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

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

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

15. CSS Hacks
Image by Lincolnian
15

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

17. CSS Hacks Examples
17

18. JavaScript Trick
Image by Jenn and Tony
18

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

20. Useful modules for cross-
browser compatibility
20

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
21

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

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
23

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
24

25. Testing Tools
Image by tronixstuff
25

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/
26

27. IE Tester
27

28. Web Services
• http://browserlab.adobe.com/
• http://ipinfo.info/netrenderer/
• http://www.webdevlab.com/
• Many others
28

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/
29

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

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

32. Questions?
Feedback
@dealancer
dealancer@gmail.com
http://vmirgorod.name