High quality images by CSS

The iPhone 4.0 has a retina display, you can upgrade web images by using the background-size CSS3 property. Not all browsers support CSS3 yet (especially IE), luckely we have the following code to help us out:

@media only screen and (-webkit-min-device-pixel-ratio:2) { }

But although this code seemed enough for it's purpose, it's not. I would like a statement such as:

IF BROWSER SUPPORTS BACKGROUND-SIZE THEN { ... } (in CSS)

Why you ask? Well, the Samsung Galaxy S can show really sharp images as well with background-size, but doesn't have a pixel-开发者_如何学JAVAratio of 2.0 to trigger the CSS.

Can anyone help me out?

I think that you are looking for a library like modernizr :) Modernizr allow detecting if client support new features (especially css3) or not.

With simple css you can differenciate browser and adapt your code.

Here is the part that you need : http://www.modernizr.com/docs/#backgroundsize

Oh, also, thank's for your retina tips ;)

There is some discussion among the W3C CSS Working Group about adding feature queries to CSS. The proposal is to have a syntax along these lines:

@supports ( background-size ) {
  ...
}

However, even if accepted, it'll be some years before these proposals reach browsers. For now you're better off with the modernizr approach described by Tim.