as days pass by, by Stuart Langridge

Simon has put together a semi-solution for IE’s failure to obey the CSS quotes declaration. He goes on to note a couple of problems with his solution:

There are two main disadvantages to this solution: It introduces an invalid property to your CSS, and it could result in duplicated quotes in IE 7 should that browser finally fix the lack of quote element support.

Both of these are, I think, soluble. Obviously, the first, invalid CSS, would be simply solved by not using MS-proprietary IE DHTML behaviours. You know it makes sense.

The second is a little more complex and requires a bit of guesswork on my part. It is possible in both Mozilla and IE to (at least theoretically) get the computed style for an element from JavaScript. This computed style dictates how the element is actually being displayed, covering all style declarations that apply to it (from external and internal stylesheets, inline style, and JavaScript changes); the more familiar element.style collection only covers the latter two. Moz does it the standards-compliant way, using document.defaultView.getComputedStyle(element,'') to get the computed style for element, but it’s somewhat ropey in terms of how well it actually works. IE uses a proprietary element.currentStyle collection. So, using one of these, we can see the full computed style for the element. Now (and this is where the guesswork bit comes into play), I have assumed that IE’s complete lack of support means that it will not include quotes in the computed style of an object, even if a quotes attribute is applied in the CSS, and indeed this does turn out to be so. I’ve also assumed that, should IE7 change to support this CSS declaration, they’ll make its value settable from JavaScript, which would mean adding it to currentStyle for an element. So, if we get the computed style for an element with quotes applied, and it does reflect your application of the quotes directive, we assume that the browser handles it and leave it alone. If, however, you apply quotes to an element and that application is not reflected in the computed style, we assume that the browser doesn’t understand it, and we can then go on to manually apply quotes as Simon’s code does.

How do we check for quotes showing up in the computed style? Like so:

quotesElements = document.getElementsByTagName("q");
if (quotesElements.length > 0) {
  q=quotesElements[0];

  if (q.currentStyle) {
    s = q.currentStyle;
  } else if (document.defaultView &&
document.defaultView.getComputedStyle) {
    s = document.defaultView.getComputedStyle(q,'');
  }
  supportsQuotes = false;
  for (prop in s) {
    if (prop.toLowerCase() == 'quotes') {
      supportsQuotes = true;
      break;
    }
  }
  if (supportsQuotes) {
    alert("Supports quotes declaration");
  } else {
    alert("Does not support quotes declaration");
  }
}

This code checks for a quotes declaration in the computed style of your first <Q> element.

This entry was posted on Thursday, April 3rd, 2003 at 12:00 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.