The first thing to note about CSS selectors is they don’t work in the way you’d expect. In the west we read a page from left to right. Reading a CSS selector, you’d expect that’s what the browser does as well. Wrong! The browser actually reads a selector from right to left (in Mozilla’s case anyway, and most likely in others too). So take the following CSS as an example:

The browser first looks for all the anchor tags (called the “key” as it’s the rightmost selector), then looks at the list items, it evaluates those and throws away the results that don’t match. Next the browser moves onto elements with a class of “meta”, throwing out results that don’t match and so on… you get the idea! There’s so much redundancy in the above selector, it could easily be cut down to:

This example is much more efficient. There are less rules for the browser to evaluate, it’s much easier to read and if you apply minimal selectors across your whole stylesheet you will notice a big difference in file size. The key to writing efficient selectors is to be as specific as possible. Whatever you do don’t write this:

The universal selector(*) is bad (even body isn’t needed)! You are targeting every single element in the DOM and setting it’s padding and margin to zero. For a large page that could easily be thousands of elements!

I actually inspected the stylesheet for this website and went over it with a fine tooth comb. I found many additional selectors that just weren’t needed. The size of my stylesheet went from 18.3kB down to 16.5kB, a saving of 1.8kB. It doesn’t sound a lot in terms of file size, but that’s a whole lot of selectors the browser no longer has to evaluate to render the page.

Luckily there are tools available that can help you make your CSS more efficient, as well as many other areas of your website too. The first tool I’d recommend is called Page Speed, created by Google. The Page Speed extension is available on both Chrome and Firefox. Once installed you have the option to run it on any page; it will give you an overall score for that page and recommendations on how to improve it.

Page Speed results for this site. Note the "Use efficient CSS selectors" drop down.

The second tool I’d recommend is Opera’s Dragonfly. Dragonfly (similar to Firebug, in name at least) is Opera’s developer toolkit, much like Web Inspector for Chrome. An awesome feature that Dragonfly has, that other toolkits don’t is “style recalculation”. Style recalculation gives you a breakdown of all the selectors that were run on the page, how long they took to evaluate and how many elements they hit along the way (hits).

Dragonfly gives you an extremely useful breakdown of what selectors were used and how long they took to evaluate.

If you look closely at the results in the image above, you will see that the selectors with the most number of hits are the ones involving the universal selector(*), as you would expect. You may also notice that most of the timings say 0.0ms which isn’t very helpful. This is due to the fact that the size of the DOM being tested is very small, and timing to 1 decimal place isn’t accurate enough to show the actual time it took to evaluate. If you were to run this test on a huge page, say the HTML5 Specification for example, you would really be able see the difference in CSS selector efficiency.

This feature of Dragonfly is very new and is still in testing. There are a few issues still to be ironed out in future releases but it’s definitely a tool to keep in your bookmarks.

A word of warning when it comes to writing efficient selectors. I found myself trying to make the selectors so efficient it was becoming quite hard to pin-point where exactly on the site they were being used. If you have a very specific area of a site you are trying to target, it is easier to read if you have the selectors starting with an ID reflecting that area. You then know for certain that the changes you make won’t affect other parts of the site. Also remember that removing “unused” selectors will affect the specificity of the rule. You could end up breaking something, as what you thought was an unused selector was actually used in overriding another rule.

Having too many descendent selectors is something that Page Speed frowns upon, but as with all things in life it’s a case of finding that happy medium. In this case it’s between efficient selectors and CSS that is easy to read and maintain (for you and other developers).

HTML5 has added a host of new tags which have much more semantic meaning. So instead of using ‘divs’ to section off areas of your page layout, you can now use:

It’s certainly a welcome addition to the modern web. My favourite part of HTML5 has to be the doctype (other than the canvas element):

Look how simple it is! No more copy / paste from a previous project for this doctype.

My main concern when converting the theme to HTML5 was how it would work in IE; as IE8 supports parts of HTML5 but IE6 and IE7 not at all. When IE comes across a tag it doesn’t recognise it just ignores it. Since the tags aren’t recognised you won’t be able to style your lovely new HTML5 template in IE6 & IE7. Lucky you can patch this missing functionality using JavaScript. Remy Sharp has created a script called html5shim, that adds the missing tags to IE. Just add the following code to your header and you will now be able to style your HTML5 tags:

The script must be in the header and must fire before the DOM is created. The script simply creates all the new HTML5 elements using the document method ‘createElement’, you don’t even need to attach the created elements to the DOM! Now IE will recognise the tags and you can get on with your page styling. Yay!

Those who use WordPress 3.0 may have noticed that the default Kubric theme is no more and it’s been replaced with a new theme called twenty ten. The theme uses the HTML5 doctype but it doesn’t use any of the new tags. I guess because of the IE issues. Maybe this will be changed in future releases.

The Nooshu theme is still a work in progress, and I’ll modify areas as I learn more about the new HTML5 features. Here are a selection of links that I found incredibly useful while working on the theme:

• Dive into HTML5: Read through this article and you will be well on your way to learning HTML5. It delves into the history of HTML and progresses forward right up to implementing the new specifications.
• HTML5 Doctor: Looking for HTML5 related news or need some clarification of a new tag? Look no further than HTML5 Doctor. Lots of articles available for you to read and there’s even the option to ask a question if you don’t find the answers you are looking for.
• HTML 5 Outliner: So you’ve created your shiny new HTML5 template; why not check it with the outliner to see if it makes sense to a user / search engine.
• W3C Markup Validator: It’s been a while since I’ve used a validator since I have one built into Firefox, but the W3C validator was very handy for pointing out attributes and tags that are no longer supported in the specifications. It also gives you a quick benchmark to aim at.

If you have any other useful HTML5 tips and links let me know below.

One of Aptana’s helpful features is the ability to generate code using the easy to access menu bar at the top of the code window (see image):

Generate and wrap code at the touch of a button

A superb feature it must be said, but it is totally eclipsed when you start using the Zen Coding JavaScript Library. Zen Coding, written by Sergey Chikuyonok isn’t a JavaScript Library in the traditional sense, it isn’t uploaded and linked to in your web page; it’s installed as a plug-in for your selected text editor. As you can see from the list there are many versions available, so you aren’t restricted to only Aptana.

Let me explain what it does first, then I’ll show you how to install it (for Aptana). As a Front End Web Developer you will often find you’re writing out the same blocks of code again and again. You can just copy / paste then modify, but even that’s quite slow and tedious. Zen Coding uses a technology that you will be very familiar with: CSS selectors. It may seem confusing at first, but once you see it in action it makes perfect sense. Here are a few code examples I use all the time:

Using simple CSS selectors we’ve been able to quickly generate an unordered list that can be used for example, as a page navigation. You can even use more advanced selectors like siblings and abbreviated groups to generate more advanced HTML:

It may take a little while to get into the routine, it’s all to easy to slip back into typing the code by hand; but once you do you can build the basic mark-up of a page in a matter of minutes.

There’s a very informative article on Smashing Magazine from last year which you may find useful if you plan on investigating Zen Coding further; I highly recommend adding it to your “toread” list. There are so many more functions available that I haven’t even touched on in this article, you will be amazed.

Now that you’ve seen Zen Coding in action you may be wondering how you install it for use with Aptana. Well luckily it’s dead simple. First create a ‘new project’ in Aptana, call it whatever you like e.g. ‘Zen Coding’:

Within the new project create a scripts directory and copy the Zen Coding JavaScript into into the directory. That’s it you’re done! Restart Aptana and start using Zen Coding. Once you’ve typed in a string of CSS selectors you wish to convert to HTML, hit CTRL + E (Expand Abbreviation) and it will do the rest for you. One thing to note, you must keep the new project you’ve just created open at all times, else Aptana won’t be able to access the scripts.

You can customise the key you use expand an abbreviation by editing the “Key” value in “Expand Abbreviation.js”. For more information on available keycodes see the Aptana documentation here.

Hopefully you find Zen Coding useful, it’s certainly changed the way I code on a day to day basis.

Like with anything, you need to have a solid foundation of knowledge to build upon when it comes to new technologies, sometimes it’s a little dull but it will pay dividends in the future. Once you have the basic knowledge the world is you web browser. So here are a list of five books I’ve read in the past that I’ve found particularity helpful.

