What is LESS?

LESS — Leaner CSS — is, in the authors’ own words, a “new version of CSS” (better yet, of writing CSS), that is then compiled into “traditional” CSS using the LESS compiler.

There are 4 main things you can do with LESS that you can’t with normal CSS:

1. Variables

You can define a variable, such as “@text-color”, and use it throughout your stylesheet. If the colour of your text changes, you only need to change it once in your CSS — where the variable is initially defined.

2. Nested selectors

With nested selectors, instead of doing this and repeating yourself:

aside h1 { font-size: 24px; }
aside h2 { font-size: 18px; }

You can have:

aside {
	h1 { font-size: 24px; }
	h2 { font-size: 18px; }
}

3. Operations

You can add, subtract, divide and multiply using operations. Here’s a quick example:

@wrappers: 600px;

aside {
    width: @wrappers / 2;
}

This is definitely not the best example, but it should be enough for you to get the point.

4. Mixins

Mixins work a lot like variables, but you can specify a whole class in one. For example:

.b-radius {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.box {
	.b-radius;
}

From these examples, I suppose you can say that LESS is actually more. (I’m sorry, I couldn’t help myself.)

This is not a “how to” guide

The official LESS documentation is very clear on how to install it. I have to admit I usually stop reading instructions whenever “Terminal” is mentioned (and I know more people do), but I guess most CSS authors will be OK with it — if not, ask for help to your nearest web dev (or email me and I’ll give you the phone number of one).

After it’s installed, you’ll have two files: the .less file — this is the file you’ll be working with — and the compiled .css file.

There’s also LESS app, that makes it easier to use LESS. And I suppose that some CMS and servers let you use LESS directly, but the point of this article is not to teach anyone how to install it — it’s to go through its good and bad points.

On to the important bit…

How LESS can make your life easier

This is a list of things that, in my opinion, make LESS worthwhile and can really simplify your CSS. These are the things that I usually miss the most when I’m not working on LESS files.

1. Variables

Surely when you are writing your CSS there are colours, measurements, etc. that you keep using over and over. For example, let’s say your brand colour is jade (very fashionable for Spring/Summer 2010). You may use it on various elements in your design, for example, the main text:

body {
    …
    color: #77b59d;
    …
}

Or the borders of your posts:

article {
    …
    border-bottom: 1px solid #77b59d;
    …
}

Or as the background of your footer:

footer {
    …
    background-color: #77b59d;
    …
}

If someone has to edit the CSS file and doesn’t know exactly which colour he or she is supposed to be using — it may even be you a few months later —, what happens is that either you’ll spend some time scanning through the document until you find the colour, you’ll use Firebug or, if you like to complicate things, use xScope or take a screenshot and use Photoshop to detect the colour.

This is silly. You’ll end up with many similar colours instead of just one. (As a note, Dreamweaver lists all the colours that a site is using — you’d be surprised at how inconsistent some CSS authors can be when applying colour.)

Another thing that may happen is when you actually want to change this colour throughout your stylesheet: you’ll have to edit every instance of it — that’s painful.

With a variable, you can have this:

@main-color: #77b59d;

body {
    …
    color: @main-color;
    …
}

article {
    …
    border-bottom: 1px solid @main-color;
    …
}

footer {
    …
    background-color: @main-color;
    …
}

Beware though: you can easily go overboard with variables. I have to confess I was inebriated in the beginning by the thought of never having to declare a colour, a padding value, etc. again, and started adding too many variables to my LESS files. It gets messy and complicated quickly. You’ll have to find a balance.

2. Accessors

If you only need to access something once, you probably don’t need a variable. If you’re pretty sure that that thing you need to access is, and will always be, directly linked to whichever thing you’re linking it to, you can use an accessor.

Let’s say you have a block with a heading and some text. You want the border of that box to always be the same colour as the heading. You can have this:

#sales {
    border-color: #ae7b2a;
}

#sales h2 {
    color: #sales['border-color'];
}

Using accessors may be going a step too far in some cases, but in other cases it makes a lot of sense — I think they’re quite useful.

