6

Conheço a técnica de feature detection ("descoberta de funcionalidade") - bem como feature inference - quando se trata de JavaScript:

if ( window.XMLHttpRequest ) { ... }

Mas tem como fazer isso para CSS também? A exemplo dessa outra pergunta, eu gostaria de criar um menu animado somente com CSS, mas a propriedade transition não é universalmente suportada. Eu poderia fazer tudo com jQuery, mas me parece um desperdício, uma vez que a grande maioria dos browsers suporta essa funcionalidade.

O ideal então seria detectar se há esse suporte, usando o jQuery como fallback caso não haja. É possível? E se a resposta for "não", seria esse um dos raros casos em que browser detection se justifica?

1 Resposta 1

8

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.

3
  • +Nota 100 pra este par P&R+ . . . Meanwhile
    – brasofilo
    Commented 27/08/2014 às 14:52
  • 1
    Yo Dawg, I herd you like to test for support using @supports, so I created a suportaSupports so you can test for @supports support to use @supports to test for support. (testado no Chrome e no IE)
    – mgibsonbr
    Commented 27/08/2014 às 15:02
  • 1
    um detalhe, eu acompanhei o outro tópico.... a biblioteca do site que o rapaz utiliza como exemplo de menu que ele queria fazer, tambem utiliza a biblioteca Moderniz Commented 27/08/2014 às 15:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .