So, I noticed that we have some cruft in CSS that never bothered me:
/*
* Prevent overflowing content
*/
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer,
.region-page-closure {
overflow: visible;
word-wrap: break-word; /* A very nice CSS3 property */
}
I decided to investigate what it actually did, so I set my time machine back to 2007. It comes from #110897: oversize content causes IE6 layout breakage, which is a IE specific bug. Let's see what are the defaults according to modern browser implementations:
- overflow: visible (see https://developer.mozilla.org/en/CSS/overflow)
- word-wrap: normal (see https://developer.mozilla.org/en/CSS/word-wrap)
So it seems overflow: visible should move to ie6.css, while word-wrap: break-word should be applied only to the sidebars (I don't believe a word will span across any other region), and since 6.x-2.x (at least) we can target it with .sidebar.
Comments
Comment #1
barrapontobtw, this can be safely ported to 6.x-2.x
Comment #2
johnalbinI'm willing to tackle this in 7.x-5.x.
Yes,
word-wrap: break-word;was added to work around that IE bug. But it is a useful feature on its own. I'm going to leave that be.But I agree that
overflow: visible;doesn't need to be set for all browsers. And IE6 is already getting a variant of overflow set for it.Comment #3
johnalbinFixed in upstream. https://github.com/JohnAlbin/compass-zen-grids/commit/66815fa309f0e0a28f...
Comment #4
barrapontoDo we really need to word-wrap: break-word *every* region?
Comment #5
johnalbinIt's per grid item now, not per region.
Is there a specific annoyance with this property? It's one line of CSS applied to all grid items in a single ruleset. Its just a couple bytes.
Comment #6
barrapontoYes, but it breaks words. I noticed this because someone posted a screenshot to #drupal-themes with a content region scrambled because of a bad implementation of break-words support in an specific version of Safari. I know it will hardly show up again, but it is not useful at all in 7.x-3.x besides sidebars.