Sim, é possível fazer feature-detection de CSS, tanto usando JavaScript, quanto com CSS puro (nesse caso tem seus próprios problemas de suporte cross-browser).
Por JavaScript, você simplesmente checa o objeto style
de um elemento que tenha a propriedade ou valor em questão aplicada. Por exemplo, se o browser dá suporte a transições por CSS, a propriedade transition
do objeto terá um valor diferente de undefined
. Para mais precisão na verificação, não deixe de checar também as variantes prefixadas, como -moz-transition
(a propriedade JavaScript nesse caso seria MozTransition
).
Este exemplo da MDN verifica se o browser dá suporte à propriedade animation
, verificando um elemento elm
:
var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '';
if( elm.style.animationName !== undefined ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
Com CSS puro, existe o @supports
que funciona como uma media query. Porém, o suporte ao @supports
é limitado. Mais um exemplo da MDN:
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
… /* specific CSS applied to simulate text-align-last:justify */
}
É bom lembrar que a biblioteca Modernizr utiliza internamente essas duas técnicas, e oferece atalhos práticos para verificar o suporte a diversas propriedades CSS.