Why am I talking about HTML elements appearance? Well, imagine you want to clone an HTML element not only with its content and child nodes, but also with its appearance. To match the original element, every single style property, which applies on it, has to be copied to the clone.
Now that we know so much about computed styles, it should be no problem to get it done, right? Well, this task is not as easy as it first seems.

Stumbling block no 1: background-color

When an element has no background color, its computed value of background-color is transparent. So far so well, this makes sense, as this information is used by the browsers rendering engine.
To get the visible color for this property, you have to walk through the element's parent elements and fetch the first background color value that contains an usable color value.

Stumbling block no 2: text-decoration

A real head-scratcher for me was the text-decoration property. The value of this property is not inherited, but it's child elements are rendered, as if it were so!

»This property is not inherited, but descendant boxes of a block box should be formatted with the same decoration (e.g., they should all be underlined).«
CSS2 Specification

So all child elements inside an element with a text-decoration style property it will return none for text-decoration — even if you can see their text-decoration. As the property is not being inherited it also is not overwritten and an elements can be rendered with several different text-decoration values.

 
<span style="text-decoration:underline;">Oh
  <span style="text-decoration:overline;">noes!
    <span style="text-decoration:blink;">Teh
      <span style="text-decoration:line-through;">
      blink
      </span>
      tag
    </span>
    is
  </span>
  back!
</span>
 

Oh noes! Teh blink tag is back!

Note that not all browser support the blink value. Luckily... ;-)

I wonder why the specification is that way. Is there some reason for that? I am not aware of any other property that behaves like this.

To retrieve the rendered value, you have to walk through the element's parent elements, as you have to do for the background-color. When the parents have more than one different text-decoration value, it is not possible to clone the element's appearance without adding some extra elements around it.

Stumbling block no 3: text-decoration color

And as if that were not enough trouble with the text-decoration, here is one more thing:

»The color(s) required for the text decoration should be derived from the 'color' property value. [..] The color of decorations should remain the same even if descendant elements have different 'color' values.«
CSS2 Specification

 
<span style="text-decoration:underline;color:red;">lorem
  <span style="text-decoration:overline;color:green;">ipsum
    <span style="text-decoration:line-through;color:blue;">
      dolor
    </span>
    sit
  </span>
  <span style="color:purple;">
    amet
  </span>
</span>
 

lorem ipsum dolor sit amet

The completely match the element's style, you have to add one parent element for each different text-decoration property that also contains a color style property whose color will be applied on the text-decoration line.

The quote

If you are wondering about the quote in title: this is the first line from the Book of the Blind which appears in Blizzard's great game Diablo. I played it for ages when I was younger. :-)
When I realized that I could see a property, that is not visible to JavaScript (at first glance), this poem was brought back to my mind. Here it is, at full length:

I can see what you see not
Vision milky – then eyes rot.

When you turn they will be gone
Whispering their hidden song,

Then you see what can not be –
Shadows move where light should be.

Out of Darkness – out of mind,
Cast down into the Halls of the Blind!

After the last "update" of IE 7 and the questionable communication policy in the IEBlog I am very happy to see that things can change. :-)
Thanks, Mr. Gates for bringing light into the darkness.

Anyway, how can IE 8 render the test correctly? At this moment the test is broken...
Ok, I have just seen their video and I guess they were working with the correct Acid2 test.

<span style="filter:Alpha(opacity=100, style=0)"></span>

and my text just looked blurry.

Text with ClearType enabled

Text without ClearType

The text appears blurry only if ClearType is enabled.

Did your noticed this behavior by yourself? If you have any experiences with the attribute filter in connection with ClearType, please let me know!

While playing with the soft hyphen feature of the latest version of Firefox I remembered that I had seen a nice way to cut off text if it is too long for its containing element. A few years ago I accidentally found an entry in a wiki about a special CSS property which can be used to improve the look of texts inside an element with an overflow:hidden style property.

An example of text-overflow

In Internet Explorer 6.0 (and above) and in Safari 1.3 (and above) you can use text-overflow:ellipsis together with overflow:hidden to get this three dots if text is to long.

Be careful with overflow:auto! It seems a bit buggy in Safari, while it works nearly perfect in Internet Explorer.

Update:
The Opera browser (since version 9.0) supports this property, too. You have to use the proprietary attribute -o-text-overflow and your text will be displayed the same way as in Safari.
I guess once CSS3 goes final, all vendors will use the W3C standard property.