Os 5 problemas de Interoperabilidade Web – Parte 3

Dando continuidade à nossa série de posts sobre problemas de interoperabilidade Web, iremos tratar agora daquele relacionado com prefixos CSS.

Apenas recapitulando, nos últimos dois posts abordamos Modo de renderização e Detecção de navegador Web, descrevendo como esses problemas afetam a interoperabilidade Web e como podemos tratá-los de forma apropriada de modo que consigamos desenvolver páginas preparadas para Web Moderna.

Ao todo estaremos abordando 5 problemas que podem afetar a interoperabilidade Web, isto é, que podem impactar usuários que acessam seu site por algum browser específico. São eles:

  1. Modo de renderização
  2. Detecção de navegador Web
  3. Prefixos CSS
  4. Bibliotecas Javascript desatualizadas
  5. Plugins legados

E vale lembrar também que podemos verificar nosso site contra esses problemas através da ferramenta Site scan disponibilizada pela Microsoft.

Prefixos CSS

O QUE É?

Conforme já descrito no post “Prefixos CSS no Microsoft Edge”, os prefixos são palavras chave incluídas antes de propriedades ou valores CSS, sendo utilizados para o desenvolvedor usufruir de recursos CSS em seu site antes mesmo destes se tornarem recomendações e estarem disponíveis em todos os navegadores. Os prefixos CSS são:

  • Chrome: -webkit
  • Edge: -ms e -webkit
  • Firefox: -moz
  • Internet Explorer: -ms
  • Opera: -o (versões antigas); -webkit (versões mais novas)
  • Safari: -webkit

Nota: O novo navegador da Microsoft, o Microsoft Edge, suporta tanto os prefixos -ms como os prefixos -webkit, conforme pode ser verificado neste link: https://dev.windows.com/en-us/microsoft-edge/platform/documentation/apireference/cssstyles/.

Exemplos de propriedades CSS usando prefixos:

-webkit-appearance
-ms-transform
-moz-font-feature-settings

Mas nesse caso o desenvolvedor assume certos riscos em utilizar recursos que podem vir a não funcionar em alguns browsers ou funcionar de forma diferente da esperada. Pode ocorrer, por exemplo, de certo conteúdo ser apresentado de forma errada para o usuário em determinadas circunstâncias. Por isso é necessário sempre testar seu site nos diferentes navegadores Web.

COMO DEVO FAZER NO MEU SITE?

Quando vamos especificar uma propriedade ou valor CSS que requer uso de prefixos CSS, devemos sempre fazê-lo usando todos os prefixos possíveis mesmo que determinado browser ainda não dê suporte. Tudo isso porque os navegadores Web modernos (como Chrome, Firefox e Edge) seguem o conceito “Evergreen” ou “Sempre Verde”, isto é, são atualizados constantemente e a cada dia novos recursos são incorporados. Portanto, se hoje um determinado navegador Web moderno não suporta alguma propriedade ou valor CSS, ele simplesmente ignorará. Mas é possível que em uma versão futura esse suporte seja incluído. Exemplo de prefixos CSS:

-webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */

Já do outro lado existem também prefixos CSS que não são mais necessários para determinadas propriedades ou valores pois estes já se tornarão padrão em todos navegadores Web. Nesse caso você pode remover os prefixos para simplificar seu código.

E tanto a falta de uso quanto o uso desnecessário de prefixos são apontados pela ferramenta Site scan, que lista quais propriedades e valores não estão aderentes a recomendação:

os_5_problemas_de_interoperabilidade_web_3_sitescan_cssprefixissue

SE EU NÃO CORRIGIR, COMO ISSO PODE PREJUDICAR MEU USUÁRIO?

A não correção do problema pode afetar usuários que acessam seu site por determinados browsers fazendo com que certos recursos da página não estejam sendo entregues da forma esperada. Por isso é muito importante que o desenvolvedor sempre teste seu site em diferentes navegadores Web.

QUAIS SÃO OS IMPACTOS CASO EU CORRIJA O PROBLEMA?

Usar prefixos CSS somente quando necessário ajuda a simplificar a base de código. Além disso, no caso em que o prefixo é necessário, procure especificar a propriedade ou valor para todos os prefixos. Isso dará mais garantias de que seu site irá simplesmente funcionar em todos os navegadores Web modernos.

O QUE MAIS ESTÁ ENVOLVIDO?

Outro recurso que também podemos usar é o bloco CSS @support, usado para verificar se determinada propriedade ou valor está disponível. O exemplo a seguir, que foi obtido do site http://dev.modern.ie/testdrive/demos/@supports/, irá definir o vermelho como cor de fundo do elemento b somente se o recurso linear-gradient não for suportado pelo browser:

b {
  background-color: red;
}
 
@supports ( background: linear-gradient(0deg,red,red) ) {
  b {
    background: linear-gradient( 0deg, rgb(65, 150, 44), rgb(26, 219, 73) );
  }
}

Nota:Browsers que não reconhecem o @supports irão simplesmente ignorar todo o bloco de código e irão exibir a cor vermelha. Aqueles que reconhecem este bloco mas não implementam o recurso linear-gradient irão exibir também a cor de fundo vermelha, Por fim, aqueles que reconhecem o @supports e implementam o recurso linear-gradient irão exibir um fundo verde com gradiente linear.near-gradient irão exibir um fundo verde com gradiente linear.

QUE SABER MAIS?

Quer obter mais dicas e sugestões? Comente aqui ou faça uma pergunta no Stack Overflow em Português com a tag “microsoft-edge”. E continue nos acompanhando no talkitbr.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s