Wednesday, August 20, 2008

CSS tips

Been back in CSS today. Here are some things I learnt today.

1) text-transform will allow you to transform the text to uppercase, lowercase or capitalize i.e.

h1 {
text-transform: uppercase;
}

This is a handy alternative to typing everything out in upper case (which is bad because the designer may change his mind to switch away from all caps at some stage).

2) If you are going to use jQuery to show/hide a table, wrap it in a div and toggle that instead. This is because show/hide/toggle in jQuery changes something from display:none to display:block. A table's display is inline-table by default and setting it to block will lead to some unexpected results.

3) If you have to write CSS (or anything) for IE only, you can use conditional comments
<!--[if IE]>
Special instructions for IE here
<![endif]-->
It's best not to use special CSS code for IE at all, but in some cases it's unavoidable.

4) You can modify the sliding doors technique by using a single image (instead of 2 images). The advantage to using a single image is fewer graphics to download (as they are cached).

No comments: