I have updated this site with a few techniques that I have been reading about in the web dev community. Some of them are pretty obvious and others are simply code tweeks. I have took the attitude of using advanced CSS techniques that will only get seen in modern browsers, also known as “too hell with Internet Exporer”. Links to the tutorials I used have been included where appropriate.
Pages now validate, it took a while to disect all the crap that was in wordpress but I got there
I added some new fonts. I started experimenting with typekit but after coming across the issue related to the flash of unstyled text I decided to simply use @font-face instead.
This is very much a work in progress so I will be adding more things over the next few days and weeks. My blog is my playground and to answer the question “what does it look like in ie”, well I dont know cause I havent tested yet, but I bet its not as good as it looks in FF or Safari.
Improved web site perfomance due to a reduced in http requests
Simple rollovers without JavaScript
Easy management of multiple images within one file.
Due to these benefits I find myself keen to use CSS sprites whenever I can. However, until recently there has been one situation where I found myself unable to add particular images to CSS sprites. Right aligned images.
When positioning a background image you set the top and left positions like so:
background-position:10px 30px
The first value represents the horizontal position and the second represents the vertical position. This example would move a background image 10px from the left and 30px from the top. You can use other units like relative numbers (%, em), or the length keyword combinations top, bottom, left, center, right.
Positioning images within a CSS Sprite you use the units (pixels or percentage) with a negative value
background-position: -10px -30px
I like to think of this as clipping an image, you are basically saying cut 10px from the left of my image and 30px from the top and show the rest of the image from that point in the the top left position. As you are using the positioning coordinates to “clip” the image you are unable to move the image position like you can with positive values. Here’s an example page of left aligned sprites.
This works for left aligned images however if you want the image to be right aligned things are a bit different. Although the W3C state you can’t do this, it is possible to combine units with lengths. You can use the keyword or percentage to get the right hand side of the image and pixels to get the top coordinate. e.g.
background-position: 100% -10px
or
background-position: right -10px
I have x-browser tested this technique in IE 5.5 upwards, FF 2 & 3, Opera and Safari on Mac and Windows and it works fine and the CSS still validates too. You can see the right aligned sprites on this demo page.
When the sprite contains multiple images positioned horizontally then the images to the left may get shown. What I tend to do is set up a seperate sprite for all images that are right aligned, though if you want to keep everything in one place you could just place all sprites vertically or make the sprite extra large and right align the appropriate images within the sprite with plenty of white space to the left.