What is the book about?

The book provides the reader with a foundation in how to markup and style a web site — the right way. In the authors’ own words this book is “a well-grounded, web standards-based approach in one package“.

Starting from the beginning, it explains the importance of solid, structured markup and of analysing a web site’s content before diving into the coding phase. It introduces the most important HTML tags and how to properly use them.

Following the HTML section of the book — which takes almost half of it — it dives into the CSS bit. Here it explains how to use CSS in a clean and effective way — just the way I like it :)

One of the most important aspects of this book is how it encourages the reader to continue to learn and explore — there is a very clear message that you can’t possibly learn everything from one book. It provides several paths in which the reader can further his or her knowledge and evolve as a web designer.

Who is the book for?

As I’ve mentioned above, the book is targeted at beginners — it doesn’t assume you know anything about HTML or CSS so everything is explained in a very clear and practical way.

I suppose it’s hard to assess whether the information would be easy to understand by an absolute beginner since I’m not one anymore (or at least I like to think I’m not). But every step of the book is so carefully explained, that I doubt anyone would have any problems.

Like Sam Brown mentioned in the title of his review, “Web designers who can’t code, need to read this book”. I couldn’t agree more.

A minor remark

The only thing I would have changed, or better yet, added to the book would be a more detailed section on inheritance. This is, however, probably due to the fact that I just wrote a massive post about it and all that information is fresh in my memory.

Inheritance is a fairly complicated topic and would probably not be relevant for this book; it’s one of the things that people can easily research on their own when any issues arise.

Conclusion

Reading this book felt like I was at the web design school I never had the change to attend. It is truly a course in a book: it explains the basics that every web designer should know — whether a coder or not.

The completed website that it provides the reader with at the end is invaluable, and I am not ashamed to admit that, even though I’m not within the book’s target audience, I’ve learned a few things I didn’t know, and remembered others I had forgotten.

I am lucky enough to know Christopher and Nicklas, the authors of this book, personally, and it was a pleasure to see that their charmingly friendly personalities show through in the writing of the book — which makes it an even more delightful read. Thoroughly recommended!

What does font-size-adjust do?

First, let me warn you: you will need to use Firefox to view the examples on this page properly. Yes, not Safari, Firefox!

The font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height (roughly the size of its lowercase letters) will be preserved.

Take a look at the image bellow:

Baskerville and Georgia don’t have the same aspect ratio, so when font fallback occurs (if Baskerville is the optimal font), the text usually looks much bigger even at the same size.

By using font-size-adjust, the original font-size for the fallback fonts will be divided by the font-size-adjust value.

Do not confuse font-size-adjust with -webkit-text-size-adjust, which is used to specify the size adjustment of text on the iPhone.

How to determine the correct font-size-adjust value

The example on the W3C specification is very clear:

Authors can calculate the aspect value for a given font by comparing spans with the same content but different font-size-adjust properties. If the same font-size is used, the spans will match when the font-size-adjust value is accurate for the given font.

I’m going to basically repeat its example here.

Let’s take a look at the following code, in which we have a paragraph with two spans.

The CSS:

p { font-family:Times New Roman; font-size:400px; }

span { border:solid 1px red; }

.adjust { font-size-adjust:0.5; }

The HTML:

<p><span>a</span><span class="adjust">a</span></p>

Both spans inherit the font-family from its parent (the p element), but the second span has the font-size-adjust property applied to it, with a random value.

If you check the example page, look at the example on the left: the red boxes don’t match size in height — the font-size-adjust value is wrong.

[Do all the boxes on the example page have the same height? What did I say? Firefox…]

After a few experiments, I’ve arrived at the value of “0.455”. Now here’s the CSS for the second example (on the right):

The CSS:

p { font-family:Times New Roman; font-size:400px; }

span { border:solid 1px green; }

.adjust { font-size-adjust:0.455; }

If you go ahead to the example page, you will see that on the example with the green borders, both a’s bounding boxes have the same height — now we have the correct font-size-adjust value for our preferred font.