DOM Scripting

The reason I’ve put this book first is simply because it’s one of the best technical books I’ve ever read. The way it’s written is simple to understand and concise. All the way through the book it explains not only what you are doing but also why you’re doing it, and why you should also follow the same methodology.

If you are a complete beginner to JavaScript and the DOM this book will get you up and running and understanding in just a couple of chapters. Now some may say “oh I don’t need to know this anymore, that’s what JavaScript librarys are for”, but in my opinion that’s a dangerous road to go down. If ever your chosen library doesn’t do what you need, or if you can’t use a library for whatever reason; then you’re in trouble.

If you know the basics of the DOM and how to manipulate it using JavaScript, you’re much more likely to solve any issues you encounter and you’ll have a much better understanding of what the libraries are actually doing.

Author: Jeremy Keith (Amazon).

Eric Meyer on CSS

There simply couldn’t be a review of front end development books without a book from the wizard of CSS, Eric Meyer. Eric has been a major part of the CSS community for many years; helping to educate developers in the proper usage of CSS and how it can make development so (so!) much easier. I had the pleasure of attending a 2 day workshop of his in London a few years back, and still use what I learnt there on a day to day basis.

‘Eric Meyer on CSS’ will teach you some of the advanced techniques involved in using CSS in a practical manner. You take a plain website built using tables, clean up the mark-up and layer on features and functionality using CSS over the various chapters; so rather than just getting a list of properties and selectors to read about, you actually get to see a live project changing over time.

Be warned, the book isn’t for absolute beginners, you do really need to know the basics of HTML and CSS to get the most out of it. Not to worry though, all the information you need to learn the basics of many different languages including HTML and CSS is available online at w3schools. You don’t have to stick to HTML and CSS, they also have JavaScript and the DOM if you’re feeling adventurous.

Author: Eric Meyer (Amazon)

JavaScript – The Definitive Guide

The very large book you can see in the image above is ‘JavaScript – The Definitive Guide’, and it really is a definitive guide. It has of 900+ pages of wonderful JavaScript! Now I wouldn’t expect anyone to read it page by page (although that’s what I did), but it’s defiantly a book you should have in your tool kit for reference. It goes over pretty much all aspects of JavaScript you will ever use and even though it is quite technical it isn’t hard to follow; with plenty of examples and explanation of the code.

Again there’s an argument for do you need to know JavaScript if you just intend on using a library. Well I guess that up to you, but I personally don’t feel comfortable using any sort of framework / abstraction without having at least some understanding of the language it is built on.

Author: David Flanagon (Amazon)

Learning jQuery

So assuming you know about HTML, CSS and JavaScript it’s time to learn one of the many JavaScript libraries available. Now I agree with Christian Heilmann on a point he made at Full Frontal 2009 (I think it was Christian who made it), it doesn’t matter what library you use, as long as you use one!

‘Learning jQuery’ is a fantastic book that will take you through all aspects of jQuery, from setting up and writing basic code to Ajax and writing your own jQuery plug-ins. If you know how to use CSS to select parts of the DOM then jQuery will be simple for you to pick up and use. The book is filled with practical examples and applications, all using best practice methods.

I only had one slight gripe with the book while reading it; I found the font for the code blocks was slightly too big, so you tended to get a lot of wrapping on large code blocks. In terms of the content though, it really is one book that is a must read if you use jQuery or want to use jQuery in your projects.

Author: Jonathan Chaffer & Karl Swedberg (Amazon)

PHP Solutions

Now I know what you may be thinking, PHP isn’t a front end language, it’s a server side language. That is very true, but one thing I can guarantee is one day you will have to integrate the front end templates you’ve built into a server side language; be that PHP, .Net, JSP, Java etc. As I’ve mainly worked with open source technologies, PHP is primarily what I integrate into.

‘PHP Solutions’ is another excellent Friends of Ed book that takes you through lots of practical uses of PHP that you can use straight out of the book. It covers subjects such as setting up your server and includes, to online galleries and security. You may not use any of the functionality it covers since most frameworks and CMS’s have the functionality built in; but it will give you an understanding of how PHP works as a language which in turn will help you when it comes to integration.

