DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal website


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal website

  1. 1. Best practices for cross-browser compatibility of Drupal website Vadim Mirgorod
  2. 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. 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. 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. 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. 6. Conditional Comments <!-- [if IE 6]> Special instructions for IE 6 here <![endif] --> Image by Brenda Starr
  7. 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. 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. 9. Conditional Comments in Drupal 3 Paths Image by Ryan B Schultz
  10. 10. Padawan Path: sites/all/themes/your_theme/page.tpl.php
  11. 11. Jedi Knight Path: sites/all/themes/your_theme/template.php
  12. 12. Jedi Master Path (D7): sites/all/themes/your_theme/template.php See drupal_pre_render_conditional_comments()
  13. 13. CSS Hacks Image by Lincolnian
  14. 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. 15. CSS Hacks Examples
  16. 16. JavaScript Trick Image by Jenn and Tony
  17. 17. JavaScript Trick theme.js: opera.css:
  18. 18. Useful modules for cross- browser compatibility
  19. 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. 20. Conditional CSS Integration (D6) http://drupal.org/project/conditional_css
  21. 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. 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. 23. Testing Tools Image by tronixstuff
  24. 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. 25. IE Tester
  26. 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. 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. 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. 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. 30. What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!