CSS3 Graceful Degradation on IE9

Question

I'm working through CSS3 for Web Designers by Dan Cederholm.

I'm in a corporate environment and certainly have to consider browsers at least back to IE7 (if not IE6! - eek!).

I'm working through the Navigating the Moon example (beginning on page 36).

The author is talking about using fallback values in your CSS to gracefully degrade.

So far so good. I'm on board and just want to give it a shot.

The problem is that when I'm going through the example on IE 9, I'm getting some weird results.

Here's the content of the <body> tag for my page:

<ul id='nav'>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

As you can see, it's really basic.

Here's the CSS I'm trying to use:

body {
  background: #000;
}
ul#nav {
  float: right;
  padding: 42px 0 0 30px;
}
ul#nav li {
  float: left;
  margin: 0 0 0 5px;
}
ul#nav li a {
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  color: #cccccc;
  color: rgba(255, 255, 255, 0.7);
}

When I view the page in Safari, all is well and the CSS shows correctly (as expected). When I view this page in IE 9, the links are the normal "HyperLink" blue (like it's just ignoring both color instructions). If I remove the "rgba" line from my CSS, the links show up in #cccccc . If I replace the "rgba" line with color: #000000 , the links disappear (as expected, since the body is also #000000 ).

Based on what the author has written, I thought that placing the second line would work in browsers that support the "rgba" standard and just be ignored by those that don't.

Have I missed something?

Answer 1

The code posted seems to cause the phenomenon described, but only in Quirks Mode. If the page needs to work in Quirks Mode, then I'm afraid you need to consider clumsy workarounds like using “conditional IE comments” with a copy of the fallback code, presented after the basic style sheet so that this overrides the relevant setting there (on IE less than 9). Example;

<style>
/* the basic style sheet here */
</style>
<!--[if IE lt 9]>
ul#nav li a {
  color: #cccccc;
}
<![endif]-->

EDIT: It seems that in Quirks Mode, IE generally behaves so that a declaration with unrecognized value causes even a previously set value to be dropped. Eg h1 { color: red; color: nonsense } h1 { color: red; color: nonsense } leaves h1 to its default color, not red. But this only applies within a CSS rule. If you put the declarations to separate rules, the problem disappears.

So here, for example, you could just divide the rule for ul#nav li a into two parts:

ul#nav li a {
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  color: #cccccc;
}
ul#nav li a {
  color: rgba(255, 255, 255, 0.7);
}

CSS3 Graceful Degradation on IE9

Question

1 answers

solution1
3 ACCPTED 2012-09-03 05:31:53

CSS3 Graceful Degradation on IE9

Question

1 answers

solution1 3 ACCPTED 2012-09-03 05:31:53

solution1
3 ACCPTED 2012-09-03 05:31:53