DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal website
•Download as PPT, PDF•
0 likes•2,533 views
![Usage share of web browsers: January 2011 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal website
Similar to DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal website (20)
Recently uploaded
Recently uploaded (20)
DrupalCon Chicago - Best practices for cross-browser compatibility of Drupal website
- 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
- 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.
- 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!