erik’s weblog

One of my top feature request for IE8 was for it to support box-sizing. I’m happy to see that IE8 does support box-sizing although it has a annoying quirk. The DOM property name is not correct. The rule for translating CSS property names to DOM property names is to replace a dash followed by a character by the uppercase character. Using JavaScript it can be written like this:

function toCamelCase(s) {
  return s.replace(/\-(\w)/g, function(_, c) {
    return c.toUpperCase();
  });
}

Since the CSS property for box-sizing in IE8 is -ms-box-sizing the DOM property name is should be MsBoxSizing. The -ms- prefix is a defacto standard for non standard CSS properties and Firefox, WebKit and Opera has tons of -moz-, -webkit- and -o- respectively.

We would therefore have to add a browser check in our function above:

function toCamelCase(s) {
  return s.replace(/\-(\w)/g, function(_, c, i) {
    if (MSIE && i == 0) {
      return c;
    }
    return c.toUpperCase();
  });
}

Not only does this require more code it also adds a mental obstacle and one more quirk to add to the already overflowing quirk-filled brains of developers world wide.

The Good

Attribute handling in the DOM is finally working. MS said that this was one of the hardest things to fix and yet they did it.

hashchange events simplify history management. I wish they implemented more of the HTML5 proposals when it comes to history state management but getting an event when the hash changes is so much better than what we have today.

Acid2

querySelector and querySelectorAll… nuf said

JScript is faster. There is a lot of room for improvements but this is a big step in the right direction.

postMessage. Now that all new browsers support it we can finally get rid of all those ugly, complicated and slow cross domain hacks that tons of sites rely on today.

Standard mode as good as possible by default. No need to opt in to get the best possible renderer.

Changes to namespaces in XHTML allowing third party to, in theory, implement binary behaviors for SVG embedded in XHTML.

ARIA support. I remember the hoops we had to go through to get Bindows 508 compliant. If there was only ARIA support back then it would have saved several months worth of frustrating work.

The Bad

VML is not currently supportd in IE8 mode. This would not be so bad if canvas or SVG was supported but today sites have come to rely on being able to use vector graphics in web pages. MS says “Layout and rendering behaviors, proprietary features upon which VML is built, are not yet implemented in IE8 standards mode. Look for this feature in a future beta release.”

No opacity, rgba() nor any rounded corners in sight.

Yet another browser check needed. We used to only need to check the user agent, then we also had to check the document.compatMode and now we have to also check document.documentMode. Would it not have made more sense to just return MSIE7 in the user agent if IE8 is operating in IE7 mode?

No bug fixes to JScript. MS has an excellent paper covering their deviations from ES3 but yet they managed to improve on that situation. MS is waiting in ES3.1 but I think it would have been safe to fix some of these issues already. ES3.1 is on the fast track but I doubt there is room for any differences to what is already available in WebKit, Firefox and Opera today (which have tons of ES3.1 features and bug fixes today).

Still no way to get the computed style.

The Ugly

HTML5, and the W3C Web App group has a proposed standard for doing cross site XHR that is implemented in WebKit, Firefox (and Opera?). Yet, Microsoft introduces XDomainRequest which is very crippled.

MS built their DOM storage implementation on top of their old persistence behavior which uses XML files to store the data and since it does disk writes MS decided that their implementation would not be good enough to follow the proposed spec they made the whole API asynchronous. DOM storage is implemented in WebKit, Firefox and Opera.

Where is the DOM? MS kept asking what people wanted and every list I’ve seen has included DOM Level 2 events and DOM level 2 in general.

Acid3. 16/100 is not acceptable

Last weekend we went to the animal shelter. We were planning to get two cats and we wanted to have a look. We ended up adopting two four month old kittens. They were just too cute and we could not let them stay at the shelter another night.

One of the wow features of Reader that I’ve been waiting for for a while is now out. I can now easily see what other people have shared.

Let the sharing begin!

[Revised to not sound as nagging as I always sound]

The JScript 5.7 patch is now being pushed to an IE6 computer near you…

IE6 uses Jscript 5.6 which has some design flaws when it comes to garbage collection. This is just a small issue for small applications but it is a large issue for large applications. Gmail is a large application and the GC problems caused IE6 to perform unacceptably slow. After talking to the JScript team they were really cooperative and they saw the need to push JScript 5.7 as an update to IE6. It is now being installed on all Windows computers. Expect Gmail to work better on an IE6 computer near you after a few more rounds of QA.

