CSS or image for background and menu arrows?

开发者_开发技巧Is is better to use CSS or image for these two cases:

1) Need a gradient like shading of purple on my homepage (color fades from dark purple to light purple)

2) All the menus on my site have an arrow "More " and when opened it changes to "Less "

Currently my design team has made the homepage as CSS and the arrows as images. But I cant see any advantage or disadvantage of one over the other or what is best practice to use?

---

Depends on what browsers you want to support.

1) If it needs to be cross-browser compatible across a wide range of browsers, go for an image.

2) I would stick with images for the arrows. They can be made with CSS using border trickery, or canvas, but I don't think it's worth the hassle.

---

I recommend the use of images. They are supported over all browsers and old versions. You can further apply CSS styling to the images, if needed.

Using CSS to create icons and gradients is difficult and isn't supported across all browsers (especially IE).

Extra request for multiple images (that cache) > using CSS tricks that aren't cross browser