Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011

2,159 views
2,074 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,159
On SlideShare
0
From Embeds
0
Number of Embeds
994
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011

  1. 1. Best practices for cross-browser compatibility ofDrupal websiteVadim Mirgorod@dealancerdealancer@gmail.comhttp://vmirgorod.name
  2. 2. Gold Sponsor of DrupalCamp Kyiv 201103/01/11
  3. 3. Silver Sponsors of DrupalCamp Kyiv 201103/01/11
  4. 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. 5. Top 12 browsers by StatCounter: May 2011 ← IE 7.0 ← IE 6.0 5Source: http://gs.statcounter.com/#browser_version-ww-monthly-201105-201105-bar
  6. 6. Drupal theming observations• Modern browsers• IE 6 and IE 7• Opera• Fonts• Drupal core CSS• Fixed-width layout 6
  7. 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. 8. Conditional Comments<!­­[if IE 6]>Special instructions for IE 6 here<![endif]­­> Image by Brenda Starr 8
  9. 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. 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. 11. Conditional Comments in Drupal 3 Paths Image by Ryan B Schultz 11
  12. 12. Padawan Path:sites/all/themes/your_theme/page.tpl.php 12
  13. 13. Jedi Knight Path:sites/all/themes/your_theme/template.php 13
  14. 14. Jedi Master Path (D7):sites/all/themes/your_theme/template.phpSee drupal_pre_render_conditional_comments() 14
  15. 15. CSS Hacks Image by Lincolnian 15
  16. 16. CSS Hacks/FiltersA hack is a method of exploiting the way aweb browser parses CSS rules, to controlthe styles a webpage receives.‘Control’ includes the ability to hide orchange rules based on the browser typeand/or version. 16
  17. 17. CSS Hacks Examples 17
  18. 18. JavaScript Trick Image by Jenn and Tony 18
  19. 19. JavaScript Tricktheme.js:opera.css: 19
  20. 20. Useful modules for cross- browser compatibility 20
  21. 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.cssstylesheets­conditional[IE 9][all][] = ie9.cssstylesheets­conditional[IE][print][] = ie­print.css http://drupal.org/project/conditional_styles 21
  22. 22. Conditional CSS Integration (D6) http://drupal.org/project/conditional_css 22
  23. 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. 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. 25. Testing Tools Image by tronixstuff 25
  26. 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. 27. IE Tester 27
  28. 28. Web Services• http://browserlab.adobe.com/• http://ipinfo.info/netrenderer/• http://www.webdevlab.com/• Many others 28
  29. 29. HTML/CSS ValidatorsWeb 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. 30. Virtual MachinesVirtual Machine emulates behavior of PCrunning Guest OS. VM is executed on top ofHost OS or Hypervisor. Several instances ofVirtual Machine could work simultaneously.Software: Oracle VirtualBox, VMWare,Microsoft VirtualPC, etc... 30
  31. 31. Browser Tools• Firebug for Firefox• Firebug Light• Internet Explorer Developer Tools• Webkit Web Inspector 31
  32. 32. Questions?Feedback@dealancerdealancer@gmail.comhttp://vmirgorod.name

×