Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,773 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

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!

×