Como o Modernizr pode ajudá-lo a implementar Fallbacks CSS

Publicados: 2021-04-05

Como web designers, muitas vezes somos encorajados a utilizar os melhores e mais recentes recursos que o CSS tem a oferecer. E há muitas razões convincentes para fazê-lo. Técnicas como CSS Grid e Flexbox agilizam o trabalho de layouts comuns, enquanto as animações CSS adicionam movimento e interatividade. Isso é apenas a ponta do iceberg.

No entanto, implementar esses recursos às vezes pode custar a compatibilidade do navegador. Para sites que ainda têm um número significativo de usuários com navegadores mais antigos ou para recursos muito novos, existe o risco de deixar algumas pessoas de fora.

Filosoficamente falando, alguns designers estão bem com isso – e tudo bem. Mas implementar fallbacks para esses recursos pode ser mais fácil do que você pensa. Essas medidas à prova de falhas oferecem um fac-símile razoável de um layout ou elemento de design específico e são compatíveis com navegadores da web legados.

Hoje, mostraremos como utilizar a biblioteca de detecção de recursos Modernizr para essa finalidade. Aqui vamos nós!

O que é Modernizr?

Modernizr é uma daquelas ferramentas úteis nas quais os web designers confiam há anos. É uma biblioteca que pode ser personalizada para “detectar” (na realidade, está executando testes) recursos específicos à medida que uma página da web é carregada. A partir daí, ele adiciona classes CSS ao elemento <HTML> da página, permitindo que os designers direcionem seu código com base no que a biblioteca encontra.

No nosso caso, vamos usá-lo para detectar CSS Flexbox. No entanto, também é capaz de procurar recursos relacionados a HTML e JavaScript. Por exemplo, você pode usá-lo para determinar se um navegador suporta HTML5. Caso contrário, o script shiv HTML5 disponível pode ser usado para trazê-lo ao código, por assim dizer.

O que é realmente bom é que você pode personalizar o Modernizr para atender às necessidades do seu projeto. A interface do usuário do site permitirá que você escolha apenas os itens que deseja detectar. Depois de fazer suas seleções, clique no botão “Build” para gerar um pacote personalizado para download.

Nossa construção

Para nossos propósitos (e para manter as coisas simples), estamos construindo nosso pacote Modernizr para detectar o Flexbox. Também escolheremos reduzir o código e adicionar classes CSS .

O site Modernizr.

Etapa 1: configurando a demonstração

Para demonstrar como tudo isso funciona, serão necessários alguns arquivos – ambos disponíveis no GitHub:

flexgrid.css – Este é o nosso sistema simples de grade CSS Flexbox. Você notará que tem classes para diferentes alinhamentos e larguras de coluna. Além disso, há um conjunto especial de classes .no-flexbox que também usam floats CSS da velha escola. Isso nos ajudará a criar um estilo de layout semelhante em navegadores legados.
modernizr-custom.js – O script mencionado acima detectará se o CSS Flexbox é ou não suportado pelo navegador atual.

Em seguida, vamos querer criar um novo documento HTML que chame os dois arquivos acima na área <head> . Além disso, o documento precisará de um exemplo de layout CSS Flexbox e algum conteúdo.

Você pode se sentir à vontade para usar o arquivo de demonstração abaixo para experimentação. Ele contém um layout simples de 3 colunas, juntamente com alguns pequenos aprimoramentos visuais (mais sobre isso daqui a pouco).

Etapa 2: visualizar o documento HTML em um navegador moderno

Agora é hora de ver como nossa demonstração fica em um navegador. Para começar, vamos usar um navegador web moderno que suporte Flexbox.

Um layout CSS de 3 colunas.

Pelo menos, suspeitamos que ele suporte Flexbox. Como podemos ter certeza? Isso é o que Modernizr está aqui para fazer.

No nosso caso, vamos querer olhar a fonte da nossa página de demonstração, especificamente o elemento <HTML> . Se houver uma classe de flexbox adicionada ao elemento, sabemos que nosso navegador suporta o recurso. Vá em frente e veja a fonte da página em seu navegador – nós esperamos.

Onde está a aula?

