A part of CSS3 are a fantastic new range of selectors, these include the ;nth-child sudo class. These allow you to style the nth child of a parent element. Therefore you can easily style the odd:

tr:nth-child(odd)

or even elements:

tr:nth-child(even)

For example this is my table where I have styled each even row:

You can find more information on this on the W3C CSS3 Selectors page.

Link prefetching is a very little known HTML 5 tag which is currently only supported by Firefox. It utilizes browser idle time to download documents that the user might visit in the near future.

For example:

<link rel="prefetch" href="page2.html">

Once the user has loaded up that page the next page (page2.html) will being loading significantly decreasing the time it takes to visit the next page.

It’s a great idea really, and because it’s gracefully degregating it means that users in FF will get the benefit while everyone else wouldn’t see the difference. Refer to the Mozilla FAQ for more information.

(via Keyboardy)

The TweetMeme button is one of the most successful social media buttons, it is served to millions of websites around the web. One of the more unusual points about the TweetMeme button is it’s height, 61px. This height has now been adopted by facebook and digg.

Why 61px?

“Cause everyone knows that 61 pixels is such a normal dimension in the world of social networking – I mean everything’s 61 pixels, right? Cause it’s…a prime number!”

- Twittown

I would like to say that it was due to lots of research and investigation, but it was more of a accident. The button was originally designed to be 60px high but in the quest to fit an extra digit onto the button the font size was decreased and the button height was increased to 61px.

The Standard

The TweetMeme button had a massive adoption rate, and was installed on millions of sites across the web therefore it became the one to beat! Large sites have now put pressure on the other social media sites to produce their buttons to the new standard. Therefore the 61px standard (if you have a better name let me know) is now the default for all social media buttons on the internet.

I thought I’d share some of my CSS habits/top tips, some of my habits may be more controversial than others, but it’s always good to share.

Looking Pretty

Always remember to format your CSS nicely. Most CSS coders are designers, and love to make things look pretty, which also makes the CSS easier to read.

One line CSS declarations – I always put my entire declaration onto one line, it makes declarations a lot easier to find, and even better if you keep your properties in alphabetical order.

Use Shorthand – My rule is that if you are setting any more than one property use shorthand, here’s a clue to what I mean:

/* You could right */
.dummy {
   margin-top: 10px;
   margin-bottom: 10px;
}
/* but what's the point when this exists */
.dummy { margin: 10px 0px; }
/* or even */
.dummy { background: url('myimage.jpg') blue no-repeat left top; }

Shortcuts – When your CSS file becomes massive instead of splitting the file up into manageable chucks, which causes unnecessary hits on your server, just split the file with comments. If you use a wild card character like @ you can easily search for specific sections.

Make things easy

CSS is tricky, so use tools to make it easier.

Grids – While I am still debating whether grids are appropriate for smaller scale projects, if you use a wide variety of different layout, or are having trouble with the compatibility of your current layout take a look at CSS grids, there are loads available such as Blueprint and the Yahoo UI.

Check – Always validate your code, i personally run mine through Microsoft Expression Web which checks for bugs, you can also use the W3C Validation Checker.

W3C CSS Validation Checker

Avoid using too many selectors – Just specify the minimum number of selectors needed. A td always appears within a tr which always appears within a table. If you find yourself nesting your selectors like the example below, you are probably being too verbose.

table tr td {...}
/* is the same as */
td {...}

Points, they all add up

Don’t forget that all the different selectors have a different weighting (also known as specificity), and the ordering of your selectors will affect which one has president.

A selector’s specificity is calculated as follows:

• count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

- Taken from the W3C specification

Browser Support

Avoid supporting anything but the most recent browsers. I don’t know anyone who use IE5 anymore do you? Also stop uses hacks for IE6, some careful rethinking and workarounds could be explored before resulting to using hacks. With the less hacks the more you can avoid having a separate style sheet for each browser. If you look at Wikipedia in source view you will see they have a separate style sheet for IE5, IE5.5, IE6, IE7.

Set things up

Spending a couple of minutes at the start of the project setting up all your colours and classes could save you hours in the long run.

Utilities – Build a set of CSS utilities which you could use everywhere. E.g.

.left { float:left; }
.right { float: right; }
.overflow { overflow: hidden; }
.clear { clear: both; }
.pad { padding: 10px; }

Define your colours – Define your commonly used colours at the start of the stylesheet then you will always know where they are for easy reference.

Keep Things Simple