If you haven’t tried the new Gmail with a recent nightly WebKit (you need build 523 or later due to one blocking bug in earlier builds) I dare you to try it. With nightly WebKits it takes about 200ms to go from the Inbox to a thread. Anything that takes less than 300ms is perceived as instant and it should be the goal of all user initiated actions in an application.

Once you feel the speed of Gmail + WebKit it is hard to beleive that anyone would want to use anything as slow as the alternatives.

I love the speed and features of WebKit but I hate the UI of Safari. Maybe I can get over the clumsy UI in time?

Most JS frameworks and libraries I’ve seen have a function similar to this:

function getStyle(el, prop) {
  if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el, null)[prop];
  } else if (el.currentStyle) {
    return el.currentStyle[prop];
  } else {
    return el.style[prop];
  }
}

So what is wrong with this you might ask? Lets add some background and then
we can get back to that question.

Computed Style

Computed style represents the actual computed value of a style in absolute
units. For example ‘100px’ (for width) or ‘left’ (for text-align). The computed
value is never ‘auto’, ‘inherit’, ‘50%’, ’smaller’, ‘1.5em’ etc. These values are
relative to something and the browser needs to convert these values to absolute
values first.

Cascaded Style

Cascaded style is the real style value that is applied to an element when the
style value is set to ‘inherit’. Inherit means that it should get its value from
the first ancestor that has a non ‘inherit’ value. A few CSS properties have
their value set to ‘inherit’ by default. Most common of these are probably
‘color’ and ‘font-size’. If you change the font size of a paragraph you want the
links in the paragraph to change their font size as well.

Inline Style

Inline style is the style value you have added to the style attribute on you
element or the style properties you have set in script using
element.style.propertyName.

Example

<style>

div {
  width: 500px;
  font-size: 12px;
}

p {
  width: 50%;
  font-size: 1em;
}

a {
  font-size: inherit;
}

</style>

<div>
<p>Some text with <a id=a href=#>a link</a>.
More <b style="font-size:150%">text</b></p>
</div>

Browser Support

All browsers except IE has a way to get the computed style. The way to do
this is to use document.defaultView.getComputedStyle. Only IE has a way to get
the cascaded style. This is done using element.currentStyle.

All browsers supports getting the inline style (even IE4) but inline style is
not that interesting because it is empty unless you already set it, and in that
case you don’t really need to query it.

Conclusion

Back to our earlier question. What is wrong with our getStyle function? It
should be pretty obvious now. It will give very different and sometimes
unexpected results depending both on browsers and on the value set by the page
author and even worse, set by user style sheets.

So how do we solve this? We stop supporting IE of course… seriously, with
the market share IE has that is not an option. The best solution is to remove
functions like these from shared code and instead add more specific functions.
One can for example, often calculate the computed value based on the cascaded
value and the ancestors. A good example of that is ‘visibility’. Computing that
is pretty easy. If the value is ‘inherit’ check the parents until a non inherit
value is found. For things like left, width etc you will be better of using
offsetLeft, offsetWitdh etc. There are a lot of cases and sometimes it is just
not possible (or requires iterative testing with different absolute sized
elements).

Comments

Override style

There is one more style type that is worth mentioning and that is the
override style. This is called document.defaultView.getOverrideStyle in the W3C
DOM and element.runtimeStyle in IE. It allows you to override the style property
in such a way that it has (a) highest priority and (b) not serialized from the
DOM when you do things like cssText and innerHTML. getOverrideStyle is not
supported in Gecko so it is still only useful to IE specific code.

It is a bit strange to me that the W3C DOM never added a way to get the
cascaded style. The usecases for this are few but they do exists.

What is even more strange is that MS did not realize the need for a way to
get the compouted style back in the days when they believed in Trident as a
platform.

My favorite text editor of all time is ActiveState Komodo. I used to use the full/pro version of this but since I was too lazy to buy it so I kept redownloading the trial version every month. A while back ActiveState released a free version of the editor called Komodo Edit.

Komodo Edit has almost all the features I use. Almost. One feature that I missed pretty soon after changing was the RegExp editor. It is a pretty simple tool that allows you to type in a regular expression, some sample text and it would show you the groups etc. So, I decided I would just reimplement this in DHTML (no AJAX here).

Regular Expression Tool

The implementation is pretty simple. It uses input/propertychange events to track changes to the text areas and then applies the regular expression to the test text and displays the result in a tree. For the tree I used xTree2b which has been in beta for a few years now…

Updated: I added labels to the textfields and the result area.

This morning at 04:42 I felt my first real earthquake since moving to San Francisco. It was very short and it was over before I knew it. However, it left me a feeling of emptiness and I felt a lot more frightened than I would ever have expected.