Thursday, August 21, 2008

Telerik Watch Minute: CSS Loading Tip

In this week's episode. I show you a quick tip for fixing CSS "timing" issues. Specifically, as you may have noticed with this blog's new theme, when the page initially loads, you cannot view blog post text. That's because the background being set on my BODY tag (which is dark) is rendered by the browser before the white background for the page's text. While not a big deal, this loading "problem" means visitors must wait on the page to fully load before it's usable. To fix the problem, you need to use a little JavaScript, and that's exactly what I show you how to do in this episode. There are other ways to fix CSS rendering problems, but given my lack of control over the blog's HTML (or lack of desire to change it), this JavaScript tweak is a great, cross-browser solution. If you have pages with similar visual problems, hopefully this tip will help you improve your site's usability. Enjoy the episode and enjoy the improved Telerik Watch theme! NOTE: If you're having trouble reading the text in the video, switch to full-screen mode for easy reading.

2 comments:

Anonymous said...

Hello,

Great tip. It reminds me to think about the sequence of events and how they have an effect on what we see, especially with web applications.

Thanks!

Dave

Todd Anglin said...

@Dave- Yeah, it's really easy to forget that loading order matters, especially at the UI level. Tweaking it, though, can really improve your site's UX.