Author: David Powers (Amazon)

So there you have 5 books I’d recommend to any Front End Web Developer looking to expand their client-side knowledge. Leave a comment if there are any books you’d recommend and I’ll take a look and add it to my Amazon wishlist.

Using the ‘progressive enhancement’ methodology, we build a website that works in all browsers first, then ‘layer on’ the cool features and ‘nice to haves’ after, so users with modern browsers get the full site experience and older browsers still have access to all the content. CSS3 sits in the ‘nice to have’ category for the moment.

While looking through the W3C CSS3 Working Draft I came across a section called ‘Inserting content into an element’. The CSS3 pseudo-elements listed here are used to add content to the page using CSS. Cool! ….wait a second; for years we’ve been separating layout from content, allowing us to easily edit a whole website layout from a single file. The pseudo-elements seem to be going against this mantra! Uh ohh! It’s controversial, but I believe if used responsibly the pseudo-elements shouldn’t cause any major accessibility issues.

::before & ::after
The ::before and ::after pseudo-elements are used to add content before and after the content inside the selected element (surprising huh!):

View a demo here.

The specifications even allow you to add more content by iterating the pseudo-elements, so ::after::after (or ::after(2)) but this isn’t supported in current browsers I have tested. I’m personally hoping that part of the specification isn’t implemented, as you can have too much of a good thing. You could end up in the nightmare situation of pages completely generated using CSS3 using multiple levels of ::before and ::after.

The CSS3 specification has also outlined the pseudo-element ::outside but it hasn’t been implemented yet in the current version of Firefox I’m using (3.6.3).

Outline will allow you to wrap an element inside another element and then add styling to it. Usually you’d modify the source code by adding extra divs to do this, but it isn’t always possible. Outline would have been very useful over the past couple of years for adding ‘sliding doors’ and rounded corners where needed, without having to clutter up the mark-up with ‘for style’ only tags. Oh well it’s a tool for the future.

I can’t say I’m a big fan of these new pseudo-elements as they seem to be stepping on HTML’s toes. It’s hard to think of a situation where you’d want the CSS to be writing content to the pages since it isn’t accessible to screen readers or search engines, but I’m sure there are some. The only example that springs to mind is when you add a ‘:’ after the label on a form field, you don’t want a screen reader to read out the ‘colon’ so you add it using CSS.

I’d love to hear where other people plan on using ::before and ::after, or where you are using them at the moment.

Now I doubt restyling the website is high up on NASA’s priority list, but there’s no reason a user can’t do it for them (only on their own machine of-course). All you need is Firefox and a custom CSS file.

The CSS file you will need is called userContent.css, and it resides in your Firefox profile under the ‘chrome’ directory. To find your profile directory look under ‘Help’ > ‘Troubleshooting information…’, there you will see a button to open the profile directory (Note: I wouldn’t change much in here, it can break your profile!). If you still can’t find it you can always look here. You may not have a userContent.css by default, so feel free to create a blank one.

This is when the fun starts, first you want to add this code snippet:

This is a Mozilla specific property that will allow you to include CSS for pages on a specific domain; note the ‘antwrp.gsfc.nasa.gov’. Feel free to add as little or as much CSS as you want until you are happy with the page layout. Here’s a sample from the userContent.css file I created:

To make the page look in any way presentable I’ve had to rely heavily on the new CSS3 selectors available in most modern browsers; as the state of the mark-up on the pages is truly awful. I guess it all adds to the challenge though, it’s certainly a great way to learn CSS3.

Here are a couple of before and after images I created, nothing spectacular but hopefully it looks slightly better:

Before and after screenshot of the archive page.

Before and after screenshot of the daily picture page.

The ‘index’ page was a page to far for me, I have no idea what the developer was trying to do with the mark-up, it’s overuse of tables for layout really doesn’t help either. On the end I got bored but feel free to dive in and take a look.

It’s also worth mentioning that it is possible to customise the style of any website using a Firefox plug-in called Stylish, you can view many examples of it’s usage on userstyles.org.

Here’s the link to download the userContent.css I created, I’d love to see what other designs people can come up with using some CSS3 and NASA’s horendus mark-up!

Clean CSS

