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

Best practices for cross-browser compatibility of Drupal website Vadim Mirgorod

Usage share of web browsers: January 2011
Internet Explorer (43.8%)
Mozilla Firefox (29.7%)
Google Chrome (13.0%)
Safari (6.1%)
Opera (2.2%)
Mobile browsers (4.3%)
Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

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

Drupal theming observations
Modern browsers
IE 6 and IE 7
Opera
Fonts
Drupal core CSS
Fixed-width layout

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

Conditional Comments  Image by Brenda Starr

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

Conditional Comments (non-IE)  <h1>You are NOT using Internet Explorer</h1>   <h1>You are using EITHER IE 6 OR a non-IE</h1>   Instructions for IE6 and non-IE

Conditional Comments in Drupal 3 Paths Image by Ryan B Schultz

Padawan Path: sites/all/themes/your_theme/page.tpl.php

Jedi Knight Path: sites/all/themes/your_theme/template.php

Jedi Master Path (D7): sites/all/themes/your_theme/template.php See drupal_pre_render_conditional_comments()

CSS Hacks Image by Lincolnian

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.

CSS Hacks Examples

JavaScript Trick Image by Jenn and Tony

JavaScript Trick theme.js: opera.css:

Useful modules for cross- browser compatibility

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

Conditional CSS Integration (D6) http://drupal.org/project/conditional_css

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

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

Testing Tools Image by tronixstuff

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/

IE Tester

Web Services
http://browserlab.adobe.com/
http://ipinfo.info/netrenderer/
http://www.webdevlab.com/
Many others

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/

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...

Browser Tools
Firebug for Firefox
Firebug Light
Internet Explorer Developer Tools
Webkit Web Inspector

What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!

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

by dealancer on Mar 03, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

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