Thursday, March 10, 2011

100% - 30px: Mixed-unit calculation in Firefox 4

Firefox 4 (see release notes, or dev edition thereof) adds some pretty cool new features. I love the tab candy.

A fairly big one that almost slipped under my radar is that they shipped an initial implementation of CSS calc: "Support for -moz-calc has been added. This lets you specify  values as mathematical expressions." (see

Support for calc is kind of a big deal as it allows you to do things that are annoying as hell to accomplish today. For example, perhaps you'd like to have three columns, left and right fixed width and center resized to fill available space:

[200px][100% - 400px, minimum 250px][200px]

The problematic bit is the middle column - it's actually fairly arcane to setup mixed unit calculations presently. calc makes it easy:
<!DOCTYPE html> 
  <style type="text/css">
   body { margin: 0px }
   #container {
    min-width: 650px;
    width: 100%;
   #left {
    width: 200px;
    background-color: #F0F0F0; 
    float: left;
   #center {
    min-width: 250px;
    width: -moz-calc(100% - 400px);
    background-color: #A0A0A0;
    float: left; 
   #right {
    width: 200px;
    background-color: #F0F0F0;
    float: left; 
  <div id="container">
   <div id="left">left!</div>
   <div id="center">center!!</div>
   <div id="right">righter!</div>
This snippet produces fixed-width left and right columns with a center column whose width is dynamically calculated using a mixture (% and px) of length units. The container div is used to prevent the left/center/right divs from dropping to the next line if the browser is sized down far enough the min-width on the center kicks in (we don't want it infinitely narrow!). Images below show the result before/after resizing the browser window:

The ability to easily (the ease being the key here; it was possible to pull off similar results before but not easily) create page structures using mixed-unit calculated sizes is an AWESOME improvement. Now all we need is a full implementation in Firefox and the other browsers :) Oh and user adoption sufficient to justify use on significant sites.

No comments:

Post a Comment