Date post: | 13-Dec-2014 |
Category: |
Education |
Upload: | vadym-myrgorod |
View: | 3,681 times |
Download: | 0 times |
Best practices for cross-browser compatibility of Drupal website
Vadim Mirgorod
2
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
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
Drupal theming observations
• Modern browsers• IE 6 and IE 7• Opera• Fonts• Drupal core CSS• Fixed-width layout
5
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
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 thenlt – lower thengte – greater then or equal tolte – 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 DrupalConditional Comments in Drupal
3 Paths3 PathsImage by Image by Ryan B Schultz
10
Padawan Path:sites/all/themes/your_theme/page.tpl.php
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 HacksCSS Hacks
Image by 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.
15
CSS Hacks Examples
16
JavaScript Trick
Image by Image by Jenn and Tony
17
JavaScript Tricktheme.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
24
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/
25
IE Tester
26
Web Services
• http://browserlab.adobe.com/
• http://ipinfo.info/netrenderer/• http://www.webdevlab.com/• Many others
27
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/
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
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!