I have been using Clean CSS for a few years now to clean up and optimise my CSS. The tool will give you a break down of where you can be making optimisations and also point out potential issues with invalid properties. You can either apply the changes manually, as it gives you a line number (my prefered method) or you can download the output as a file. I must admit I only use it every so often as I’ve merged most of the optimisations into my working process.

An exception to that rule is when working with other peoples CSS, it’s always my first port of call. There’s even the ability to create your own template, so the CSS can be formatted just as you like it when it comes out the other end.

The CleanCSS interface simple to use with lots of options to play with.

Snipplr

Snipplr has been around for a couple of years now, it’s a excellent place to store all those little snippets of code that you often use. You can view other peoples snippets too, so if you’re looking to a solution to a problem there’s no need to re-invent the wheel; look see if someone else has a solution.

The only real issue I have with Snipplr is the amount of spam it receives, which is a real pity as it’s such a useful tool. Maybe that’s something the developers can look into fixing.

Em Calculator

For a few years now I’ve been setting my font sizes using the relative unit em’s rather than pixels or points. This was due to the fact that if you set your font size in pixels, IE6 users can’t increase the font size due to IE6 being… erm… a truly awful browser; not good at all for accessibility. Luckily IE6 is gradually fading away and IE7+ all scale font sizes properly, so in the future this tool won’t be needed.

The problem with using relative font sizes comes when you have a nested elements. Say you have an unordered list with its font size set to 12px (0.75em) and you want one of your list items to be set to 10px (0.63em). Since we are using relative font sizes the 0.75em has an effect on the lower list items. If you simply set the the list item to 0.63em the text size will be tiny because you are asking the browser to set a size of 0.63em of 0.75em. Not what we wanted at all! This is where Em Calculator comes in useful as it does all the calculations for you. You actually needed to set the list item to 0.83em….duh!

An example of how Em Calculator works with my example unordered list.

jsFiddle

I’ve mentioned jsFiddle before, it’s a tool that allows you experiment with HTML, CSS and JavaScript and see the results on the same page. In the past couple of days they’ve added a new version of Processing and the RaphaelJS library. A link to my previous post on jsFiddle is available here.

HTML Entity Character Lookup

If you’ve ever had to build a set of multi-lingual HTML emails you will know how tedious it can be to encode all characters so they are valid HTML. Lucky with HTML Entity Character Lookup by LeftLogic it’s simple. Copy and paste the character you want to encode into the tool and it will give you encoded version; do a quick search and replace then you’re done.

Quickly lookup character entity's using Leftlogics tool.

For OS X users there’s also a dashboard widget you can use for easy access.

CSS Sprite Generator

Using the sprites method can speed up your page load time by minimising the number of HTTP Requests a users browser has to make to the server. It involves consolidating all your little icons and background images into one file, then moving that one image around using the background-position property.

You could do this manually in Photoshop, or you could get an on-line tool to do it for you. CSS Sprite Generator is my favourite of the sprite generators available. Simply ZIP up the files you want to sprite, upload them to the tool and it will return one large image and all the relevant CSS background-positions for you to copy / paste into your CSS file.

It’s particularly useful when it comes to site navigations. Having the off, on and hover states all in one background image means the user doesn’t see that ugly flash of unstyled content as hovering over the navigation bar, since all states are loaded when the user first hits the page.

Are there any others I’m missing? Post a reply if there are others you use.

My favourite feature that really stands out is being able to include one of the many popular JavaScript library’s by simple toggling a drop-down box; it even has different versions of each library to choose from. This is a really handy feature if you are a plug-in developer; keep your plug-in code in jsFiddle and quickly see if the latest version of the library breaks it.

Quickly view your code change at the touch of a button

Library’s included so far are:

• Mootools Core
• jQuery
• Prototype
• YUI
• BBC Glow
• Dojo
• Processing.js

A couple of other features available are the easy to access code examples for each library and ability to run Ajax requests directly in the page. It’s like a mini IDE in your browser, all it needs now is an error console; maybe that is on their to-do list. If you don’t use JavaScript library’s and just want vanilla JavaScript, they have that option too.

As an example I’ve added my charactersLeft jQuery plug-in to jsFiddle, take a look here. Very cool huh!