Se você tentou visualizar o código-fonte completo da página, deve ter notado que o elemento <HTML> não contém uma classe. Não se preocupe – isso é normal.

Isso porque a classe é adicionada em tempo de execução, após o Modernizr testar o recurso selecionado. Portanto, ele não aparecerá no código-fonte completo.

Use as ferramentas de desenvolvedor do seu navegador

Em vez disso, abra as ferramentas de desenvolvedor do seu navegador da web (pressione o botão F12 no teclado). Isso fornecerá uma visão precisa do elemento <HTML> .

Aqui, estamos usando a versão mais recente do Firefox Developer Edition. De acordo com a Modernizr, ele suporta CSS Flexbox. Yay!

Ferramentas de desenvolvedor do Firefox exibindo suporte a CSS Flexbox.

Etapa 3: testar o CSS Fallback em um navegador legado

Tudo parece ótimo em nosso navegador moderno. Mas e o software legado?

Nossos estilos são configurados para usar floats CSS em navegadores que não suportam Flexbox. Esse fallback deve nos permitir criar um layout de várias colunas, mesmo em configurações antigas.

De acordo com Posso usar, o Flexbox tem suporte parcial desde o Internet Explorer 10, Firefox 2, Chrome 4 e Safari 3.1. Muitos anos se passaram desde que esses navegadores foram amplamente utilizados. No entanto, o IE em particular ainda está pendurado aqui e ali.

O Modernizr pode ser configurado para testar o suporte parcial - mas fica confuso. Isso leva a escrever mais fallbacks de CSS que levam em consideração várias situações diferentes. Não é muito eficiente. Portanto, estamos procurando suporte de tudo ou nada em nossos testes.

Vamos dar uma olhada em nossa demonstração no IE 10 (por meio de um serviço de teste de navegador) e ver o que acontece.

Um layout CSS de 3 colunas, com a terceira coluna empurrada para uma nova linha.

Não muito pobre. Nossa terceira coluna é empurrada para a próxima linha, que pode ser ajustada. Mas e quanto ao suporte Flexbox?

Uma visão rápida das ferramentas de desenvolvedor do IE mostra que nosso elemento <HTML> exibe uma classe de no-flexbox . Isso significa que o Flexbox não é suportado aqui, e o fallback CSS está sendo utilizado.

As Ferramentas do Desenvolvedor do Internet Explorer não exibem suporte para CSS Flexbox.

Corrigindo o Layout para CSS Floats

Nossos floats CSS de fallback não cooperarão com os aprimoramentos visuais que fizemos. A terceira coluna é empurrada para uma segunda linha, o que não parece muito bom.

Isso ocorre porque os floats adicionam preenchimento e bordas à largura da coluna que definimos anteriormente na folha de estilo. O Flexbox, por outro lado, pode se ajustar a esses itens sem aumentar a largura geral da coluna. Daí a diferença nos resultados.

Há algumas coisas diferentes que podemos fazer para corrigir a situação. Podemos cortar a largura das colunas ou até diminuir a margem entre as colunas. Vamos tentar cortar a largura da coluna de 30.66% para 28.66% .

Comparação: layout CSS Flexbox (superior) e fallback CSS float (inferior).

Funcionou! Nossas colunas agora são exibidas com alegria e razoavelmente semelhantes às versões do Flexbox. Deixando de lado algumas diferenças de espaçamento, isso é pelo menos utilizável em um navegador antigo. Poderíamos entrar e fazer mais mudanças para ficar ainda mais perto do original.

Detectar recursos do navegador e ajustar adequadamente

Enquanto nossa demonstração se concentrou na detecção do CSS Flexbox, o Modernizr pode fazer muito mais. Ele pode procurar outros recursos comuns, como HTML Canvas, suporte a SVG, CSS Grid e uma variedade de outros petiscos úteis.

A ideia é que, uma vez que você saiba do que o navegador de um usuário é capaz, você possa ajustar seu código para seguir o exemplo. Isso torna a adoção de especificações CSS mais recentes, por exemplo, um processo muito menos preocupante.

Talvez você não precise usar fallbacks em todas as instâncias. Mas é bom saber que implementá-los é fácil de fazer, com a ajuda do Modernizr.