An example

Here’s a quick example I’ve created just to show this working on actual text.

The font stack consists of: Calibri, Lucida Sans and Verdana (and this is the order by which the fonts are displayed on the page).

Safari’s rendering of the page:

And Firefox’s:

As you can see, Firefox maintains the same x-height independent of which font is being used.

I’m not concerned with the text not being aligned, the purpose of this example is to show how font-size-adjust can affect the consistency of the font size and the font’s legibility.

Also, even though the first div has the correct font stack, I had to manually specify Lucida Sans and Verdana for the other divs, so you (and I) can see the difference even if we have all three fonts installed.

Last comments

I guess using this property may eventually have some negative implications on how typography is treated throughout a website, but that can be the topic for another post — the main goal here is just to showcase a quite obscure CSS3 property that may be useful in some cases.

I confess I haven’t tested it on a “real” project yet, so I’d be happy to hear your thoughts.

This is, for now, only supported by Firefox for Windows from version 1.0 and from 3.0 on all platforms. There is a bug filed for Webkit to fix this issue though.

References and further reading

• Relative sizing: the ‘font-size-adjust’ property — CSS Fonts Module Level 3
• CSS Examples: font-size-adjust — Mozilla Developer Center
• font-size-adjust — Mozilla Developer Center
• Comparison of layout engines (Cascading Style Sheets) — Wikipedia
• Some new CSS features in Firefox 3 — David Baron’s Weblog
• And another CSS fonts-related article that might interest you (by me): The Future Of CSS Typography — on Smashing Magazine

What is the :empty pseudo-class

Here is the definition taken from the W3C Selectors Level 3 specification:

The :empty pseudo-class represents an element that has no children at all.

Seems easy enough, right? That’s because it is. The :empty pseudo-class is going to target elements that are completely empty; for example, an empty paragraph:

<p></p>

Or an empty table cell:

<table>
<tr>
<td></td>
</tr>
</table>

It won’t target this paragraph though (there is a space within the p tag, therefore it isn’t empty):

<p> </p>

A practical example

So when can this selector be useful?

Image you’re styling a table and some of the data cells have no content — you can style them differently using the magic :empty pseudo-class.

Let’s take the table I’ve created for the Adding Style with CSS: A Beautiful Table article. I’m going to use the same CSS, but change the data to make it simpler (the data I’ve added makes no sense, but you get the point…). I’m also going to remove the content in a few cells, to make this example relevant.

So this is our markup:

<table>

	<caption>A simple table</caption>

	<thead>
		<tr>
			<th scope="col" rowspan="2">Some headings</th>
			<th scope="col" colspan="4">More headings</th>
		</tr>
		<tr>
			<th scope="col">Great</th>
			<th scope="col">Brilliant</th>
			<th scope="col">Genius</th>
			<th scope="col">Good</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<th scope="row">Interesting totals</th>
			<td>155</td>
			<td>165</td>
			<td>70</td>
			<td>140</td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<th scope="row">Curious</th>
			<td>5</td>
			<td>35</td>
			<td>50</td>
			<td>15</td>
		</tr>
		<tr>
			<th scope="row">Awesome</th>
			<td>75</td>
			<td>90</td>
			<td></td>
			<td>5</td>
		</tr>
		<tr>
			<th scope="row">Fabulous</th>
			<td>30</td>
			<td></td>
			<td>20</td>
			<td>80</td>
		</tr>
		<tr>
			<th scope="row">Nice</th>
			<td>45</td>
			<td>40</td>
			<td></td>
			<td>40</td>
		</tr>

	</tbody>

</table>

This is what I’m going to add to the CSS:

tbody td:empty {
	background: #EFEFEF;
	}

And now the empty cells are styled differently! I don’t think this could have been much easier.

Also, if you really need to ask, this selector works on the latest versions of Firefox, Safari, Chrome and Opera. It will probably work on Internet Explorer 9, like most CSS3 selectors will. (The first person to point out the obvious, will be directed to this link. — Thanks, Jack, for helping me remember the link!)