Always go back and try and make your code simpler, and remember to comment everything. This make it easier to find changes and edit them. There is no need to get any more complicated than you need to be. For some more tips check out Smashing Magazine who have a great article on CSS ideas.

More Resources

W3C Tricks & Tips

20 Useful CSS Tips for Beginners

Top CSS Tips (snooka)

Of all the CSS3 selectors the structural pseudo-classes have to be my favourite. In particular I love :last-child selector, the :last-child CSS selector is incredibly powerful especially when positioning elements in a row, I am currently finding it incredibly useful when doing menus. Instead of providing a last class on the very last element in the row, you can now use pure CSS to achieve the same effect.

CSS 2.1

/*Each Element*
.image { margin-right: 5px; height: 20px; width: 20px; float:left; background-color: red; }
/* remove the margin on the last element so it lines up
.image.last { margin-right: 0px; }

CSS 3

/* parent of the image element */
.parent div:last-child { margin-right: 0px; }

The Downside

Unfortunately the bad aspect of this selector is that it does not fail gracefully. Meaning that a user in a none CSS3 compliant browser, (IE), it would fail horribly, this means that everything will be out of line.

Example

If you look at this in anything but a browser which supports CSS3 the last element will be on the next line.

More Resources

1. W3C Selectors Level 3
2. CSS3 Compatibility Table
3. MSDN Compatibility Table (tells you what works in IE8)
4. Take Your Design To The Next Level With CSS3

Twitter is quickly gathering pace and is fast becoming one of the most popular social networks. I have been using Twitter for nearly 2 years, mostly through their use of 3rd part applications like TweetDeck or Tweetie. I thought to myself why do I, and many other ‘power’ Twitter users not use the web interface? So here are some of my suggestions on how I would improve the Twitter UI.

Twitter home page design at the time of writing the article, including some reference points.

I will be focusing on a number of parts of the home page, the main ‘tweet box’, the implementation of the ‘lists’ area, how the data is presented and the integration with search. This is not meant as a critique of Twitter, but more as some helpful suggestions on usability.

Tweet Box

For lack of a better word, the tweebox is the textarea located at the top of the twitter homepage. I would really love to see it improved in a number of really simple ways:

• The ability to press enter to submit a tweet. Tweets aren’t multi lined and there is nothing else to do so why not make enter submit the form instead of press the button. Twitter has this problem in a number of other area’s as well, OAuth screen!
• Autocomplete the usernames in the textbox.
• Auto shortening. Twitter has already partly done this for really long links, but it would be nice if you could have the option to do it on the shorter links as well.

Page improvements

The live update of tweets, you know the little yellow box which tells you how many are waiting, is a fantastic addition. But I think they are missing the key points, why wouldn’t you show the tweet? I just find it really annoying.

The page is currently geared up to just tweeting. Users probably use the Twitter interface more to manage their tweets and accounts, maybe the front page should be geared in that direction.

Other

The lists nor retweets seem to be fully integrated into the UI they just appear to be something strapped onto the edge. It would be great if you could, for example, have tabs across your timeline which listed your most popular lists.

It would be great to hear your thoughts on how you would make twitter better, you never know maybe Twitter is reading this.

Better Twitter

Hopefully my recently released Firefox plugin Better Twitter will solve most of these issues.

Halloween is just around the corner and what better to jazz your blog up than with some Halloween related JavaScript. This tutorial will focus on making images appear and disappear on the background of your blog.

For this example I will be using a ghost which will appear every two seconds in a random location and disappear again. You can preview what this will look like by clicking the button below (only viewable in a web browser).

You can download the source files for this tutorial below as well as the ghost AI file.

Source Files

For this tutorial we are going to be using Script.aculo.us effects library with the Prototype core framework.

var Ghost = Class.create({
	initialize: function() {
	}
});

First of all we need to create our Class, which is called Ghost. Inside the class Ghost we have added our initialize function. The initialize function will be called when we create a new instance of the class. Therefore we need to put in all our setup code:

 // create the element
this.ghost = new Element('div', {'class' : 'ghost'});
// hide the element
this.ghost.hide();
// add the element to the body
$(document.body).insert({top: this.ghost});
// get the size of the document
this.size = document.viewport.getDimensions();
// set up the timer
new PeriodicalExecuter(this.show.bindAsEventListener(this), 2);

In this segment we create our hidden ghost element. We then store the size of the document, and load up our periodical executer to call this.show. The second parameter in the Periodical Executer is the time between calls, we are calling the show function once every 2 seconds.

