« The Good, the Bad and the Ugly | Main

IE8 and box-sizing

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.

This entry was posted on Monday, March 10th, 2008 at 21:48 and is filed under DHTML, Internet Explorer, JavaScript, Microsoft. 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.

12 Responses to “IE8 and box-sizing”

  1. Kris Kowal Says:
    March 10th, 2008 at 23:56

    My apologies; I don’t see how the IE relationship between -ms-box-sizing and MsBoxSizing is an exception to the rule. Is it your argument that it should be msBoxSizing or MsBoxSizing? Does the former function not transform -moz-box-sizing to MozBoxSizing? Does the latter function not transform -o-box-sizing to OBoxSizing? Is the thesis rather that the browser-specific prefix should be elided? Is it rather that toCamelCase should convert even these prefixed names to camelCase instead of TitleCase?

  2. Alexander Kirk Says:
    March 11th, 2008 at 1:04

    @Kris: check the second link in the post where it says “-ms-box-sizing Attribute | msBoxSizing Property”
    They have a lowercase first letter instead of an uppercase one, so in Erik’s post there is a typo where MsBoxSizing should be spelled msBoxSizing (in his second piece of code, the variable i indicates the offset, and everything fits together again :)
    In the end he is arguing that it should be MsBoxSizing. For sure it makes sense to have it all named in the same way, but I am just wondering if there is a definition on how to do it somewhere?
    Obviously for something like CSS font-size it is fontSize in JavaScript, so I can see where IE is coming from, though I agree with Erik more :)

  3. Lucky Says:
    March 11th, 2008 at 7:59

    Perhaps a more efficient method?

    function toCamelCase(s) {
    return s.replace(/\-(\w)/g, function(_, c, i) {
    return /*@cc_on i == 0 ? c : @*/ c.toUpperCase();
    });
    }

  4. Erik Arvidsson Says:
    March 11th, 2008 at 8:27

    Lucky: I used an if statement instead of the ternary conditional operator for clarity’s sake and using a conditional comment would make it even more obscure.

  5. Dean Edwards Says:
    March 11th, 2008 at 9:55

    It’s little things like this that make you realise that the IE developers exist in a tiny little world of their own.

  6. Kris Kowal Says:
    March 11th, 2008 at 18:12

    @Erik & Alexander: thanks for the clarifications.

  7. Garrett Says:
    March 14th, 2008 at 11:11

    @kris

    I too am failing to see the reason why browser detection is necessary to convert to camel case.

    var toCamelCaseExp = /-([a-z])/, r = window.RegExp;
    function toCamelCase(s) {
    for(var exp = toCamelCaseExp; exp.test(s); s = s.replace(exp, R.$1.toUpperCase()));
    return s;
    }

    console.log(toCamelCase(”-moz-border-radius”));

    I usually don’t find it necessary to do this because it’s possible to just use the camel-cased value from the start.

    document.defaultView.getComputedStyle(el, ”).MozBorderRadius;

    Shorthand values in Mozilla always return the empty string, so it’s necessary to specify each one individually.

    var el = document.getElementById(’accel’),
    view = document.defaultView;
    view.getComputedStyle(,”).MozBorderRadiusTopright;

    Regards,

    Garrett

  8. Garrett Says:
    March 14th, 2008 at 11:13

    Correction:

    view.getComputedStyle(el,”).MozBorderRadiusTopright;

  9. Garrett Says:
    March 14th, 2008 at 11:15

    Sorry, another correction:

    var toCamelCaseExp = /-([a-z])/, R = window.RegExp;
    function toCamelCase(s) {
    for(; toCamelCaseExp .test(s); s = s.replace(toCamelCaseExp , R.$1.toUpperCase()));
    return s;
    }

    toCamelCase(”-moz-border-radius”);

    MozBorderRadius

  10. Garrett Says:
    March 14th, 2008 at 11:28

    I see now Alexander Kirk’s explanation —

    You’re saying that the IE property is msBoxSizing, and that this is undesirable. Your argument is that the property should be MsBoxSizing. Sorry, I didn’t get that at first.

    The problem with your patch — of using browser detection to provide a custom camelCase for IE — is that if you inform enough people to do this, it will gain adoption and then internet explorer will not be able to change without breaking existing sites.

    This will lead to developers who used this property blaming Microsoft, when it’s really partially the fault of the developer who used such techniques.

    Garrett

  11. Andrew Dupont Says:
    March 16th, 2008 at 13:55

    @Erik, Dean: File a bug! The process is quite open this time around. And beta 1 is nowhere near feature-complete.

    If you two are not in the technical beta, you ought to be. Send Pete LePage an e-mail and I’m sure he’ll agree.

  12. Erik Arvidsson Says:
    March 18th, 2008 at 8:29

    Andrew: I’m pretty sure I filed one for “msInterpolationMode” when it was introduced to IE7. I’ll file another one for “msBoxSizing” if it hasn’t been reported yet.

Leave a Reply