Download - Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011
![Page 1: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/1.jpg)
Best practices for cross-browser compatibility of Drupal website
Vadim Mirgorod
@dealancer
http://vmirgorod.name
![Page 2: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/2.jpg)
03/01/11
Gold Sponsor ofDrupalCamp Kyiv 2011
![Page 3: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/3.jpg)
03/01/11
Silver Sponsors ofDrupalCamp Kyiv 2011
![Page 4: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/4.jpg)
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
![Page 5: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/5.jpg)
5
Top 12 browsers by StatCounter: May 2011
Source: http://gs.statcounter.com/#browser_version-ww-monthly-201105-201105-bar
← IE 7.0
← IE 6.0
![Page 6: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/6.jpg)
6
Drupal theming observations
• Modern browsers• IE 6 and IE 7• Opera• Fonts• Drupal core CSS• Fixed-width layout
![Page 7: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/7.jpg)
7
Drupal theming suggestions
• float: left instead of display: inlineblock
• 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
![Page 8: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/8.jpg)
8
Conditional Comments
<![if IE 6]>
Special instructions for IE 6 here
<![endif]>
Image by Brenda Starr
![Page 9: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/9.jpg)
9
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
![Page 10: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/10.jpg)
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]>
![Page 11: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/11.jpg)
11
Conditional Comments in Conditional Comments in DrupalDrupal
3 Paths3 PathsImage by Image by Ryan B SchultzRyan B Schultz
![Page 12: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/12.jpg)
12
Padawan Path:sites/all/themes/your_theme/page.tpl.php
![Page 13: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/13.jpg)
13
Jedi Knight Path:sites/all/themes/your_theme/template.php
![Page 14: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/14.jpg)
14
Jedi Master Path (D7):sites/all/themes/your_theme/template.php
See drupal_pre_render_conditional_comments()
![Page 15: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/15.jpg)
15
CSS HacksCSS Hacks
Image by Image by LincolnianLincolnian
![Page 16: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/16.jpg)
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.
![Page 17: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/17.jpg)
17
CSS Hacks Examples
![Page 18: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/18.jpg)
18
JavaScript Trick
Image by Image by Jenn and TonyJenn and Tony
![Page 19: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/19.jpg)
19
JavaScript Tricktheme.js:
opera.css:
![Page 20: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/20.jpg)
20
Useful modules for cross- browser compatibility
![Page 21: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/21.jpg)
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
![Page 22: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/22.jpg)
22
Conditional CSS Integration(D6)
http://drupal.org/project/conditional_css
![Page 23: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/23.jpg)
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
![Page 24: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/24.jpg)
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
![Page 26: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/26.jpg)
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/
![Page 27: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/27.jpg)
27
IE Tester
![Page 28: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/28.jpg)
28
Web Services
• http://browserlab.adobe.com/
• http://ipinfo.info/netrenderer/• http://www.webdevlab.com/• Many others
![Page 29: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/29.jpg)
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/
![Page 30: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/30.jpg)
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...
![Page 31: Vadim Mirgorod.Best practices for cross browser compatibility of drupal website.DrupalCamp Kyiv 2011](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54922d59b479599d2d8b5457/html5/thumbnails/31.jpg)
31
Browser Tools
• Firebug for Firefox• Firebug Light• Internet Explorer Developer Tools• Webkit Web Inspector