show: function() {
	// randomly set where the ghost is going
	var x = Math.floor(Math.random()*(this.size['width']-200));
	var y = Math.floor(Math.random()*(this.size['height']-200));
	// set the style
	this.ghost.setStyle({
		'left': x + 'px',
		'top': y + 'px'
	});

	// show the object
	this.ghost.appear({
		afterFinish: function() {
			this.ghost.fade();
		}.bind(this)
	});
}

The show function needs to be added to the Ghost class. The show function first calculates where we want our ghost to appear, so we work out random x and y co-ordinates using the document sizes we gathered in our initialize function. We then position the element and call the Script.aculo.us appear effect which will slowly fade in the image. After the appear effect has finish we want to hide the ghost so we call fade.

Ok, now we have all the code complete we need to call the class. We can do this in a number of ways, you could bind the event to a button:

BOO

Or you can bind it into your document load function, which means it will start when the page loads:

document.observe("dom:loaded", function() {
	new Ghost();
});

CSS

The CSS is a really simple one line.

.ghost { width: 100px; height: 100px; position: absolute; background: url('yourimage.png') no-repeat; }

This tutorial is just a brief outline with what you can do with JavaScript this Halloween. If you have any other ideas you would like me to implement, please tell me in the comments below.

We all love CSS it’s fundamental to the web. However most of us do not use the full power of CSS. A quick rummage around the W3C specification and you will see how powerful CSS can really be. I’m talking about the CSS selector, sure we all use the basic selectors, but what about the more complicated ones.

Well here’s my guide to the most useful not very used CSS selectors (as well as what they are currently supported in).

CSS2

Pattern	Meaning	IE6	IE7	FF	SF	OP
E > F	Matches any F element that is a child of an element E.
E:first-child	Matches element E when E is the first child of its parent.
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:active E:hover E:focus	Matches E during certain user actions.
E + F	Matches any F element immediately preceded by an element E.
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

CSS3

Pattern	Meaning	IE6	IE7	FF	SF	OP
E ~ F	Matches any F element preceded by an element E.
E:empty	Matches element E where E has no children, including text nodes

If you need a detailed walkthrough on how these selectors work, please refer to the W3C Specification on CSS3 Selectors (which includes all the CSS2 selectors).

A Couple of Examples

I couldn’t just give all these CSS selectors without giving you some great examples of how they can be used.

E:first-child/E:last-child – You have a ul list of elements which you float horizontally. With first child and last child you can easily set the margins for the first and last child different from the remaining items:

ul { list-style: none; margin: 0px; padding: 0px; }
ul li { float: left; margin: 0px 10px; }
ul li:first-child { margin: 0px 10px 0px 0px; }
ul li:last-child { margin: 0px 0px 0px 10px; }

E:empty – You may have a situation where you have an empty paragraph. Paragraphs will always have a margin top and a margin bottom, which could look unsightly. So lets remove it.

p:empty { display:none; }

What’s your favourite selector? Do you care that they are not always supported?

I’ve just had this crazy idea, what would happen if all the <div> tags in the world were converted into <d> tags. Image how much space it would save, well you don’t need to imagine I have broken out my calculator and worked it all out.

Taking the top 5 website’s from Alexa:

Approximate byte size per 2 characters.

For every element that would be converted to a <d>, on average 5.93 bytes are saved. Considering that a typically website has 127 <div> elements, taking from the average of the top 5 website’s, this will create a saving of 0.753Kb per web page. That might not seem like a lot but added together across all the website’s imagine how much time it would save.

Of course this is just pie in the sky, but if the W3C thought of shrinking the HTML tags we use, website’s would load faster, and every millisecond counts. Hopefully this will cause some debate on why HTML elements are longer than they need to be.

I am only suggesting the HTML tags div and span since they convey no semantical meaning, unlike elements like p.

There is a very little used and unknown method which allows you to utilise JavaScript within a CSS file. The CSS Expression property allows you to assign a JavaScript expression to a CSS property. For example, this allows you to set the position of an element according to the browser size.

[code="css"]
width:expression(document.body.clientWidth > 950 ? "950px": "100%" );
[/code]

Do not use CSS Expression, they are unreliable, slow and are only supported in IE!

CSS Expression suddenly came to me as a solution for the currently much debated feature (here and here) of variables in CSS3. This could theoretically be currently achieved through the use of CSS Expressions.

[code="css"]
function blue() {
return 'blue';
}

body { background: expression(blue()); }
[/code]

CSS Expressions are horrible and unsupported, so please don’t use them in development. They do, however, highlight a interesting and little known feature of CSS.