3. Mixins

One example: gradients. Let’s face it, they are an absolute pain to write. Take a look at how LESS makes it easier for you:

The mixin:

.grad-linear (@start:"", @end:"") {
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -moz-linear-gradient(-90deg,@start,@end);
}

Using the mixin in your .less file:

nav {
	.grad-linear(#b3cdcc,#718a89);
}

What your compiled .css file will show:

nav {
	background: -webkit-gradient(linear, left top, left bottom, from(#b3cdcc), to(#718a89));
	background: -moz-linear-gradient(-90deg, #b3cdcc, #718a89);
}

Mixins are great for properties that still require that we add some vendor-specific code (like border-radius) or for the latest CSS3 gradients, transitions, etc.

I have to say mixins, especially when used for gradients and border-radius, are my favourite part of LESS.

4. C-style comments

Some people prefer these to typical CSS inline comments. I’m OK with either, but if you’re using LESS, you can have either this:

/* A normal CSS comment */

Or this:

// A C-style CSS comment

5. Nesting (in some cases)

Nesting is one of those things that makes you think LESS is amazing at first. Then you start using LESS and start nesting selectors, and change your mind.

The rare instance where I think nesting is useful is with link states in simple selectors. In LESS you can have this:

a {
    :link, :visited { text-decoration:none; color:#edd273; font-weight:bold; }
    :hover, :active, :focus { color:#edd273; border-bottom:1px solid #edd273; }
}

And the output will be this:

a:link {
  text-decoration: none;
  color: #edd273;
  font-weight: bold;
}
a:visited {
  text-decoration: none;
  color: #edd273;
  font-weight: bold;
}
a:hover {
  color: #edd273;
  border-bottom: 1px solid #edd273;
}
a:active {
  color: #edd273;
  border-bottom: 1px solid #edd273;
}
a:focus {
  color: #edd273;
  border-bottom: 1px solid #edd273;
}

There’s a lot of repetition in here, I know (I’ll mention that on the next section), but it’s nice nonetheless.

How LESS can easily become a nightmare

This is a list of things that I would either avoid doing in LESS or that just don’t work the way you’d expect them to (so, annoyances).

1. Nesting (in most cases)

As I just mentioned in the previous section, nesting looks nice at first, but it doesn’t work flawlessly.

One of the things that I’ve noticed for example, is that, even though you can have this:

nav {
  ul {
    li a {
      :link { color: red; }
    }
  }
}

This won’t work (notice that now I’m using a direct child selector instead):

nav {
  ul {
    li > a {
      :link { color: red; }
    }
  }
}

For this last bit of CSS to work, you’ll have to do it like this (notice the extra “&”):

nav {
  ul {
    li > a {
      &:link { color: red; }
    }
  }
}

This not a problem with LESS, I guess it’s just not a very intuitive way of doing it just for using a different type of selector.

The main thing, however, that I think makes nesting a poor choice in most cases, is how it can make a mess out of specificity [here's a post I've written previously on specificity and other matters].

Your first instinct is to nest everything inside the main blocks, like aside, #sidebar, #news, etc. But then you realise you need to reutilise a piece of the CSS for another area on the site. You make another nested selector for that new block, because you don’t want to go over that first nested block of CSS that you created in the first place. You’ll be left out with numerous redundant selectors, with very long selectors (because you don’t notice this until the compiler phase), and with the need to create overly specific selectors to override your initial ones (that shouldn’t have been so specific to begin with).

Nesting selectors is one of those cases where the phrase “with great power comes great responsibility” makes a lot of sense. Use it wisely and carefully.

2. Changes made to the compiled file

This isn’t a problem with LESS per se, but rather with your working process.

Even if you are the only person in charge of the CSS on a given project, it’s possible that someday you will leave, or hand the project over to someone else, so it’s a good thing to make sure that no-one is going to edit the compiled .css file directly instead of the .less one.

If this happens, and then after a while someone does use the .less file, when it compiles, it will override the changes made to the .css file. Then you’ll have to go back and fix it.

This is just a general problem with people: if there’s a chance that we can make a mistake, we will make it.

3. Formatting

The .css file that results from the compiler gives you back your CSS with no comments and single-line declarations (that have more than one property). It would be useful if you could have some control over this. For example, you may want to minify the CSS (although you could argue that this should be a completely separate step), keep comments in, have multi-line CSS, group selectors, etc.

I’m not entirely sure if this has been resolved, so if someone knows better, do let me know.

4. Using Firebug

I can’t work without Firebug, and one of the best things about it is knowing exactly which line you’re looking at. If you’re using LESS, that’s broken: Firebug shows you the line of the compiled .css file, not the original .less file you’re editing, which is basically useless.

Conclusion

I love LESS and I think it’s a pleasure to use, until you start trying to be too clever and things start getting messy. My advice is to use it with care, take advantage of its niceties but don’t go overboard.

I know there are lot more problems (and probably good things too) that I haven’t referred. These are the ones that I’ve personally came across with; I try not to use LESS on larger projects and I usually don’t use @import on my stylesheets (especially smaller projects) — which I know can cause some problems.

I’d love to know what your thoughts are on this: have you used it? Why, or why not? Which problems have you encountered? Do you find it helpful or just plain silly?

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 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.

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

CSS Modules

Just to briefly make sure everybody understands what I mean by “modules”, the development of CSS3 has been divided in different Modules. For example, there is a Selectors Module, a Values and Units Module, a Backgrounds and Borders Module, etc.

Some of these Modules are at a more advanced stage of development and closer to being final than others. You can take a look at the Current Work table here.

Browser support

Let’s get this straight right away: only Safari and Firefox are currently supporting (some) of this module’s features, namely the properties column-count, column-width, column-gap and column-rule. Other browsers will render the content as if there were no columns at all.

There are more properties on the specs (and Safari supports a few more), but I’ll only mention these in this article, so we can all get a taste of what’s goin’ on.

Also, I’ve picked this particular module, because it’s one of the few that is actually in “Last Call” status, so it’s closer to being finished than others.

The markup

For this example I grabbed some text from the excellent Blind Text Generator and created a basic page with some divs and paragraphs.

Here’s an example of one of the divs:

<div id="text1">

	<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.</p>

	<p>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. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

	<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>

	<p>Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was.</p>

</div>

The CSS

I’m just going to quickly show what each of the properties does. To use them, we’ll need to apply vendor-specific properties: for Safari the properties will be prefixed with -webkit- and for Firefox with -moz-. Annoying, but nothing we’re not used to, right?

Please follow the examples below on this page.

column-width

The CSS for our first div will be the following:

#text1 {
	-webkit-column-width: 200px;
	-moz-column-width: 200px;
	column-width: 200px;
	}

This will create 200px wide columns until the width of the page is filled, with no gap between the columns.

Each column within the element is called a column box. A column box doesn’t have its own properties, like background, padding or margins (at least not for now, but that may change for future specs). Also, all columns within a row have the same width and the same height.

The column-width property is not definitive—it is actually the optimal size we want the columns to have, but that may vary if the container is wider or narrower than it would be required to fit those measures.

column-gap and column-rule

Now let’s add some space between the columns and a nice rule, shall we?

#text2 {
	-webkit-column-width: 390px;
	-webkit-column-gap: 20px;
	-webkit-column-rule: 1px solid #000000;
	-moz-column-width: 390px;
	-moz-column-gap: 20px;
	-moz-column-rule: 1px solid #000000;
	column-width: 390px;
	column-gap: 20px;
	column-rule: 1px solid #000000;
	}

In this example, we are defining a gap between each column of 20px and also adding a rule between each of them.

The column-rule property follows the syntax of the border property. Also, the column rules don’t take up any space—if they are wider than the column gap, they will (or should) overlap the content.

The column gaps and column rules are all the same within a row.

Ignore the colourful blocks in this example for now, I explain those bellow.

column-count

On our third example, we will specify how many columns we actually want the element to have:

#text3 {
	-webkit-column-width: 200px;
	-webkit-column-count: 4;
	-webkit-column-gap: 20px;
	-moz-column-width: 200px;
	-moz-column-count: 4;
	-moz-column-gap: 20px;
	column-width: 200px;
	column-count: 4;
	column-gap: 20px;
	}

If both column-width and column-count are specified (like in this example), the column-count value will be regarded as the maximum number of columns. So if only 3 columns fit in the element, but you’ve set it to have 4, only 3 will be created.

If you don’t specify the width of the columns, the column-width will be calculated automatically according to how many columns you have specified.

Images, etc.

You can have elements, like images, along the text, and even float them or make them a percentage in width. That percentage will be calculated according to the width of the column box they are in.

To test this theory, I added 3 coloured divs to the second example (#test2), with some inline coding (oh, the horror!). The first, red, div is floated but it has a width of 140%; the second, green, div is not floated and it’s also 140% wide; and the third, yellow, div is floated, but has 100% width .

According to the W3C specification, this is what should happen:

Content in the normal flow that extends into column gaps (e.g., long words) is clipped in the middle of the column gap.

Floats that are wider than the column box intrude into neighboring columns.

Correct me if I’m wrong, but for what I see on these examples, Firefox is overflowing both 140% divs, even if the second one is not floated. Safari doesn’t do better: it’s overflowing neither of them.

More overflowing stuff

As a final example, I’m creating a div with a smaller width and a set height. I’m making the overflow visible, and see what happens…

#text4 {
	height: 200px;
	width: 500px;
	overflow: visible;
	border: 2px solid red;
	-webkit-column-width: 200px;
	-webkit-column-gap: 20px;
	-moz-column-width: 200px;
	-moz-column-gap: 20px;
	column-width: 200px;
	column-gap: 20px;
	}

According to the specs, this is what should happen:

A multi-column element can have more columns than it has room for due to:

• Constrained column height. […]

In continuous media, the columns that do not fit within the multicol element are added in the inline direction.

In human language, that means if the content is to be overflown, then it should be to the sides. In this case, Safari seems to be getting it right, while Firefox overflows the content vertically if the height is set via the max-height property, but correctly if via the normal height property. Take a look at the last block on the example page (with the red border).

Final words

And that’s it! I just wanted to remember you of this wonderful CSS3 feature that can make our lives a lot easier—and that degrades quite nicely for browsers that don’t support it.

I keep looking for examples of the multi-column layout in the wild, but I don’t think a lot of people are using it now. For what it’s worth, I’m using it on my personal site, yaili.com, and it’s also in use on the tweetCC website.

Do you know of any more websites using it?

An overview

Although CSS3’s use has been increasing among web designers, browser support for some of its features is still inexistent.

Lately, I’ve been using Modernizr more and more to cater for those browsers that don’t support specific CSS3 properties—for example, on my site—, and it makes the development much easier because I know I’m providing these lesser browsers with an alternative experience, rather than just ignoring them.

Bear in mind (and this is even splashed on Modernizr’s front page), that Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.

How it works

To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example:

<script src="js/modernizr-1.0.min.js"></script>

The second step is to include on your html tag a class of “no-js”:

<html class="no-js">

Why add this tag?
Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case.

If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

What does this mean? 
Let’s take a look, shall we?

In this case, I opened the page on Firefox 3.5. This browser (sadly) doesn’t support multiple backgrounds, CSS gradients or CSS transforms, therefore, Modernizr outputs “no-multipebgs“, “no-cssgradients” and “no-csstransforms“. On the other hand, it does support canvas and border-radius, which explains “canvas” and “borderradius“. Etc.

How to use this (precious) information?

So what can you actually do with this? How does that help you in any way?, you might ask.

Let’s look at an example:

Multiple backgrounds

Your site’s background has been carefully built and you’re using the multiple background technique to make it simpler (and faster!) to code. Your CSS may look like this:

#nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

And a nice browser will render this:

Using Modernizr, your CSS will look instead like this:

#nice {
	background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

This is what your visitors will get, depending on which browser they have:

This is a very simplified use of Modernizr, but hopefully it’s enough to show you what you can do with it.

HTML5

Modernizr also allows you to use the new HTML5 elements—header, hgroup, section, footer, video, etc.—and style them.

This doesn’t mean that some of these elements will start working on Internet Explorer, but that you can style them and that IE will understand them and not ignore them.

JavaScript

You can also detect features using Modernizr in your JavaScript, using this syntax:

if (Modernizr.geolocation) {
}

Conclusion

I hope that I managed to explain the usefulness of Modernizr. While we can’t rely on the fact that browsers support the full spectrum of features we want to use, this is the best tool out there to provide for both worlds.

Do you use Modernizr too? How? If not, how do you deal with some browsers not supporting some features (assuming you are using the latest CSS3 techniques)?

The markup

Let’s start with a very clean semantic markup, listing some photos:

<div id="page">

	<ul id="food">

		<li>
			<img src="pic-1.jpg" width="200" height="133" alt="Wagamama" />
		</li>

		<li>
			<img src="pic-2.jpg" width="200" height="133" alt="Strawberries" />
		</li>

		<li>
			<img src="pic-3.jpg" width="200" height="133" alt="The Horseshoe" />
		</li>

		<li>
			<img src="pic-4.jpg" width="200" height="133" alt="Brick Lane" />
		</li>

		<li>
			<img src="pic-5.jpg" width="200" height="133" alt="Portugal" />
		</li>

		<li>
			<img src="pic-6.jpg" width="200" height="133" alt="Burgers" />
		</li>

	</ul>

</div>

So here we basically have a container div, with the id of “page”. Then we have our list with the id of “food” and our list items, each one containing one image.

The CSS

After we’ve added some CSS resets (check the example page for this bit), let’s add some styling to our “page” div:

#page {
	width: 640px;
	padding: 20px 0;
	margin: auto;
	text-align: left;
	}

Here we’ve added a specific width to the container, some top padding and we’ve aligned it to the centre of the page.

Now let’s add some styling to the list:

#food {
	overflow: hidden;
	}

#food li {
	list-style: none;
	width: 200px;
	float: left;
	margin-right: 20px;
	margin-bottom: 30px;
	}

