Simple "New" Indicator Using CSS

• Download demo files - 1.05 Kb

Introduction

If you've ever written a message board engine, you may have wanted to give your users a way to tell if new messages have been posted since their last log in. Beside these new postings, you want a little "new!" image so your users can quickly identify the new messages. Ideally, this image disappears once they have read the message or replies.

Background

An easy technique to achieve this result is to simply call anything that is newer than X days "new". This requires no per-user logging on the back-end (knowing which messages each user has read). However, once a user reads the new messages, they're no longer new to that user, yet the "new!" icon will continue to be displayed.

On the other end of the spectrum, you can store which messages each user has read and use that when displaying the list. However, this requires a lot of work on the back-end; too much work for the small result of a "new!" icon!

Using the code

The technique in this article is in the middle of the two extremes above. While it's not going to be 100% accurate, it's also very simple to implement. It uses the default behavior of the HTML anchor tag <a>.

The key is that this tag has two pseudo-classes: a:link and a:visited, meaning the link has never been visited and has been visited recently, respectively. They can be treated in a style sheet independently as shown below, where I create a generalized class called MsgAnchor:

<style>
.MsgAnchor { } 
.MsgAnchor A:visited 
{ 
   DISPLAY:none;
} 
.MsgAnchor A:link 
{ 
   BACKGROUND-COLOR: LightGreen 
   TEXT-DECORATION:none;
} 
</style>

Now, I can use this CSS class on the element surrounding the <a> tag and the user's browser will take care of determining which of the pseudo-classes to use based on whether or not the user has visited the link or not.

This is basic style sheet information--nothing new yet. The trick is how you take advantage of these pseudo-classes in building your message list. I'll provide a simple example of a message list where the users first see a list of topics and can click on the topic to view the replies. I've tried to make this example simple to demonstrate the purpose of the article and not to show a fully-functional message board. The main page pulls messages from the database and displays them to the user. Here is the resultant HTML that is generated:

<table ID="Table1">
    <tr>
        <td><b>Topic</b></td>
        <td><b>Date Submitted</b></td>
        <td><b>Author</b></td>
    </tr>
    <tr>
        <td>
            <a href="CSSSampleDetails.html?ID=1&NumReplies=4">
                                 Building Robust ASP Pages</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=1&NumReplies=4">New!</a>
            </span>
        </td>
        <td>7/19 09:56AM</td>
        <td>John Doe</td>
    </tr>
    <tr>
        <td>
            <a href="CSSSampleDetails.html?ID=2&NumReplies=2">
                                  Anyone seen this before?</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=2&NumReplies=2">New!</a>
            </span>
        </td>
        <td>7/19 08:50AM</td>
        <td>Jimmy D.</td>
    </tr>
    <tr>
        <td>
            <a href="CSSSampleDetails.html?ID=3&NumReplies=15">
                                    Programming question...</a>
            <span class="MsgAnchor">
               <a href="CSSSampleDetails.html?ID=3&NumReplies=15">New!</a>
            </span>
        </td>
        <td>7/18 08:50AM</td>
        <td>Newbie L.</td>
    </tr>
</table>

The <span> element whose CSS class is MsgAnchor houses an anchor tag. The HREF for the anchor tag includes the number of replies to this message: <a href= "CSSSampleDetails.html?ID= 2&NumReplies= 2">. Note that the HREF for the message topic link is the exact same URL.

Now, when the user first sees this list, all anchor tags will be unvisited and will thus use the a:link class. If we use the MsgAnchor class shown earlier, this means the text "New!" will be displayed as LightGreen with no text decoration.

The user then clicks on one of the message links to view the replies. This will cause the corresponding link to become "visited" and the browser will use the a:visited class the next time the page is viewed. The user returns to this page, their browser uses the a:visited class, which has display:none. This has the effect of hiding the "New!" text.

If new replies are added to a topic, the URL of the anchor tag will change, thus bringing the "New!" indicator back into visibility.

Points of Interest

Note that this technique has several downsides as listed below, but for a simple solution it works. You would not want to use this where it is very important that "New!" means new.

Issues with this technique:

• If the user clears their history, all items become "New!" again.
• Different browsers may define "visited" differently and un-do visited links.
• If a user looks at your page on a different computer, the visited links will not follow.