Jump to content

Applying a Different Stylesheet Based on the Time of Day using CSS

+ 2
  adfm's Photo
Posted Jan 25 2010 12:15 PM

Automating the styling of a page can help keep things fresh (and hopefully keep users coming back). Some sites have a different look during the day and switch over to an evening look when the sun goes down. To achieve this effect you can use this recipe from Christopher Schmitt's CSS Cookbook, Third Edition.


If you want to apply a different stylesheet as the day progresses, pull in the time on the user’s clock and deliver the appropriate stylesheet:

<script type="text/javascript">

 function setTimedStylesheet() {

 var theTime = new Date().getHours();

 if (8 <= theTime&amp;&amp;theTime < 20) {

	document.write("<link rel='stylesheet' href='daytime.css'

type='text/css'>");

 }

 if (20 <= theTime&amp;&amp;theTime < 8) {

 document.write("<link rel='stylesheet' href='nighttime.css'

type='text/css'>");

 }

 }

setTimedStylesheet();

</script>

Make sure you include the noscript element that includes a link to the default stylesheet in case the browser does not have Javascript:

<script type="text/javascript">

 function setTimedStylesheet() {

 var theTime = new Date().getHours();

 if (8 <= theTime&amp;&amp;theTime < 20) {

	document.write("<link rel='stylesheet' href='daytime.css'

type='text/css'>");

 }

 if (20 <= theTime&amp;&amp;theTime < 8) {

 document.write("<link rel='stylesheet' href='nighttime.css'

type='text/css'>");

 }

 }

setTimedStylesheet();

</script>

<span class="strong"><strong><noscript></strong></span>

 <span class="strong"><strong><link href="default.css" rel="stylesheet" type="text/css"></strong></span>

<span class="strong"><strong></noscript></strong></span>

Creating a customized look and feel based on the time of day isn’t a far-fetched notion. Radio and television stations in the United States divide their broadcasts based on the time of day—for example, Daytime Emmy Awards, drive-time radio shows, prime time television shows, and so on.

The main problem with using this method is that you are assuming the clocks on people’s computers are actually accurate.

Another solution is to get the time of day from your server through a middleware programming language such as PHP and pass it on as a variable to the Javascript.

CSS Cookbook

Learn more about this topic from CSS Cookbook, 3rd Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.

See what you'll learn


Tags:
0 Subscribe


1 Reply

0
  DarkFlib's Photo
Posted Jan 24 2011 05:37 PM

I'll just point out two things...

1) the second codeblock has a formatting issue with the
<noscript>
<link ... />
</noscript>

2) all this needs to be in the head if it isn't obvious.

One last point. CSS itself supports expression evaluation which can be used to change values based on such things as the time of day. This is a really bad idea in practice since these are re-evaluated many times during the the time your page is loaded generally and adds a heavy cpu load for no good reason. If you do need more control, jquery can manipulate css classes and ids and is worth exploring.
Sysdom.com - Monitoring and Support Services (Launching Feb 2011)