This should be all we need: a) we’ve added an overflow of “hidden” to the ul (because the elements inside it will be floated, this is the quickest way of clearing it); b) we’ve removed the default bullet points from the list items, added some width to them and floated them to the left; c) finally, some margins to add a bit of breathing space to the page.

If you check your page now, the layout is broken. The last item on each row has a right margin too, and there is no need for it.

We can fix it with some cool CSS:

#food li.end-row {
	margin-right: 0;
	}
#food li:nth-child(3n) {
	margin-right: 0;
	}

#food li.first-row {
	clear: left;
	}
#food li:nth-child(3n+1) {
	clear: left;
	}

Let’s look at it by steps:

1. We’ve added this part #food li.end-row because some browsers (ahem!) don’t understand the more complex selector, so they will need a class to target those list items. We will add this class to our markup via jQuery in a bit.
2. We wanted to target every third list item within our list. We accomplish that with this selector: #food li:nth-child(3n). This means that every three li our CSS will do something. (Read more about the :nth-child() pseudo-class on the W3C website.)
3. #food li.first-row: this selector will just be useful for Internet Explorer, because it needs to have a specific class on the li item so it knows what we’re talking about.
4. #food li:nth-child(3n+1): this will target every third li item, but starting from the first one. Here we want to clear these li items on the left, so each line starts fresh.

