Carl Camera

Using Meta Refresh for CSS Tuning

I was working on some CSS adjustments at work about a week ago -- in the normal setup: three different browsers open and my text editor squished at the bottom of the screen. One of my coworkers watched as I made CSS adjustments in my text editor, and noticed that my changes were appearing in all three browsers without any intervention on my part.

His first reaction was surprise. Then he realized what I had done. I had temporarily added a meta tag in the xhtml source document, which caused the browsers to refresh themselves automatically. He had never seen this technique used for CSS coding before.

Now this coworker of mine is one of the most experienced client-side developers I know, and if he had not seen this technique before, perhaps it's not widely used.

Here's a screenshot of my home system. It's a little crowded; I prefer to spread the browsers out across a couple of monitors, allowing more room for my text editor.


As I save changes to the css file, I can quickly see how all three browsers react to the change. I usually set it to refresh every three seconds.

The Background on Refresh

The meta refresh tag appears in the head element of an html document, and looks like this...

<meta http-equiv="refresh" content="n" />

...where n is a number specifying the number of seconds between the automatic refresh of the browser. Technically, it is an http-equiv attribute with a value of "refresh", but I will use the vernacular: "meta refresh." If you are working in xhtml, the ending slash is required.

Back in the early stone ages of the internet...circa 1995, meta refresh was quite popular. One of the coolest things that could be done at the time was to have a CGI script display the current time on the end user's browser. Of course, after a minute, the screen would be showing an incorrect time. So webmasters (we were all webmasters in 1995) would put a meta refresh tag specifying 60 seconds. In this way, the browser as it sat open on someone's desk would never be more than a minute off.


Oh, meta refresh was reviled by end users! You would be two-thirds the way down a long dissertation, concentrating on some complicated ascii math formula when "poof!" without warning the browser would wake up and refresh itself. Quite annoying to maintaining any flow that had been created.

For this reason, the meta refresh was exiled; banished by respectable designers to the isolated Island of NeverUsed.


So it took some time to discover, but there is a practical use for meta refresh after all. Just be sure to take it out when you're done tuning your style sheets.


Another common use of refresh is when there is MySQL replication that is occuring. Depending on the incomming writes (v reads) that 1 second courtesy notice might be all your system needs to do the full replication. Not that forum software added them with that intent in mind, but it's nice to think that was on their mind.

Another common use of the meta refresh in programming is really complex searching. By setting a proper refresh, you can keep "reloading" the results page. If the database says your search results are ready, you can display. If not, refresh after X seconds and try again. Those are the two most practical uses I've seen in production evironments. (phpbb and priceline respectively)

Jakob Heuser 30 Mar 2006

@Jakob, Good Point -- I suppose meta refresh never really went away, and it is used for "This page has moved, redirecting to our new home page in five seconds."

I've experienced the Priceline reloading phenomenon. I find it irritating -- I mean, it's great that since it's such a long query they can show what they have so far and add more when it arrives. But the whole list refreshes. More times than not, I'll simply wait until it calms down and stops refreshing -- I'm looking for the best price anyway, and it may be the last one loaded. Seems like it always is. :-)

Carl Camera 30 Mar 2006