Sun, 22 Aug 2010

'=' vs ':' in Internet Explorer's filter-declaration

Too much time on my hands


While enjoying the limitations of CSS in regards to styling a file-input element and its required workarounds, I had to take a closer look at setting the opacity of an HTML element. Well, I didn’t have to, but I did so nonetheless.

Setting Opacity

To change the opacity in a CSS-standard-conform way, one has to use opacity: 0.5 (for an opacity of 50%). Unfortunately that is not supported by Internet Explorer prior to version 9. Instead the use of a proprietary declaration is required: filter:alpha(opacity=50).

Note that IE 8 also supports the correctly prefixed -ms-filter-syntax1. But as IE 9 already supports opacity and you need to use filter for IE <8 anyway, it’s a nice move on Microsoft’s part, but a little too late. (For the needs of this opacity-related writing, at least.) Oh, and as a quick note: alpha is actually only a short-hand for: progid:DXImageTransform.Microsoft.Alpha(sProperties)2

The Problem

The thing is, that = doesn’t look very CSS-y, thus it is sometimes written as filter:alpha(opacity:50). And while most browsers just ignore (recover from) this declaration and Internet Explorer even interprets it correctly, there is still a problem with using :.

According to the CSS specification:

A declaration is either empty or consists of a property name, followed by a colon (:), followed by a value.3

So filter is the property-name, followed by : and alpha(opacity=50) is the value.

Looking at the available types of values4 it is definitely an Unsupported Value. And while the specification explicitly allows : inside the value5 it’s rare outside of quotes or parentheses (as they are used by url()). So it’s not hard to imagine how some parsers out in the wild may handle an unquoted : inside the value.

Microsoft even changed the documentation, pointing out that the whole -ms-filter-value should be quoted.

When using -ms-filter, enclose the progid in single quotes (') or double quotes (").6

So let’s look at an example and throw it at the W3C CSS Validation Service.

Using =

Consider the following CSS declaration:

#test {
  filter:alpha(opacity=50);
  font-size:20px;
}

While the filter-declaration results in an error, the remaining CSS is still parsed correctly.

Using :

Lets change opacity=50 to opacity:50 and see what the parser comes up with, this time. Just to make sure we are on the same page:

#test {
  filter:alpha(opacity:50);
  font-size:20px;
}

This time it is not only the filter-declaration that is considered to be erroneous but the parser isn’t able to recover and interpret the remaining CSS correctly. Bad.

Conclusion

Use = in alpha(opacity=50).

Despite the CSS specification explicitly allowing a colon inside the value, even the W3C CSS Validator has problems with such a construct. And while I don’t think the Validator is badly programmed, I’m sure there are numerous CSS-parsers out there that don’t even come close to its level of error handling. So using : in alpha(opacity:50) just begs for problems.


  1. http://msdn.microsoft.com/en-us/library/ms530752(VS.85).aspx ↩︎

  2. http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx ↩︎

  3. http://www.w3.org/TR/CSS2/syndata.html#declaration ↩︎

  4. http://www.w3.org/TR/CSS2/syndata.html#values ↩︎

  5. http://www.w3.org/TR/CSS2/syndata.html#tokenization ↩︎

  6. http://msdn.microsoft.com/en-us/library/ms530752(VS.85).aspx ↩︎


Enable Javascript to see comments