The JavaScript

The JavaScript part is only needed to accommodate Internet Explorer. Because it doesn’t understand the :nth-child selector (yet?), we need to add some very non-semantic classes to the li items we need to target, and we’ll be doing that via jQuery.

So, the next step is to download jQuery and link it to the page, placing this bit on the header of the page:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

We will also create our own JavaScript file to instruct the HTML on how to behave with jQuery. Place this after the previous code:

<script type="text/javascript" src="clear-list.js"></script>

Now on our newly created file (clear-list.js), we’ll add this code:

$(document).ready(function () {

	$('#food li:nth-child(3n)').addClass('end-row');
	$('#food li:nth-child(3n+1)').addClass('first-row');

});

Let’s focus on what’s important here.

We are using jQuery to add a class (end-row and first-row) to specific selectors (#food li:nth-child(3n) and #food li:nth-child(3n+1)), and that’s all you need to know. You can edit those parts according to your own HTML, but it’s quite simple!

Conclusion

In a perfect world, we wouldn’t need to use jQuery to make this code work. But we don’t live in a perfect world, and we have Internet Explorer to thank for that.

With this quick and very simple tutorial (for example, the li items have the same height, so I’m kind of cheating here!) my goal was just to show you can use more advanced CSS selectors, but if your layout breaks or is unusable on some browsers, there are some easy solutions to put it back in place.

You can download the example files here:

View example Download source files

If you’d like me to do more quick demonstrations of CSS selectors, just name them in the comments :)

