Detect CSS Property Support Only Using CSS

Question

Short question

Using CSS only, how do I determine if the background-size property is supported? If it is not supported, I would like to provide some fallback CSS. I already know how to do this with Javascript, but it will clear the CSS.

Long question

I have a high resolution sprite image that should look good on all cell phones, regardless of its exact pixel density. Using the focal focus size , I can scale the sprite accordingly.

.sprite { background-image: url(sprite180x76.png); /* 180 / 2 = 90 */ background-size: 90px auto; } 

There are versions of iOS and Android that do not support the background size property , so the sprite will look twice as large as it should be. For these older systems, I would like to load a low-resolution sprite without background scaling:

 /* fake CSS */ @notSupported(background-size) .sprite { background-image: url(sprite90x38.png); } } 

Answer 1

CSS does not have conditional statements because it is not a programming language like Javascript. Although, I believe that there may be some conditional statement in CSS for CSS.

You will need to rely on JavaScript to get some conditional test case for CSS.

Meaning, you cannot directly detect CSS support.

However, CSS has a "trick" due to its "cascading" nature, but it can only be used when looking for old code with newer code for the same style.

This sounds funny, here are a few examples:

 -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; 

In browsers that support official CSS, this will be the style indicated on line 5. In older versions of, say, Firefox, line 1 will be applied and line 2-5 will be ignored because they are unknown.

Another (and possibly best) example might be:

 background-color: #AAA; background-color: rgba(0, 0, 0, 0.5); 

This code will give the background a gray color, while new browsers will give it a black color with 50% transparency, overriding the old color.

Hope this helps.

Hooray!

- Update -

I just came across something that might help. In Aaron Gustafson’s book “Responsive Web Design,” he mentions how CSS will ignore the whole rule if a given browser / renderer does not support this selector.

With the concept above, if you can find a selector that was not implemented in the old version but is available in the newer version, you can do something like this:

 /* fake CSS */ .sprite { background-image: url(sprite90x38.png); } [[ selector that is supported by newer browser/OS ]], .sprite { background-image: url(sprite180x76.png); /* 180 / 2 = 90 */ background-size: 90px auto; } 

The idea is that for "old" browsers you can download the old PNG, but for a newer browser, it will load a larger PNG and resize the background.

The only thing I will worry about is that this causes the supporting browsers to load both images, but apply them.

And it still requires finding an unsupported selector in one version of the other. Quicksmode.com can help you find it:

http://www.quirksmode.org/css/contents.html

- UPDATE 2 -

I put this in the comments, but I will add it here, as this may help. I spent some time trying to figure out which version of iOS 3.1.3 browser is supported, and therefore which selectors can be used with the above trick.

I found this Apple developer site: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html

If you do a page search (ctr + f) for the background, it shows that iOS 1+ supports the proprietary version:

 -webkit-background-size: length -webkit-background-size: length_x length_y 

This may be a possible solution. If you add this to the real, you can provide backward compatibility.

  -webkit-background-size: length background-size: length 

Hope this helps find alternative solutions, since the original question of running a conditional test to see if a rule is supported is not possible in CSS right now.

Answer 2

You cannot (at the moment) find support for property A and, given or not this support, serve different values ​​for property B only with CSS ...

... unless the browser support for properties A and B is exactly the same! Then follow the instructions below:

 selector { propertyA: valueA; propertyB: valueB; } 

both fail or both succeed.

The rest of the problem is to find a CSS property that has the same support as background-size :)
I was thinking about multi-background : it should (not) work in IE6 / 7/8 in accordance with Standardista CSS Background Properties Support , but I can not test in iOS and Android, only in bada / Dolfin 2.0 (Samsung Wave, also based on webkit).

Here's the script: http://jsfiddle.net/PhilippeVay/2VaWu/ which displays a paragraph with only a simple background that any browser should display, and then another paragraph with a simple background and (*) with several backgrounds resized by background-size , which should be displayed only in modern browsers (old browsers should display the same background as in the first paragraph). Fx9 and dolfin 2.0 both correctly display the second paragraph. IE8, as expected, does not work.

Another solution would be to use a selector understood by browser versions that also understand background-size but are not understood by others. Although it’s easier to find for IE than for Webkit-based smartphones!

(*) using another CSS rule with higher specificity for the purpose of demonstration. In the real world, there will be only one rule with a simple background defined in front of several backgrounds.