CSS Redundancy Checker

When A web site been running for some time the CSS-files can grow very large and it is difficult to identify which classes that are really in use.

Infovore has been trying to tackle this problem with the new tool CSS Redundancy Checker that can be downloaded at Google Code.  You have to download and run it locally, and it will identify CSS-classes that are not in use in the code. It only works with HTML- files and not dynamicly genereated web sites.

Would be great to have this running online. Is there anybody who knows of any other service like that? 

By Jesper Lind

This autumns CSS Reboot has begun


Yes! I have finally completed my contribution for this autumn's CSS Reboot. An affair where hundreds of web developers are encouraged to update their web sites simultaneously.

The process
I am not an web designer but foremost an programmer. I can not compete with the other contributions of the reboot but wanted to take part anyway. My goal with this design was to create an web standard correct site without any CSS-hacks at all. I was really tired of the old look and wanted to improve. I wanted to use rounded corners on some places and for this I used the teriffic Nifty Corners Tube. But since it is not possible to have transparency on the outside of the corners I also used another technique found on 456bereastreet.com.

No support for IE6
I decided not to have any support for IE6 or earlier versions of Internet Explorer and I wanted to use transparent PNG images (which does not work in IE6). So if you can't see my logo in the top or if the borders look strange - you are probably using IE6.

Other rebooters
There are a lot of nice rebooters this time. I will update this section as I find more web sites that I like. Here are some of them in no particular order.

I especially like 32framespersecond.com with the nice collage of images.

The german designer site Mein Brandenburg has done an absolute masterpiece. Very nice images in the gallery as well.

I also like the contribution from the developer Edoardo Sabadelli. A nice design with an intresting three-column layout with the meny in the middle. Works really well.

Weknowhtml.com has done a stylish layout against a dark gray background. Love that frog! Simple and clean html, these are definitely an company I would trust if I needed a site design.

Gradient Dropshadow Curve has a light design. I really like that AJAX search-box as well.

By Jesper Lind

The confusing cursor:hand declaration

How to make make an cursor as a hand on elements is something that been confusing me for a while. Now I have understood what I've been doing wrong. Cursor:hand is not a valid CSS declaration but only a own invention from Microsoft. You should instead use the standardized declaration cursor:pointer. Cursor:pointer works in IE6 and IE7 but not in the older IE5 and IE5.5. If you have users with old Microsoft browsers you can use a dubble declaration.

element { cursor: pointer; cursor: hand; }

The order of the declarations is important, the modern browsers will ignore the last declaration. This can cause CSS validation errors so I think I will choose to leave the old IE versions to their destiny and only use cursor:pointer in the future.

Read more about cursor styles

By Jesper Lind

How to make a link destinct?

There are several ways of making links visible in a block of text. Here are some examples.

This is a link right here but you couldn't see it right? Perhaps we should make them appear with dots beneath them like this or in another color. The yellow shade is a bit too pale, you can hardly see it can you? Or should all links be in bold, inverted or perhaps underlined? Which is your favorite link design?

CSS for the links above

<style type="text/css">
a.noStyle, a.noStyle:link, a.noStyle:active, a.noStyle:visited { color: #000; text-decoration:none; }
a.noStyle:hover { }

a.dotted, a.dotted:link, a.dotted:active, a.dotted:visited { color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.dotted:hover { border-bottom:1px solid #000; }

a.invert, a.invert:link, a.invert:active, a.invert:visited { color: #fff;background-color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.invert:hover { border-bottom:1px solid #000; }

a.yellow, a.yellow:link, a.yellow:active, a.yellow:visited { color: #E2D459; text-decoration:none; }
a.yellow:hover { text-decoration:underline;}

a.underlined:hover { text-decoration:underline;}</style>

By Jesper Lind

Drop shadow with transparent PNG

I found an interesting article on PositionIsEverything.net about how you can create dropshadows with transparent PNG images.

The HTML code for creating a box looks like this.

<div class="outerpair1 textbox"> <br /> <div class="outerpair2"> <br /> <div class="shadowbox"> <br /> <div class="innerbox"> <br />This is a demo showing how to make drop shadows with transparent PNG images. <br /></div></div></div></div>

View a demonstration
Link to CSS
By Jesper Lind

Internet Explorer 7 (Beta 3) is released


I tested beta 3 a bit and it looks very good. It's a bit irritating that you can't (as far as I know) run both of the versions on the same machine. Since I have a big need to test websites on IE6 I was forced to uninstall IE7.

Now we are waiting for the final realease (due this autumn). The big question is how well it will suppport the web standards from World Wide Web Consortium. Hopefully it will be much better than the old IE6 which lacks in a number of areas.

By Jesper Lind