When to use a DL

First, what has the W3 to say about this?

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.

That means we can use them whenever we have something that needs a description. For example: a list of Belgian beer types, a list of services provided by a company, a list of the persons in a team, etc. Pretty straightforward: instead of using a normal list (ul) with headings and paragraphs in between, we can use an element which already has tags for our definition terms and descriptions.

The anatomy of a DL

A definition list is made up by 3 different tags: the opening dl tag; the definition term tag (dt); and the definition description tag (dd). That would look like this:

<dl>
	<dt>Term goes here...</dt>
	<dd>Description goes here...</dd>
</dl>

Still easy, right?

To mix things up a bit, we can have more than one term, to more than one definition. For example, a word in a dictionary can have two correct ways of spelling and more than one definition.

Beer o’clock

Now we are going to style a definition list of Belgian beer types (which I recently tried and loved!).

First, some HTML:

<div id="beers">

	<h1>A Definition List: Belgian Beer Types</h1>

	<dl>

		<dt>Amber ales</dt>
		<dd>These are beers similar to the traditional pale ales of England, although somewhat less bitterly hopped. A notable example is the 5% abv De Koninck brand, with its distinctive spherical glasses (called 'bollekes').</dd>

		<dt>Blonde or golden ale</dt>
		<dd>These are a light variation on pale ale, often made with pilsener malt. Some beer writers regard blonde and golden ales as distinct styles, while others do not.</dd>

		<dt>Brown Ale</dt>
		<dd>Regular bruin or brune beers such as Grottenbier are darker than amber ales, less sour than Flemish brown ale, and less strong than dubbel.</dd>

		<dt>Dubbel</dt>
		<dd>Dubbel has a characteristic brown color. It is one of the classic Abbey/Trappist types, having been developed in the 19th century at the Trappist monastery in Westmalle.</dd>

		<dt>Enkel</dt>
		<dd>This beer is the basic recipe for what was traditionally a range of three beers of increasing alcohol content.</dd>

		<dt>Flemish Red</dt>
		<dd>Typified by Rodenbach, the eponymous brand that started this type over a century ago, this beer's distinguishing features from a technical viewpoint are a specially roasted malt, fermentation by a mixture of several 'ordinary' top-fermenting yeasts and a lactobacillus culture and maturation in oak.</dd>

	</dl>

