The focus of the jQuery UI Meetup I attended last week was on jQuery UI 1.8 and to work out some questions regarding future meetups, but of course some other topics came up as well. One of those other topics was the not-uncommon problem of having certain HTML content, meant to be hidden or styled by jQuery, briefly appearing in its raw form before the page has fully loaded and jQuery gets to do its thing. Apparently the term for this phenomenon is "FOUC", which stands for "flash of unstyled content."
Now, if you took it as an absolute that any and all uses of your web page had Javascript enabled, you could solve a FOUC problem by assigning a CSS style to the problem content that hid the content right from the get-go, and then you could use Javascript to reveal the content at the appropriate time. But such a solution would fail if the user had Javascript disabled--the content would never be visible to them--and it's contrary to the idea of progressive enhancement (the idea that the page is usable as is, but is enhanced when Javascript is available).
So in answer to the question on FOUC, Richard Worth (the speaker for the meetup) pointed us to the following blog post by Karl Swedberg:
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content
The post provides a pretty good explanation of the technique (which is pretty simple), so I don't feel the need to explain it or add to it. Just thought I'd put it out there because it would be hard to find via a web search if you didn't know how to describe the problem and didn't know the FOUC acronym.
No comments:
Post a Comment