![Conditional Comments
<![if IE 6]>
Special instructions for IE 6 here
<![endif]>
Image by Brenda Starr
8](https://image.slidesharecdn.com/vadimmirgorod-bestpracticesforcross-browsercompatibilityofdrupalwebsite-drupalcampkyiv2011-110615111902-phpapp01/85/Vadim-Mirgorod-Best-practices-for-cross-browser-compatibility-of-drupal-website-DrupalCamp-Kyiv-2011-8-320.jpg)
![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](https://image.slidesharecdn.com/vadimmirgorod-bestpracticesforcross-browsercompatibilityofdrupalwebsite-drupalcampkyiv2011-110615111902-phpapp01/85/Vadim-Mirgorod-Best-practices-for-cross-browser-compatibility-of-drupal-website-DrupalCamp-Kyiv-2011-9-320.jpg)
![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 nonIE</h1>
<!<![endif]>
<![if IE 6]>Instructions for IE6<!>
Instructions for IE6 and nonIE
<!<![endif]>
10](https://image.slidesharecdn.com/vadimmirgorod-bestpracticesforcross-browsercompatibilityofdrupalwebsite-drupalcampkyiv2011-110615111902-phpapp01/85/Vadim-Mirgorod-Best-practices-for-cross-browser-compatibility-of-drupal-website-DrupalCamp-Kyiv-2011-10-320.jpg)
![Conditional Stylesheets
(D6 and D7)
you_theme.info:
; Set the conditional stylesheets that are processed by IE.
stylesheetsconditional[lt IE 7][all][] = ie6andbelow.css
stylesheetsconditional[IE 9][all][] = ie9.css
stylesheetsconditional[IE][print][] = ieprint.css
http://drupal.org/project/conditional_styles
21](https://image.slidesharecdn.com/vadimmirgorod-bestpracticesforcross-browsercompatibilityofdrupalwebsite-drupalcampkyiv2011-110615111902-phpapp01/85/Vadim-Mirgorod-Best-practices-for-cross-browser-compatibility-of-drupal-website-DrupalCamp-Kyiv-2011-21-320.jpg)
Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011
- 1. Best practices for cross- browser compatibility of Drupal website Vadim Mirgorod @dealancer [email protected] 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 – borderradius for Webkit and Opera – mozborderradius 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 nonIE</h1> <!<![endif]> <![if IE 6]>Instructions for IE6<!> Instructions for IE6 and nonIE <!<![endif]> 10
- 11. Conditional Comments in Drupal 3 Paths Image by Ryan B Schultz 11
- 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
- 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. stylesheetsconditional[lt IE 7][all][] = ie6andbelow.css stylesheetsconditional[IE 9][all][] = ie9.css stylesheetsconditional[IE][print][] = ieprint.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