</div>

So, we’re wrapping our content in a nice container (div), then a little descriptive title (h1) for our page and finally our definition list, with the beer types as definition terms (dt) and each description as a dd.

CSS 3 magic

I should warn you: this WILL NOT work on IE6. The page will still have its colours and main formatting, but none of the sweet CSS 3 styling is going to be seen. When you’re driving an inferior car, you don’t expect it to go as fast as a Ferrari, do you? You’ll still get there, but with less, or no style.

First we’ll add some defaults to our stylesheet (you should be using a proper reset on your stylesheets, but let’s make things simpler here), and we’ll also style the container div:

body {
	margin: 0;
	padding: 20px;
	text-align: center;
	background: #fff;
	}

h1,
dl, dt, dd,
p,
a {
	margin: 0;
	padding: 0;
	}

#beers {
	width: 500px;
	padding: 20px;
	margin: auto;
	background: #eeebe3;
	border: 5px solid #5a523d;
	text-align: left;
	}

Let me know in the comments if you need explaining for this part…

Now onto the type bit:

h1 {
	font: 32px "Delicious-Bold", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	text-align: center;
	color: #3d3111;
	margin-bottom: 20px;
	}

p {
	font: 16px/1.3 "Delicious-Bold", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	}

And this is where the fun begins: we are going to use the @font-face attribute to call the Delicious typeface. Remember that this typeface is available for @font-face embedding (you can see a list of available fonts in the Useful links section of this post), but not all are.

