Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

Using Pseudo-elements to Prepend the Date to your Edits

Tweet

HTML5 introduced a whole army of new elements and attributes designed to add a greater sense of semantic value to our markup. One of these additions, which has proved very popular and has been widely adopted, is the datetime attribute.

As you’ve probably noticed, this is most commonly found on the <time> element, another HTML5 newcomer, providing a date and time (the latter is optional) in a machine readable format and subsequently allowing the content of your <time> element to take any format you want it to.

For example, if your <time> element doesn’t have a datetime attribute, then it should look something like this…

<time>2013-08-15</time>

However, by shifting this data to a datetime attribute, you’re free to present something a bit more human friendly.

<time datetime="2013-08-15">The 15th of August, 2013</time>

Pretty simple stuff.

But that’s not the only occurrence in which the datetime attribute is applicable. Another handy use-case is to keep track of your edits when modifying the content of your web pages, particularly useful for those of us who run blogs that require occasional maintenance.

Using datetime on the ins and del elements

The ins and del elements allow you to make changes to your content where there is benefit in highlighting an addition or deletion.

It’s also often beneficial for the user to understand when these changes were made, which leads me to think that we may as well make use of this metadata that we apply to these elements when appropriate.

But how do we make use of it?

Pseudo-elements to the Rescue

You’re probably aware that pseudo-elements can be used to generate content that can be prepended or appended to an element. However, what’s slightly less mainstream is the attr() function, which allows you to extract the values of an HTML attribute for use directly in your stylesheet!

You know where I’m going with this…

So let’s set the scene with some edited content.

<p><del datetime="2013-08-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dolor laoreet, varius massa dapibus, porttitor tortor. Mauris sagittis, nisi non imperdiet porttitor, sem massa ullamcorper sapien, dictum dignissim lacus ligula eget urna.</del></p>

<p><ins datetime="2013-08-15">Actually, what I meant to say was pellentesque commodo erat quis sapien consequat, eu molestie est molestie. Pellentesque ornare pharetra metus sit amet posuere. Nullam volutpat, velit eu mollis consectetur, elit eros tristique lacus, id iaculis metus dui nec dui.</ins></p>

That’s all good, but as it stands, the user has no way of knowing when the content was altered (unless they inspect the code of course).

This is where you can use the :before pseudo-element in conjunction with the attr() function to prepend the datetime value to your edited content, as shown in the following snippet.

ins:before,
del:before {
    content: attr(datetime);
}

In basic terms that’s all you need, but in reality, you want to do a little more than that. The following snippet, which is actually taken directly from this blog’s stylesheet, demonstrates a more rounded solution.

del:before,
ins:before {
    content: "(Deleted "attr(datetime)")";
    margin-right: 5px;
    display: inline-block;
    text-transform: uppercase;
}

ins:before {
    content: "(Added "attr(datetime)")";
}

And this code will output the following result…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dolor laoreet, varius massa dapibus, porttitor tortor. Mauris sagittis, nisi non imperdiet porttitor, sem massa ullamcorper sapien, dictum dignissim lacus ligula eget urna.

Actually, what I meant to say was pellentesque commodo erat quis sapien consequat, eu molestie est molestie. Pellentesque ornare pharetra metus sit amet posuere. Nullam volutpat, velit eu mollis consectetur, elit eros tristique lacus, id iaculis metus dui nec dui.

A Final Caveat

You’ll recall that at the top of this article I claimed that the datetime attribute is designed for machines, not humans. This is true. And it becomes even more apparent when you want to add a time as well as the date, as you must then specify the time zone (this is actually required).

It is based on the UTC time standard, so your time zone is declared in relation to this. For example, as I’m currently based in New Zealand which is 11 hours ahead of UTC time, I would need to do the following:

<ins datetime="2013-08-15T23:24+11:00">Some inserted content</ins>

As you can see, this is more data rich but is evidently somewhat less easy on the human eye.

In summary, perhaps steer clear of this technique when you want to specify a date and a time value. When you don’t wish to be that specific though, this technique is a very valid one and a solution that I’ll be using on this very blog.

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.