Dart Don't Help Much with CSS

‹prev | My Chain | next›

I am sticking with a theme after last night's fun with z-index in the ICE Code Editor. That theme is CSS, which is not always pleasant, but definitely necessary. What I am curious about tonight probably has very little to do directly with Dart, though I am curious to see if Dart can help in any way or at the very least that it does not get too much in the way of debugging.

The problem is with the main menu styling. In Chrome (on the left), there is an appropriate gap beneath the buttons and the main meny. In FireFox (on the right) there is no gap:


After a bit of element inspection, the problem becomes fairly apparent: the buttons are different sizes in the two browsers, making it seem like the menu is incorrectly placed:


The main menu button in Chrome (on the left) is 9 pixels high. The main menu button in FireFox (on the right) is 15 pixels high. Not coincidentally, the difference is about the same as the gap between buttons and menu in Chrome. So the source of the problem has been identified, but not the cause.

Further inspection reveals that the line-height appears to be the root cause. In Chrome, the calculated line height is “normal” (which seems to be the same as the upcased font-size). In FireFox, it calculates the value to be 15px. Quick Google searching reveals this to be a common problem with a typically weird solution: setting the body to a unit-less 1.2 value for line-height. In my case, that does not work—there is a more specific CSS selector that sets the line-height back to normal. So I have to settle for setting the CSS selector of button:

button {
  font-family: sans-serif;
  font-size: 10px;
  line-height: 12px;
  /* ... */
}

Happily, working with FireFox and Chrome (actually Dartium in this case) causes me no troubles. Since this is just CSS work, I can reload the page as much as I want locally to see changes.

That ends up fixing the problem, but… sigh. CSS. I realize that there is no hope of this working, but it would be so nice to set a CSS font property on an element in Dart and have Dart normalize the rest of the font behavior across browsers:

  get _hideCodeButton {
    return _hide_code_button = new Element.html('<button>Hide Code</button>')
      ..style.fontSize = '10px'
      ..onClick.listen((e)=> hideCode());
  }

Just for kicks, I do try that and, no, it does not work. The font-size is set, but nothing is done to normalize line-height. I appreciate working with styles in Dart because I can use awesome method cascades as I do above, I also love Dart's naming consistency with methods and properties always being camel-cased (with the first character lowercase). That said, it is a pain to have to recompile my Dart into JavaScript to test the changes in FireFox.

Dart fixes a lot of the web's ills, but sadly, it seems that we are still stuck with CSS.


Day #794