We’ll add this bit to the beginning of our stylesheet, before the body style details, so that all the @font-face info is easily seen. We then only have to call the font we want to use by the font-family value we give it here (see code above):

@font-face{
	font-family: 'Delicious';
	src: url('Delicious-Roman.otf') format('opentype');
	}

@font-face{
	font-family: 'Delicious-Bold';
	src: url('Delicious-Bold.otf') format('opentype');
	}

@font-face{
	font-family: 'Delicious-Heavy';
	src: url('Delicious-Heavy.otf') format('opentype');
	}

And now, our definition list:

dl {
	margin-bottom: 20px;
	}

	dt {
		font: 22px "Delicious-Heavy", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
		text-shadow: rgba(255,255,255,.8) 2px 2px 0;
		text-align: center;
		color: #822020;
		margin-bottom: 5px;
		}

OK, lots to talk about here!

First we add a bottom margin to the dl, so that there is some space between it and the paragraph that comes next.

Then we define the font size and font family for our dt (and dd, see bellow, after the image).

We also add a nice little shadow to both of them. For that, we are using RGBa colours, which allow us to add, besides the r,g and b values, a transparency value between 1 (fully opaque) and 0 (fully transparent). The values that come after the rgba are the horizontal and vertical offset of the shadow, and then the amount of blur (in this case, zero).

Next, we add some white space around our terms, and give it a reddish colour.

Finally, we are going to add a decorative border to each of our descriptions, but we’re not using a background because each description has a different length: we need something more flexible, and we need to show off our CSS3 skills too. So we are going to use the border-image property.

The border-image property allows us to use an image and specify how much of its borders we want to apply to the borders of our element.

We need to specify the width of the border of the element, in this case it will be 20px. After that, we will specify the image we’re using for our border, which in our case is this one:

(Do you see a nasty light blue background around this image? You’re using IE6!)

We will also need to say how much of the image we are using for our borders: 20; and how it should behave: will it stretch to the size of the element, or will it be repeated? In our case, we want it to stretch. And this is what we get:

dd {
	font: 16px "Delicious", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
	text-shadow: rgba(255,255,255,.5) 1px 1px 0;
	padding: 10px;
	border-width: 20px;
	-moz-border-image: url(bubble.png) 20 stretch;
	-webkit-border-image: url(bubble.png) 20 stretch;
	-khtml-border-image: url(bubble.png) 20 stretch;
	border-image: url(bubble.png) 20 stretch;
	margin-bottom: 30px;
	}

We are using the vendor specific properties so that the border-image is understood by all of them. Someday, we will only need the last line of this bit of code, instead of 4 lines.

Browser support

I’ve said that this is not going to work on IE6. What I didn’t say, was that it doesn’t work on IE8 or 7 either. Oh, and Opera will ignore the border-image property (at least on my copy of Opera 9.64, but correct me if I’m wrong).

For Internet Explorer to understand the @font-face attribute, you will need to use the EOT font format, so you will have to duplicate the 3 @font-face attributes and use the .eot files for that.

Conclusion

Hopefully this made it a bit easier to understand how definition lists can be really useful, and how CSS 3 makes styling rich designs so much easier.

You can download the example files bellow, and you can grab the Delicious font from here.

View example Download source files

Was this post too short? Did you need more details to understand what just happened? Let me know in the comments.

Useful links

• Fonts available for @font-face embedding
• Lists in HTML documents
• Take Your Design To The Next Level With CSS3