d3: will selection.style('font-size') always return a value in px?

css, d3.js, javascript

Solution

For answering your question, let's have a look at `selection.style` source code:

export default function(name, value, priority) {
    var node;
    return arguments.length > 1
      ? this.each((value == null
            ? styleRemove : typeof value === "function"
            ? styleFunction
            : styleConstant)(name, value, priority == null ? "" : priority))
      : defaultView(node = this.node())
          .getComputedStyle(node, null)
          .getPropertyValue(name);
}

As you can see, it indeed uses `getComputedStyle`.

Reading the MDN documentation about getComputedStyle, we can read that:

The values returned by getComputedStyle are known as resolved values. These are usually the same as the CSS 2.1 computed values, but for some older properties like width, height or padding, they are instead the used values.

Then, jumping to the documentation about computed values, we can read that:

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values. (emphases mine)

Therefore, since `getComputedStyle` is supported (basic) by Chrome, Edge, Firefox, Internet Explorer, Opera and Safari, we can say that the answer to your question ("Is this a behaviour I can rely on across browsers?") seems to be yes.

Problem

The docs just say that selection.style returns the "current computed value". I tried specifying an element's font-size in css using `rem`s, and `style('font-size')` seems to return the corresponding size in px (e.g. `'10.2px'`). Is this a behaviour I can rely on across browsers and no matter what units the font-size is specified in in css?

Original source