CSS rules that slow down the browser speed (rendering)

Question

I'm searching for the biggest mistakes that you can make in your CSS code; CSS rules that slow down the browser speed (rendering).

For example:

.myDraggables {
    box-shadow: 0px 1px 2px #000 inset; 
    -moz-box-shadow: 0px 1px 2px #000 inset; 
    -webkit-box-shadow: 0px 1px 2px #000 inset;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd, endColorstr=#fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#fff));
    background: -moz-linear-gradient(top,  #cdcdcd,  #fff);

    border-radius:5px 7px 1px 3px;
    -moz-border-radius:5px 7px 1px 3px;
    -webkit-border-radius:5px 7px 1px 3px;
}

If you have 10 draggable elements (many tags inside) with this class, the drag would be very slow (jerk). So, does anybody know a list of CSS rules that you shouldn't use?

Answer 1

One that's easy to make: using a tiny image (lets say 5x5) as a background repeat for big areas is slow when it comes to rendering. So it's advisable to use a bigger picture for repeat patterns (eg. 50x50). The size of a file increases just a bit, but the performance is way better.