Por que feature detection é importante?

CSS Supports

Quando falamos em desenvolvimento Front-End, a adoção de novas tecnologias se torna uma tarefa relativamente complicada pela necessidade de dar suporte a diversos browsers, nesse cenário temos basicamente duas abordagens: Graceful Degradation e Progressive Enhancement.

Em muitos casos existe uma necessidade de verificar se o browser tem suporte a determinada feature para oferecer um fallback caso necessário.

Por muito tempo a solução mais utilizada foi o famoso modernizr, mas hoje em dia temos algumas soluções nativas vindas da nossa amiga W3C.

Em casos simples podemos resolver isso com técnicas de Progressive Enhancement.

A solução nativa

Já temos disponível a algum tempo a at-rule @supports() que faz parte da especificação de CSS Conditional Rules Module Level 3, com ela podemos verificar o suporte de qualquer feature do CSS e oferecer um código que será executado apenas se o browser tiver suporte (ou não).

Syntax

Declaração básica

É bem simples, utilizamos @supports() passando como parâmetro a propriedade que será avaliada, depois passamos em um bloco {} o código a ser executado caso a expressão (propriedade) retorne verdadeiro.

  @supports (display: flex) {
  /* css code */
}

Adicionando lógica

Executar o código apenas quando temos suporte não faz sentido uma vez que ele já seria executado de qualquer forma, por isso podemos combinar vários operadores lógicos para melhorar nossa lógica.

Operador not:

Retorna o código quando a propriedade passada como parâmetro não é suportada pelo browser.

  @supports not (display: grid) {
  /* css code */
}

Operador and:

Retorna o código quando as duas propriedades são suportadas.

  @supports (display: grid) and (display: flex) {
  /* css code */
}

Operador or:

Retorna o código quando uma ou todas as propriedades são suportadas.

  @supports (display: grid) or (display: flex) {
  /* css code */
}

Lembrando que podemos combinar os operadores not com and e or para inverter a lógica dos exemplos acima.

Exemplo da vida real

Podemos oferecer uma alternativa ao flexbox de forma simples.

  @supports not (display: flex) {
  .container {
    display: block;
  }

  .container > * {
    display: inline-block;
    margin-right: -4px;
  }
}

Qual o suporte dessa treta?

De nada adianta verificar o suporte das features se a própria ferramenta não tem suporte, que bom que temos um suporte bem legal que você pode conferir no Can i Use.

Mesmo não tendo suporte total(IE bjs), podemos usar o @supports() para extender o suporte de outras features com suporte pior, além de facilitar a utilização e aumentar muito a performance de técnicas baseadas em Progressive Enhancement.

Bonûs

Não conhece a propriedade display: grid;? Aproveite para conferir o novo artigo descolado sobre CSS Grid Layout publicado pela Evangelista CSS Simone Amorim <3.

Curtiu a dica?

Para ficar por dentro do que está rolando e ter acesso a várias dicas descoladas, basta conferir os links a baixo:

Dúvidas ou sugestões?

Manda comments ;)


808 1 7