Prefixos CSS no Microsoft Edge

O Microsoft Edge foi oficialmente lançado junto com o Windows 10 e muitos desenvolvedores Web devem estar se perguntando: como ficam os prefixos CSS para esse novo browser e quando devo usá-los?

Na verdade devemos evitar o uso de prefixos CSS. O Microsoft Edge está seguindo a nova tendência de browsers modernos que é reduzir o uso desses prefixos devido a problemas, como o de gerenciamento e manutenção de código. Porém muitos sites atualmente utilizam prefixos CSS e, aliás, muitos desses sites especificam somente propriedades CSS com prefixo -webkit-. Isso causa problemas de visualização da página em alguns browsers como o Internet Explorer. E por conta disso, em 2014 a Microsoft incluiu suporte para alguns prefixos -webkit- mais comuns.

O que são prefixos CSS?

Para quem não está totalmente inteirado sobre o assunto, aqui vai uma breve explicação: Os prefixos CSS são comumente utilizados para o desenvolvedor usufruir de recursos CSS em seu site antes mesmo destes se tornarem recomendações. Saiba mais neste link.

Nesse caso o desenvolvedor assume certos riscos em utilizar recursos que podem vir a não funcionar em alguns browsers, principalmente naqueles que não estão sempre sendo atualizados. Pode ocorrer, por exemplo, de certo conteúdo ser apresentado de forma errada para o usuário em determinadas circunstâncias.

O que devo fazer então?

Para auxiliar o desenvolvedor, existem vários sites que fazem testes nos browsers e permitem verificar se determinada propriedade, valor ou seletor CSS irá funcionar. Por exemplo, o site de desenvolvimento do Microsoft Edge apresenta uma página que aborda alguns exemplos de suporte CSS.

Agora vejamos o Site Scan. Conforme visto em um post recente, essa ferramenta permite avaliar sites e dá recomendações para proporcionar uma melhor experiência do usuário em diferentes browsers. E muitos dos problemas apontados pela ferramenta dizem respeito ao uso de prefixos CSS!

Por exemplo, o Site Scan aponta que você usou a propriedade -webkit-appearance mas não especificou a propriedade appearance e nem -moz-appearance. Como resultado, browsers que não sejam implementações do Webkit não exibirão o conteúdo da forma esperada. E isso continuará ocorrendo mesmo que um dia eles venham a incluir o suporte a essa funcionalidade. E isso certamente obrigará o desenvolvedor a ter que fazer correções no código.

Portanto, recomenda-se especificar o CSS tanto sem prefixo como com prefixos específicos de outros browsers:

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

Nota: A propriedade appearance permite mostrar um elemento com a interface padrão especificada pelo valor da propriedade. Podemos, por exemplo, ter um conteúdo de uma div sendo exibida como botão. Alguns possíveis valores de appearance são: normal, icon, window, button, menu, field.

Outro recurso que também podemos usar o bloco CSS @support para verificar se determinada funcionalidade 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.

Mas lembre-se sempre de revisitar as páginas onde são usados esses recursos CSS para garantir que elas sempre estarão funcionando conforme esperado. Adotar funcionalidades que ainda não fazem parte da recomendação podem até permitir uso de efeitos visuais que garantem maior engajamento e conversão do seu usuário. Mas podem também causar o efeito inverso quando não funcionam conforme esperado.

Tem alguma dúvida específica sobre uso do CSS no Microsoft Edge? Comente aqui ou faça a pergunta ou faça a 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