Here’s the example:

View example

So, will you be using this selector any time soon?

The question

So Darren asked:

Is it more attractive when designers can…
a) design like a chameleon in any style or genre appropriate to the project, or
b) design over a period of years in a consistent, signature style

And, this was (part of) my comment:

I feel that the best designers usually have their own style, even if it’s quite subtle and hardly noticeable in some instances — there is always something of their own that they added to the work. And when I don’t immediately recognize one of their work, when I finally look at it, I will usually say “Ah, now I see it.”

While artists have usually a more evident personal style, designers go through their professionals paths adapting their work to the requirements. Artists don’t do that. But we both evolve throughout the years and, in my opinion, we both walk towards a style, or a way of working even, that is adapted to ourselves.

A or B?

Basically, my opinion is still the same, I’d just like to elaborate on it a little more.

I certainly admire a designer that can completely transform their style for every project they work on, but I don’t think that happens very often, and I can’t even think of an example of a great web designer that does that, to illustrate this thought.

What I notice often though, is great web designers that do have a personal style, but that can adapt it for each project. It’s the details, or the way each project is handled. I like to think it’s adding a bit of their own selves to each thing they design.

Here are a couple of examples to illustrate my point.

Jesse Bennett-Chamberlain is constantly creating stunning pieces of work and that doesn’t mean all his work looks the same. But they do come together to produce a solid portfolio that you can look at and say it’s definitely Jesse’s.

Jesse Bennett-Chamberlain's Mobile Web Design

Jesse Bennett-Chamberlain's Campaign Monitor design

Another example is Mike Precious, whose work is, like Jesse’s, stunning. Every single piece on his portfolio makes me want to just stare at it. The way he treats photography and how his projects have a deep, rich texture (not literally) is something that is seen across all of his work. And that doesn’t mean the end result is a boring “everything looks the same” portfolio.

Mike Precious' Green Business Bureau design

Mike Precious' Marriage Today design

There are other designers that fit the description. Take, for instance, Nick La, Sam Brown, or Tim Van Damme. You get my point, right?

It doesn’t mean they use the same elements all the time, or the same special effects. It’s something you notice when you look at the overall design, it’s how you feel when you use the interfaces they create.

Not artists

I guess it’s safe to say designers are not artists, in a sense that a painter is an artist, or a musician is an artist. We have conventions to follow, briefs to guide us, users’ feedback, clients to report to, etc.

(Actually, painters often had clients to report to and briefs to follow. A guided tour around the National Gallery will let you know that that happened more often than not. But when a painting is finished, it’s finished forever.)

So, we don’t usually create work because we really only need to let our emotions flow, to show to the world our vision. Our work is going to be used and abused by others. However, that doesn’t impede us from adding a bit of ourselves to our work or to be creative and original.

Adapting to a brief

It’s incredibly hard to keep coming up with exciting new designs every month, and I believe the process of creating them is even more important then the style that is required to create them. And even if we have to adapt our creativity to whatever the brief requires, our process of working will invariably stay the same, or be very similar between projects. That may mean we always come up with something completely new and amazing, that was never seen before — and the fact that we do come up with that all the time may actually be the constant in our work.

One of the things that sometimes strikes me as unfair as a designer is how we are required to have a logical explanation for whatever it is we design, for every single detail, colour, position of the elements on a page, etc.

“Where is the theory that proves that placing this there is correct? Where is the study behind it? Why are you using blue?”

In my opinion, there is always a place for subjectivity, for just following your instinct to know what’s right. Sometimes you just feel that something is right, and there is no logic to it. And maybe that little bit you add is what creates your personal style.

Pardon me, I digress.

Your thoughts

So what do you think? Do you feel there is one correct answer to the question? Do you consider yourself a chameleon or would you rather be recognized for having a strong personal style?

Just an example

The website mentioned above is just an example of something we tend to do frequently: make the client sound stupid, like he or she will never understand the complexity of our work.

