CSS3 in All Browsers – Rounded Corners, Drop Shadows, Glows and Gradients

CSS3 supports a bunch of nice new CSS features, including rounded corners, drop shadows, glows, and gradients. However, different CSS vendors will use different prefixes to standard CSS3 features while still in an ‘experimental’ stage. This means you need multiple lines to accomplish the one CSS feature, to target all the different browsers. Below is a bunch of CSS that will give you these CSS features in as many browsers as possible (yes, including older versions of IE).


IE Only Stylesheets and CSS

Targeting IE with specific CSS, is always a awful task, however I thought I’d cover the two basic ways to do it: in HTML using conditional CSS and in stylesheets using hacks.

Conditional CSS

Conditional CSS lets you include a specific IE only stylesheet on your HTML page. It is the preferred way of having targeted IE specific CSS and is guaranteed to work with future version of IE, something that cannot be said for the hacks.

You can target:

  • A specific version <!--[if IE 6]>
  • All version below a specific version <!--[if lt IE 6]>
  • All versions above a specific version <!--[if gt 6]>
  • All version below or equal to a specific version <!--[if lte IE 6]>
  • All version above or equal to a specific version <!--[if gte IE 6]>

Let’s look at including a stylesheet only for IE6 in the <head> element.

  • Option A – Using the style block
    <!--[if IE 6]>
    	/* Magical IE 6 CSS goes here */
    	background-color: red;
  • Option B – Including a Stylesheet
    <!--[if IE 6]>
    	<link href="ie6.css" rel="stylesheet" type="text/css"/>

In Stylesheet Hacks

In Stylesheet hacks work within a CSS file. They let you target a specific block of styling, or a specific line in your file.

Line Hacks

Line hacks allow you to target versions of IE with a single link of CSS.

  • IE 8 only
    background-color: red\0/;
  • IE 8 and below
    background-color: red\9;
  • IE 7 and below
    *background-color: red;
  • IE 6 only
    _background-color: red;

Block Hacks

Block hacks let you use the element selectors to target versions of IE. Obviously this lets you target multiple lines all at once

  • IE-7 only
    *+html #div { 
    	background-color: red;
  • IE 6 only

    * html #div { 
    	background-color: red;