 |
| Waiting for a sidebar widget to load… |
 |
| Only now are the background and border complete. |
This situation can arise when you have a widget that uses a <script> tag to pull in third-party data, especially if the site the JavaScript loads from is not particularly peppy. (Note that to make the above screenshots I inserted a blocking <script> tag from Steve Souders; I’m not blaming SocialVibe or calling it slow. It just happened to be the next thing in that blog’s sidebar.)
For the templates in the new Blogger template designer, we wanted everything to feel as fast as possible, even as the page loads. So, we fixed the problem. See how the border and background are in the right place even though the sidebar is incomplete:
 |
| The page background is consistent even as the sidebar loads. |
This makes the page feel faster, since it looks more “finished” earlier in the load process. How did we do it? Boring technical explanation after the jump…
The core of the issue is how we deal with floated elements, in this case the blog’s columns. Since floated elements do not generally contribute to their container’s height until they’re cleared, we previously used a clearing element at the end to make the container’s height — and with that its background and borders — match its contents’ height. Since the clearing element has to be after the sidebars in document order, it doesn’t get interpreted until after all of the blocking JavaScript has loaded. In the meantime, the container stays short.
For the new templates, we use a little-known (at least to me before this whole thing started) detail in CSS to fix this with self-clearing containers. By putting “overflow: hidden” on the element that contains the sidebars, we made its height increase to contain its floated children without an explicit clearing element at the end. That way, the background and borders are in the right place during load.
The downside to this is that you end up with a container that has “overflow: hidden” on it, which could break lightbox or other effects that purposely exceed their container’s dimensions. To avoid this problem, we just include the clearing element in the container as well, and then remove the “overflow: hidden” using JavaScript after it’s in place to maintain the container’s height.
Much credit goes to Mihai Parparita for cluing me in to this use of “overflow: hidden.”
(Another way to make an element grow with its floated children is to float it itself, but this leads to significant complications when trying to give it an explicit width or center it, so we couldn’t go that route here.)