Oh, aren’t we clever?

No. We are not brighter than our clients. We are not more intelligent, like sometimes I’m led to believe if I listen to some conversations and to the constant moaning.

I was recently in a meeting with a client — a clever, intelligent person; he was asking us questions that we, as “people of the Web”, would have never considered. His questions reminded me of how much we take as common knowledge when talking to and designing to the general public.

This made me realise how sometimes we probably sound like obnoxious snobs, and how I should probably be even more careful than I already am when talking to someone that doesn’t work on the Web.

Lots of intelligent people just don’t understand the terms we use and are probably completely lost in some conversations and meetings. That won’t help us pass our points across.

Making an effort

But am I accusing the wrong side? Should clients simply make more of an effort to learn the jargon? After all, there is a learning curve for when someone starts working with a website. We all know too well that one of the biggest problems with the client/designer (I’m using this term very loosely here) relationship happens when the client has faulty expectations about the input that will be required from him or her during the process.

We too learn the jargon of others, out of necessity. Like when we go to the mechanic or something breaks around the house, and we have to talk to a technician, another professional. We understand that by having a car, we need to make the effort of knowing at least a little bit of how it works, so we don’t catch ourselves stranded in the middle of the night in a lonely road, helpless.

But that doesn’t mean I know what a mechanic is talking about when he’s going on and on about what’s wrong with my car. And I would probably be completely lost if I had to speak to a textile designer or an architect about their work. I just hope they explain it to me in a way I can understand and trust them to do their best work.

Respect

Sometimes people are just plain mean, or disrespectful. That is a completely different thing. Like in any other business, there are tough clients, tough people that we have to deal with. But not knowing that an online image is to be measured in pixels, shouldn’t make a client from Hell:

I need to know what size you need the graphics for the website. Is two? Maybe three inches good?

Or maybe we should make things clear in our terms of service and contracts:

“I thought your quote was for an unlimited time limit, I’m not finished with my changes and I don’t want to pay any extra!”

And, of course, sometimes people are just clueless:

I need to get moving, anyway you can do some work on this on your vacation. That’s a long vacation, I bet you’ll get bored anyway, and this is back-and-forth via email, not phone, so it shouldn’t cause you any stress.

Conclusion

I have no conclusion. I still haven’t found the secret to convey my work and my methods in a simple way. Even the words that sound the simpler to us strike me as sounding completely foreign during meetings (like JavaScript, HTML or CSS). But I’m sure as hell making a bigger effort of not being patronising, of putting myself on other people’s shoes, and trying to make things sound as clear as possible.

I feel most of the times, if we are facing a “client from Hell”, it’s our fault and we should do something to fix that.

And now I hope I don’t ever have to complain about a client again, or at least remember of not doing it in front of someone else. That would be most embarrassing.

Writing when you feel like it

This may come as surprise, since I’ve been dutifully posting one post per week, haven’t failed a single week and have 3 other posts for the upcoming weeks already finished. But I feel the writing process shouldn’t be forced or constrained. I want to write when I’m in the mood for it, and I want to make the posts live immediately, before I regret anything I’ve written (which sometimes happens and posts are thrown in the trash).

Yesterday I stumbled across a post by Jeffrey Zeldman, “Write when inspired”, where he expresses the exact same feelings I have with regards to writing:

You are writing for readers, a duty as sacred, in its way, as parenting. (…) The world is already choking on half-considered, squeezed-out shit. There’s no need to add to the pile.

If you want to be great, or at least to be better, start by breathing, taking breaks, and working intensely when the mood is on.

I agree. I don’t want to write something because I have to, I want to write because I want to write. And I’m concerned that lots of “half-considered, squeezed-out shit” is going to be published because people feel they absolutely “have to”.

Don’t get me wrong, I’m all for people practicing the art of writing; it forces you to organise your thoughts, to make sense of what’s going on in your head. But not when you are not in the mood.

Too many ideas

My biggest problem with writing is that I have too many ideas in the pipeline — I feel I should be writing at all times.

