IE8 and box-sizing 14

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.

  • http://cixar.com/javascript Kris Kowal

    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?

  • http://alexander.kirk.at/ Alexander Kirk

    @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 :)

  • Lucky

    Perhaps a more efficient method?

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

  • http://erik.eae.net Erik Arvidsson

    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.

  • http://dean.edwards.name/ Dean Edwards

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

  • http://cixar.com/javascript Kris Kowal

    @Erik & Alexander: thanks for the clarifications.

  • http://googlesucks.com/ Garrett

    @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

  • http://googlesucks.com/ Garrett

    Correction:

    view.getComputedStyle(el,”).MozBorderRadiusTopright;

  • http://googlesucks.com/ Garrett

    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

  • http://googlesucks.com/ Garrett

    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

  • http://andrewdupont.net Andrew Dupont

    @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.

  • http://erik.eae.net Erik Arvidsson

    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.

  • Ray

    @Erik, from the time this has been written, IE8 is in Beta2 now and the extract from the link http://msdn.microsoft.com/en-us/library/cc196965(VS.85).aspx says
    —-
    This property requires Internet Explorer to be in IE8 mode rendering.

    The -ms- prefix is optional. You can use box-sizing instead of -ms-box-sizing (and boxSizing instead of boxSizing), and the effect will be the same. As box-sizing is defined in the Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) specification, that form is preferred.
    —-
    I really hope by the time, IE8 is released, it would iron out most if not all the inconsistencies

  • Raghu

    Further more:
    CSS Improvements in Internet Explorer 8 is listed @
    http://msdn.microsoft.com/en-us/library/cc304082(VS.85).aspx

    I am no big fan of MS and their IE with such lagging support for standards and in fact most of times, taking a different road compared to other browsers.

    Still IE8 seems by far, Microsoft’s intent to atleast reaching towards the standards.