Cross-Browser Techniques

Derek Bridge

Department of Computer Science,
University College Cork

Cross-Browser Techniques

Aims:

• to see some of the problems that different browsers cause
• to learn the importance of cross-browser testing for developers of commercial web-sites
• to understand the kinds of cross-browser techniques you can use

Web servers

• Just two main Web servers available:
  • Apache: www.apache.org
  • Microsoft Internet Information Server (IIS): www.iis.net
• Web server stats: www.netcraft.com

Web browsers

• Numerous browsers…and different versions of the same browser

  Browser	Layout engine
  IE	Trident
  Firefox	Gecko
  Opera	Presto
  Chrome	WebKit
  Safari

• Browser stats:
  • marketshare.hitslink.com
  • gs.statcounter.com

Cross-browser compatibility

• Is your Web site usable irrespective of which browsers and browser versions your visitors use?
• It doesn't have to look the same in every browser. But it should still be usable
• Find out which browsers your visitors use by analyzing your Web server log files

Cross-browser testing

• Test your web site using different browsers —the ones your visitors use
• Browsers are often operating system-specific
• To install multiple browsers, you'll need multiple operating systems
• How?
  • Keep some old computers around
  • Use dual-booting
  • Run an emulator or virtual machine
  • Use a cross-browser testing service, e.g.
    • crossbrowsertesting.com
    • www.browsercam.com
    • browsershots.org (broken?)
    • spoon.net/Browsers

Cross-browser compatibility: modern browsers

• Modern browsers tend to be much more standards-compliant
  • Makes life easier for you
  • But there can still be differences, e.g. differences in the default stylesheet
  • And there is widely different support for CSS3: CSS3 Browser Support Checklist

Cross-Browser Techniques

• One way to start from a level playing field from a CSS point of view is to use a reset stylesheet
• E.g. this one by CSS guru Eric Meyer
• A recent alternative is normalize.css —rather than resetting, it tries to set properties that are inconsistent. (It doesn't validate —never mind!)

HTML5's new elements

• Old browsers don't understand HTML5's new tags
• But neither do they complain if you use them
• To get older browsers to treat these elements as modern browsers do, put the following into your stylesheet:

  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section 
  {
      display: block;
  }
  

• This is in Meyer's reset stylesheet and in normalize.css

CSS3

• Browsers ignore CSS that they can't understand
• E.g. border-radius is CSS3

  p
  {
  	border-style: 1px solid blue;
  	border-radius: 15px;
  }

  …if a user's browser doesn't support border-radius, it ignores it —they'll see square corners

Vendor-specific prefixes

• Responsible browser vendors have decided that, until each part of CSS3 is finalized, if their browser has experimental support for a new CSS property, they will allow you to use that property but with a vendor-specific prefix
• The prefixes depend on which layout engine is part of the browser

  Layout engine	Browsers	Prefix
  Gecko	Firefox	-moz-
  WebKit	Chrome, Safari, iPhone & Android	-webkit-
  Presto	Opera, Opera Mini	-o-
  Trident	IE	-ms-
  KHTML	Konqueror	-khtml-

Rounded corners with vendor-specific prefixes

• Write this:

  p
  {
  	border-style: 1px solid blue;
  	-moz-border-radius: 15px;
  	-webkit-border-radius: 15px;
  	border-radius: 15px;
  }

• This has a declaration for Firefox 3.6 and earlier, another for Safari 4 and earlier and one (the CSS3 standard) for later versions of Firefox and Safari, for Opera 10.53+, for IE9+ and all versions of Chrome
• So browsers will either understand one of these and ignore the rest, or will understand none of them (hence will show square corners)

Vendor-specific prefixes are a good thing!

• While we are in transition, prefixes make pages longer and repetitive
• But they safeguard against bugs or cases where the vendor guesses incorrectly what property CSS3 will use and how it will work
• Consider this:

  p 
  {
      border-style: 1px solid blue;
      -moz-border-radius-topright: 24px;
      -moz-border-radius-topleft: 24px;
      -webkit-border-top-right-radius: 24px;
      -webkit-border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      border-top-left-radius: 24px;
  }         

  What do you notice?
• (But the prefixes mean your stylesheet won't validate —never mind!)

Cross-browser compatibility: older browsers

• Older browser versions:
  • No support for HTML5 or CSS3
  • Lots more differences in default stylesheets, e.g. padding or margin for list indentation
  • Several older browser versions have bugs in their handling of CSS

Example: the box model bug in IE5 (and IE6 in quirks mode)

Diagram from Wikipedia

Quick Quiz

• Consider a block-level element whose width, padding, border and margin are set as follows:

  #box
  {
      width : 300px;
      padding : 30px;
      border : 20px;
      margin : 10px;
  }

• What's the total width according to CSS?
• What's the total width according to IE5 5?

Cross-Browser Techniques

• On the Web you'll find many CSS Hacks, e.g.:
  • Tantek Çelik's Box Model Hack
  • Other Box Model Hacks
  (Many of the hacks mean that your stylesheet won't validate —never mind!)
• Perhaps the cleanest solution is conditional comments, which are supported by IE5 onwards, e.g.:

  <link rel="stylesheet" type="text/css" href="styles.css" />
  <!--[if IE 6]> 
      <link rel="stylesheet" type="text/css" href="ie6_only_styles.css" /> 
  <![endif]-->
  		     

Cross-Browser Techniques (kind of)

• You could take a tough line and ignore problematic browsers (if they bring you little traffic):
  • IE6 No More
• Significant milestones:
  • Google Agrees: IE6 Must Die (Jan 2010)
  • YouTube to Drop Support for IE6 Starting Next Month (Feb 2010)
  • Facebook Chat to Drop IE6 Support (Aug 2010)
  • WordPress.com Drops Support for IE6 (May 2011)
  • Microsoft Begs Users to Stop Using IE6" (Mar 2011)

Cross-Browser Techniques

• Even going forward, there will be issues
• E.g. the new way HTML5 to include video is the video tag

  <video src="wedding.webm" controls="controls" preload="preload">
  </video>

  (or preload="none" if you don't want the video loaded when the page loads)
• But there is no single combination of video container formats and codecs that works in all HTML5 browsers
• You need to encode your view more than once and use markup for each one:

  <video controls="controls" preload="preload">
      <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
      <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
  </video>

• Better still, also include markup to play the video as Flash for older browsers (if they have the Flash plug-in) and even to download the video file (if they don't have the plug-in)
• A huge topic! Learn more from Chapter 5 of Mark Pilgrim's Dive into HTML5 book