By observing what goes on around me in a sort of analytical (some would probably say cold and indifferent…) way, it’s very easy for ideas to keep popping into my head. Sometimes I’ll leave those ideas for a while, until when I feel more comfortable or have the time to make them into a post; but other times I need to write them down right there and then.

That’s been happening quite frequently lately, and it happens more often with non-technical posts, with posts that may incite more discussion than actually provide an answer to a question. These types of posts are usually written in one go; there is no need for technical revisions — ideas are much more subjective, I can say whatever I want (sort of).

Not really quitting…

So I won’t actually “quit” Project 52, but I’ll do it on my own terms. Hopefully, by the end of the year, I’ll have around 52 posts published during 2010, but I may have published 3 articles in a week and then nothing for 2 months, if I didn’t feel like it.

I didn’t forget your suggestions for future posts, and I’ll make my best to make those posts happen, so thank you for sending those in.

Thank you for reading.

The audio

Transcript

If you’d rather read, here’s the transcript of the review:

Hi, my name is Yaili and I’ll be reviewing the Second Edition of CSS Mastery, by Andy Budd.

Who is the book for?

The book states that it’s for “anybody with a basic knowledge of HTML and CSS” and experts. I’d say it’s more for the first case, but I’ll expand on that later.

There are lots of useful tips and tricks, that I’m sure you’ll use over and over, explained in a solid and easy to understand way. The fact that the examples can be seen online and that there are files that can be downloaded is great.

It’s a second edition

When I read the first edition, I was just starting to work with CSS, and CSS was still a bit of a mystery to me. I remember reading some things that I thought to be pure magic and that seemed very complicated, but now I realise they are used by any good CSS coder. So, at the time, the book opened my eyes to those techniques and to the possibilities of what could be done with CSS.

Content

The book covers subjects from the beginning to a more advanced level.

It starts with the importance of semantic HTML, how to set good foundations. It takes a very brief look into microformats and HTML5 as well.

Then it moves onto selectors, with some more advanced and CSS3 ones — but it doesn’t go very deep into that area to be honest.

It explains the box model, which is rather important, very well. Liquid and elastic layouts.

Some more advanced techniques, like sliding doors and even multiple backgrounds, which is quite refreshing. Opacity and rgba colours.

There are some clever uses for the :target pseudo-class and attribute selectors. Some webkit proprietary code like gradients and reflections.

It also explains how to style lists and navigation. I would have liked to see a larger section for definition lists, because there’s only a small section and it sounds a bit negative (or even dismissive) and I don’t think it makes them justice.

There are some negative comments on CSS frameworks. Which I frankly agree with.

A good introduction to the IE layout issue. Some common browser bugs and how to fix them. And how to work with graded browser support.

Then on the examples, at certain points they can be a little repetitive, but there’s an interesting discussion about website widths, a brief example of using jQuery, which is rather nice.

Conclusion

In conclusion, as someone who had already read the book, reading it again was good, as there are always things that you forget or that you weren’t aware of, even though my experience now is completely different, and I can be a little more critical about it.

If I could change something in the book, I think I’d change the naming of CSS3 — in the specs it’s always mentioned with no spaces, and in the book it has a space between the second “S” and the number “3″. I know it sounds nitpicky, but it’s rather annoying for me, for some reason…

Also, there are some mentions to browsers that are already dated, even though the book is fairly recent (like “Safari 4 beta”, which is already out of Beta). But that’s just something that happens in our industry — things move too quickly. I’m just being nitpicky again.

So, have I learned anything from this second edition? I did learn a few things, but not much. I already use or know most of the techniques. But would someone starting to work with CSS learn anything from the book? Definitely yes. I used to always recommend the first edition whenever someone asked me for book recommendations, and I will keep recommending it with the second edition. It’s a must-have.

Me, the designer

As I’ve said here before, eve though I’m not a complete beginner, my knowledge of WordPress is fairly limited. I’m essentially a front-end person, so the less I have to dive into PHP and the likes, the better. My goal is to always find a balance between flexible code and simplicity.

