i3krxa
Last Updated: February 25, 2016
·
1.823K
· liquidise
0fd1ac94827ef5f38c0a9b2eec9f14e6

What CSS Needs: Granular Positioning (part 1)

read more at: Ben Roux's Blog

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.

Say Thanks
Respond

7 Responses
Add your response

698
11904d2d1af36d532f9d78d9d59f6819

When scrolling down, the user should maintain access to the navigation.


The problem here is that this is executed as the resize takes place


What? Why are you talking about scrolling and then doing stuff with resizing? And the css seems indicate vertical change while your js changes the horizontal... it sounds like you mixed up two different things. Care to clarify?

over 1 year ago ·
702
0fd1ac94827ef5f38c0a9b2eec9f14e6

@passcod Sorry for the confusion. Whenever you use javascript to handle element positioning, you must handle both scrolling and window resizing events.

Scrolling events typically requiring adjusting the top property, while horizontal resizing requires, as I showed above, adjusting the left (and potentially top as well)

Excellent point though. I will go ahead and edit to try and clean up the topic hopping.

over 1 year ago ·
703
11904d2d1af36d532f9d78d9d59f6819

I understand better now, but:

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

will, in my mind's eye, behave exactly as:

nav {
  position: fixed;
  top: 150px;
}

as long as there's no sideways scrolling (which is rare).

Re: the original problem, I thought that W3C was working on something to solution that, but I can't seem to find it.

over 1 year ago ·
704
0fd1ac94827ef5f38c0a9b2eec9f14e6

@passcod Indeed they will behave the same. But as soon as user scroll horizontally, or worse, resizes their browser, a fixed position nav will start to lay over the page contents.

Built up a quick and dirty example of what I mean by this. Try dragging your browser left and right.

over 1 year ago ·
705
11904d2d1af36d532f9d78d9d59f6819

Hence my caveat above. I understand the positioning. I understand the problem. I also understand how you're proposing to solution it. I was just pointing out that if the screen/window can be kept wide enough, the problem doesn't appear (and at-media blocks can mitigate it). This can all get very complex, though.

Regarding upcoming CSS, I think two solutions to the problem are coming up: alternative layouts (flex, grid) and scoping. With scoping one could, as I understand it, work with hybrid positioning much more easily.

over 1 year ago ·
1189
F13c675ddaba40aa690d5074e53d1f4a

Try this:

nav {
position: fixed;
left: 50%;
margin-left: (distance from center you want the left side)
}

over 1 year ago ·
6525
2bebf4cb2fc99965264410111a0d2239

Yeah, I agree with the others. You don't really need the scrolling Javascript, simply the resize one.

Outside of that, I do agree about the other properties.

over 1 year ago ·