CSS: Should we change the default for overflow?
For the CSS overflow property, should auto or hidden be the default instead of visible?
If you write a lot of CSS, there is a good chance your immediate response would be “no way!” But hear me out! There are several awesome benefits to one of these being the default, and in my opinion, many or all of the drawbacks are based around the fact that it’s just not what we’re used to, rather than being real a problem once you adjust. Let’s look at the pros in cons in detail.
Why does this matter?
It matters because this is a real option for writing CSS today. It has become a common suggestion to put the following box-sizing CSS on your sites:
* {
box-sizing: border-box;
}
This basically says “hey, we don’t like the default behavior for box-sizing, so lets use a different behavior by default for every element.” So, why not use this technique for other things? You could do this:
* {
overflow: auto;
}
It’s definitely a real option. You can’t just slap this on an existing site and have it work: you’d need to design things like this from the start. Let’s look at what would change if you did just that.
The Good
One thing that happens is that you can forget about clearfix. In IE7+ and all modern browsers, overflow: auto; would automatically clearfix everything:
See the Pen zKusC by Greg (@incompl) on CodePen.
This results in more semantic markup that doesn’t have clearfixes everywhere.
Another thing that changes is the behavior of margins. Collapsing margins have often been a source of confusion, but they’re not all bad. For typography this actually makes sense:
See the Pen cBbDd by Greg (@incompl) on CodePen.
However, for many layout tasks collapsing margins really aren’t what we want:
See the Pen Lrcxm by Greg (@incompl) on CodePen.
overflow: auto; changes the behavior of collapsing margins, but does not turn them off completely. Here is what happens:
See the Pen xKkop by Greg (@incompl) on CodePen.
This is actually quite convenient. Without this, you’d have to hack around with margins and paddings in a way that would result in less maintainable CSS.
The Weird
To explain what’s weird, first we have to understand what the default behavior that we’re changing is. The default value for overflow is visible. That means if an element’s content doesn’t fit, the content is still shown sticking out of the element.
See the Pen zxhbm by Greg (@incompl) on CodePen.
A lot of web designs rely on this behavior. This is the sort of thing you might see in the wild:
See the Pen rkAma by Greg (@incompl) on CodePen.
At a glance this looks fine, but you would notice something is awry if you were to add a background color to those menu items:
See the Pen DAjFq by Greg (@incompl) on CodePen.
In this case the layout would break pretty badly if you changed overflow to auto or hidden.
See the Pen tILCz by Greg (@incompl) on CodePen.
However, isn’t it actually a good thing to make sure your elements fit their contents?
See the Pen FidKl by Greg (@incompl) on CodePen.
Or, better yet, drop the fixed widths altogether:
See the Pen qGFJj by Greg (@incompl) on CodePen.
Setting overflow to auto or hidden forces you to be more diligent about sizing and using flexible sizing where possible. This might not be such a bad thing. However, there are cases where it’s a little bit more annoying:
See the Pen pJKmh by Greg (@incompl) on CodePen.
This is definitely unexpected at first. Where are the box shadows on the second two? Box shadows are treated as part of the element they decorate. With overflow: hidden; it is hiding the box shadows since they would be outside of their container. With overflow: auto; it’s a little more subtle: it is behaving like overflow: hidden; because auto has decided it’s not worth putting scrollbars for a box shadow (which is actually smart) so it hides them instead.
How do you fix this? The same way we fixed that menu bar earlier: by making the container big enough to fit the content:
See the Pen cKmdq by Greg (@incompl) on CodePen.
That wasn’t so bad. Or was it?
Auto or Hidden?
Everything we just discussed applies to both auto and hidden. So which is a better default?
Well, auto sort of “feels” right. It has intelligent behavior that seems to do an OK job deciding what to do based on the situation. On the other hand, auto can create situations where scrollbars show up in unexpected places. Nothing is more annoying than unexpected scrollbars.
On the other hand, hidden does make sense in its own way. Why should an element allow its content to be displayed outside of itself?
For now I’m leaning toward auto, but I’m willing to be convinced the other way.
OK, what now?
I’m thinking about using * {overflow: auto;} on my next personal project to see how it goes. It’s fun and interesting do this kind of academic cogitation, but what really matters is how it goes down in practice. Would you consider trying this out? Is it not worth the trouble? What if it turned out great and became an idiom that was used more and more commonly? Let me know what you think in the comments!
This entry was posted by (@_gsmith) on June 02, 2014 in CSS, Design and Feature.
Comments