If, by the end of the post, you feel this could be easily done with another technique, feel free to leave a comment.

My problem

I needed to display the list of a certain page’s sub-pages, along with an excerpt from those pages. Very simple, right?

After some searches on Google and within the Codex, there didn’t seem to be a simple solution — that’s when Andrew pointed me to the Extended Page List plugin.

How to use the plugin

First step: install the plugin.

The plugin uses a shortcode ([epl]) that you can add directly into your posts, and customise with some parameters. It overrides the get_pages() function, so you can use all of get_pages() parameters, plus a few more.

When editing a page, you would use something like this:

[epl showexcerpt=1]

But I needed to add the plugin to a template, to be used on a number of pages. The client was going to be able to edit the introductory text on each parent page, but the list of sub-pages should be generated automatically bellow that.

So I used the do_shortcode function on my template file. Its Codex page is not that useful.

This function allows you to call a shortcode and use it just as you would use it within a post (or page). So I could now do this:

<?php echo do_shortcode('[epl sort_column=menu_order showexcerpt=1 excerptlength=20 excerptmore="Read more&hellip;" morelink=1 excerpttag=""]'); ?>

As you may notice, I used many of the parameters supported by the plugin to control what was displayed on the page. That’s one of the things I love about this plugin — the flexibility. You can control everything, from the excerpt’s length, to the HTML element that you want wrapping the whole block, or each page, which CSS class to apply, etc.

Done!

And that’s all! I decided to put this little post together, since I didn’t find any documentation on how to use this plugin within a template file — the plugin’s website itself doesn’t seem to mention it. And, although it may be clear to many people, it wasn’t for me.

The :target pseudo-class

We often use fragment identifiers in our code — usually to point to a specific element on a page, represented by a “#” and an anchor. When we click on a link that ends with a fragment identifier (for example, this one), that element we are pointing to becomes the target (hence :target).

This :target pseudo-class can be styled, just like we style the :hover or :active pseudo-classes on links.

To see an example in the wild, go to Wikipedia and click on a reference link (for example, this one). If you are using a good browser, you will see it has a light blue background; and if you look at the CSS, you will see this:

ol.references > li:target, sup.reference:target, span.citation:target, cite:target  {
background-color:#DDEEFF;
}

Pretty easy, right?

Our example

If you’re impatient, you can take a look at the final example now (use Safari):

View example

I’m going to create a simple list of links (using fragment identifiers) to blocks of text bellow them. Here’s the markup:

<div id="content">

<ul>
	<li><a href="#b1">Block 1</a></li>
	<li><a href="#b2">Block 2</a></li>
	<li><a href="#b3">Block 3</a></li>
	<li><a href="#b4">Block 4</a></li>
</ul>

<div id="b1">
	<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p>
</div>

<div id="b2">
	<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
</div>

<div id="b3">
	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>

<div id="b4">
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

</div>

The basic CSS

First, we need to cover the basics. I’ll use a very simple reset for this example, but you should use a proper one in your projects. I’ll just set the font-size, line-height, font-family and reset padding and margin for the elements we are using:

body {
	font:62.5%/1.5 Cambria,Georgia,"Times New Roman",Times,serif;
	}
div, ul, li, a, p {
	padding:0; margin:0;
	}

Second, I will quickly style the container div “content“:

#content {
	width:500px;
	margin:auto;
	font-size:1.4em;
	}

Third, the rest of the elements. I will:

1. Add a small bottom margin to the list and to each block of text.
2. Remove the bullets from our list — we don’t need them for the example.
3. Add some padding and a light border to the blocks of text.
4. Make the first line of each paragraph in small caps. Just because I can.

Notice I’m using the child combinator (or selector) to make sure the div‘s I’m targeting are the ones that are direct descendants of the main “content” div. So if, for some reason, I were to have div‘s inside the blocks of text, they wouldn’t be affected. Also, I don’t have to give these div‘s a class or target them by their id‘s.

