What CSS Needs: Better Positioning

There are a series of changes CSS could really benefit from that are largely ignored in CSS3. Generally, CSS3 improvements focus on the more complex design and updated methods: box shadows, rounded corners, etc. Personally, i'd like to see a "back-to-the-basics" approach that would fix some long standing properties and save developers from unnecessary code.

Position vs Position-X and Position-Y

One case i find myself in frequently is a centered column layout. In these cases, the right column typically contains scrollable content, while the left is typically reserved for navigation. When scrolling down, the user should maintain access to the navigation. Currently, this is done by handling window events in javascript and recalculating the position on the fly:

$( window ).scroll( repositionNavigation );
$( window ).resize( repositionNavigation );

function repositionNavigation() {
    // calculate the window size
    // reposition the navigation accordingly
}

Few problems here: this code is executed as resizing and scrolling takes place. On slower machines, this results in a choppier experience. This isn't conducive to a responsive interface. From the developer side, we now have unintuitive and disparate code for positioning these elements.

A cleaner way to solve this would be a breakdown of the css position property. With it, the javascript is replaced with

.nav {
    position-x: static;
    position-y: fixed;
    top: 150px;
}

Simple as that. We now have a pure css solution. Our styling code is with our positioning code, and the positioning is handled outside of a browser's javascript engine.