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 or three main Web servers available:
  • Apache: www.apache.org
  • Microsoft Internet Information Server (IIS): www.iis.net
  • Nginx: wiki.nginx.org
• 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?
• Do web sites have to look the same in every browser?
• But they 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
    • spoon.net/Browsers

Cross-browser compatibility: older browsers

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

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
    • HTML5 Please
    • Can I Use

Reset Stylesheets

• 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 already 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 —users will 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 stylesheets 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!)

Conditional Comments

• Because of the differences, you may have to write different CSS for different browsers
• When the problem lies with IE, one solution is conditional comments in the HTML (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: Hacks

• On the web, you'll find lists of 'hacks' that allow you to include different CSS for different browsers but in a single stylesheet
• E.g. IE6 does not understand child selectors (>), so we can write this:

  p
  {
      ...CSS for IE6 here
  }
  
  html > body p
  {
      ...CSS for other browsers here
  }

Polyfills

• On the web, you'll find bits of JavaScript that will enable old browsers to understand the latest HTML5 and CSS3
• E.g. in HTML5, <ol reversed> should reverse number the items. Most browsers don't do this yet but there is a polyfill that fixes this
• See this list of polyfills

Taking a tough line...

• You could take a tough line and ignore problematic browsers (if they bring you little traffic):
  • E.g. IE6: IE6 No More
  • Subsequently, YouTube droppped IE6 support (Jan 2010), then Facebook Chat (Aug 2010), then WordPress (May 2011),...
  • And then came this
  • Recently, Google decided that Google Apps would not support IE8
• A recently-reported creative solution was probably a publicity stunt

Progressive Enhancement

• Progressive enhancement:
  • Write nice HTML so everyone can access your content
  • Add layers of CSS
    • first simple stuff that every browser will understand
    • then, if needed, more and more layers of fancier stuff (ignored by older browsers)
  • Similarly with any JavaScript that you need
• This way, everyone (no matter how old their browser) will be able to access the content
• (Note the strong similarity with the mobile-first idea)