ul, div > div {
	margin-bottom:1em;
	}
li {
	list-style:none;
	}
div > div {
	padding:1em;
	border:1px solid #ffffd3;
	}
div > div p:first-line {
	font-variant:small-caps;
	font-size:1.2em;
	}

The juicy bit

Now I’m going to style the :target pseudo-class. First, I’ll add a slightly darker border than the non-targeted div‘s:

div > div:target {
	border:1px solid #dac89d;
	}

Enters the CSS animation. To create an animation you need two things: a definition of what effect the animation produces and a call to the animation from the element you want to animate.

Let’s define the animation first.

I’ll define the animation by setting up keyframes at certain points. In this case, I want the background to start as white, then fade to a light yellow, then back to white — I will need 3 different steps (or keyframes).

Imagine each step is a simple selector, but instead of having for example this:

div {
	background: red;
	}

we need to specify a moment in time (using percentages, or just “to” and “from” if we only need “0%” and “100%“):

10% {
	background: red;
	}

Also, here I will name my animation. I will call it “target“:

@-webkit-keyframes target {
	from { background:#ffffff; }
	50% { background:#ffffd3; }
	to { background:#ffffff; }
	}

So, the animation is defined, now we need to call it from the :target selector. We can either set each property separately, or use the shorthand version. Let’s see the full code:

div > div:target {
	border:1px solid #dac89d;
	-webkit-animation-name:target;
	-webkit-animation-duration:.5s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction:linear;
	}

The -webkit- bits should be self-explanatory. We need to specify the animation’s name (“target“), it’s duration (“.5s“, half a second), how many times it should be repeated (“1“) and it’s direction (“linear“).

The shorthand version looks like this instead:

div > div:target {
	border:1px solid #dac89d;
	-webkit-animation:target .5s linear;
	}

Much simpler! Because we only want the animation to repeat once, we can even not specify the “1” in this case (if you wanted to, you could have it right after the “.5s“). Let’s say you want the animation to repeat twice, you would specify it like this:

div > div:target {
	border:1px solid #dac89d;
	-webkit-animation:target .5s 2 linear;
	}

The end

I hope you enjoyed this brief tutorial. There are endless possibilities for CSS animation and for more advanced CSS selectors, but I feel that the ones I’m showing here can actually be used on real projects with no damage for users browsing the web with less friendly browsers.

Do you agree? Have you used the :target pseudo-class on your projects? How about CSS animation?

Note: This animation is only visible on Safari (and Chrome, like Dougal kindly pointed out!). The :target pseudo-class is not yet supported by Internet Explorer. Firefox and Opera will just show the darker border when you click on the links, but that is a good compromise.

Resouces

• CSS Animation — Surfin’ Safari Blog
• The target pseudo-class :target — W3C Specification

Update, 10 December 2011: Romanian translation of this web page

Ah well!

But I’m no quitter, so this is where you come in. I often get emails from readers of this blog asking for help or more details on a particular subject — I would be absolutely thrilled if you kept them coming: ask me anything you want (as long as it relates to the subject of this blog), big or small, simple or complex, and I’ll try and answer it in a post, with full credit to you.

By doing this I’ll know that, at least in some instances, I’ll be helping out someone for sure. I’ll also continue posting other articles that I have lined up, of course.

Shoot me an email or just leave a comment on this post.

P52′s first week

Since I’m not adding any useful content with this post, here’s a short list of worth reading Project 52 first posts by other participants:

• Jason Cale posted a beautifully massive post on “The fine art of degradable interface elements”.
• Craig Rowe decided to start the Project with an article on .NET development.
• Lee Munroe reviewed the recently published Smashing Book.
• Jack Osborne delved into the realm of pseudo-elements.
• Tim Van Damme incited everyone to “Stop being so fucking polite”.
• Paul Stanton gave us a look into CSS coding standards.

Have you written anything yet?

And to the all seeing P52 eye: this post counts, alright?