Como você sabe, há muito mais para criar sites responsivos do que a largura. Você precisa de sensores que forneçam feedback para ajustar os sites com base em outros fatores.
A melhor maneira de melhorar nosso feedback do sensor do usuário, ou navegador, é usando uma biblioteca JavaScript chamada Modernizr. Neste artigo, explicarei por que, quando você vai além da largura, o Modernizr é uma ferramenta inestimável.
No desenvolvimento de front-end, os desenvolvedores costumavam ajustar um site para se adequar às restrições do mecanismo de layout usado por um determinado navegador. Em 2003, havia apenas três navegadores: Netscape, Internet Explorer e Opera. O Firefox, o Safari e o primeiro navegador móvel, o Opera Mini, foram lançados em 2005. O Chrome não foi lançado até 2008.
Atualmente, existem cinco principais navegadores, cada um com sua própria versão para celular. Em toda essa gama de navegadores, também há versões mais antigas que os usuários não atualizaram. Da mesma forma que a criação de vários layouts para vários tamanhos de tela acaba se tornando um jogo de soma zero, o mesmo acontecendo com a construção de vários front-ends para vários navegadores.
Estamos usando o design da Web responsivo para acomodar novos navegadores móveis de última geração. Mas, ao acomodar novos navegadores, é importante não fazê-lo às custas de navegadores mais antigos.
Historicamente, a otimização veio como um produto da construção de um site para os navegadores mais populares e, em seguida, ajustes para garantir o site parece o mesmo em um conjunto de navegadores populares. Designs teria que acomodar as capacidades de todos os navegadores.
O aprimoramento progressivo é uma estratégia para lidar com a falha dos navegadores em oferecer suporte a recursos modernos. Há uma tentação de criar os recursos mais atualizados, mas, em uma Web responsiva, o design de um site é contextual para o quadro que está sendo visualizado. O web design responsivo tornou-se popular porque resolve o contexto de mudança mais óbvio - o tamanho do quadro - mas o contexto de um navegador é muito mais profundo do que o tamanho da viewport.
O SVG é uma ótima solução para monitores de alta resolução, mas e quanto ao suporte em navegadores mais antigos? Não é suportado no IE 8 ou mais antigo, então você deve criar um fallback se você suportar esse navegador. Você poderia identificar o navegador e exibir estilos alternativos em relação a esse navegador, mas teria que atender a esses mesmos estilos alternativos para cada navegador que não fosse compatível com SVG.
Não seria mais fácil se você pudesse apenas escrever um estilo que seria usado em todos os navegadores que não suportam SVG? Dessa forma, você não teria que acompanhar os relatórios de bugs dos usuários de versões mais antigas. Você poderia apenas definir o fallback uma vez e esquecê-lo.
Tradicionalmente, a detecção de recursos foi realizada detectando o agente do usuário do navegador. Isso é feito através de JavaScript, usando o objeto de navegação. O objeto do navegador remonta aos dias do Netscape e costumava ser a melhor ferramenta do desenvolvedor em compatibilidade entre navegadores.
Se você tiver o Chrome e tiver ativado o DevTools, abra o inspetor da web do seu navegador clicando com o botão direito do mouse em uma página e selecionando Inspecionar elemento. Em seguida, clique em Console e, após o acento circunflexo, digite “navigator.userAgent” e pressione Enter. Isso retornará o user agent do seu navegador atual, que é uma sequência de texto usada para identificar o navegador em uso. O Chrome retorna o seguinte:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35De muitas maneiras, o objeto de navegação é um dos melhores sensores que temos disponível para informar nosso sistema sobre o que nosso usuário é capaz de fazer; no entanto, não é muito amigável no futuro. Ele baseia os atuadores do seu site em muitas suposições sobre o que o navegador faz e não suporta. Também não é confiável porque os usuários podem configurá-lo para acessar sites que o navegador talvez não possa suportar.
O Modernizr é uma biblioteca JavaScript usada para detectar recursos no navegador. Ele é carregado na cabeça da sua página e é executado durante um carregamento de página. Adicioná-lo ao seu site é tão simples quanto adicionar qualquer outra biblioteca JavaScript, como jQuery, mas, uma vez adicionado, o Modernizer oferece uma incrível quantidade de controle na renderização de sua página e garante que cada usuário tenha uma experiência de qualidade.
Tendo sido carregada, a Modernizr executa uma série de verificações no navegador do usuário para determinar quais recursos o navegador suporta e cria um objeto JavaScript que você pode usar para testar. Modernizr não cria suporte para esses recursos; Ele simplesmente oferece uma maneira de fornecer suporte de fallback para recursos modernos. Por exemplo, no caso do SVG, o Modernizr nos permite fornecer uma imagem alternativa para navegadores que não possuem suporte a SVG.
O Modernizr também aplica um conjunto de classes à tag HTML, dando a você a capacidade de modificar o CSS da página usando as classes CSS correspondentes. Essas classes CSS permitem que você use sistemas CSS para construir atuadores que ajustem suas páginas para permitir os aprimoramentos progressivos disponíveis para uma página.
Ao contrário do uso do User Agent, o Modernizr detecta os recursos diretamente executando uma série de testes JavaScript que retornam valores booleanos (true ou false). Isso determina as classes definidas para a tag html e permite usar JavaScript para detectar se um recurso está disponível.
Instalar o Modernizr é tão simples quanto vincular à biblioteca JavaScript na cabeça da sua página, mas onde o processo de instalação fica complicado é criar a versão que você precisa. Modernizr está disponível para download em duas versões, a versão de desenvolvimento e a versão de produção.
A versão de desenvolvimento é um arquivo totalmente descompactado de 42 KB. Esta versão é ótima se você for bem versado em JavaScript e quiser fazer alguns ajustes nos testes que realiza. Porque é descompactado, é fácil de ler e aumentar, mas é melhor deixar para os desenvolvedores com uma sólida compreensão de JavaScript.
Para aqueles de vocês que podem não ser completamente adeptos ao JavaScript, ou que gostariam de construir rapidamente uma versão customizada do Modernizr, é aqui que a versão de produção da biblioteca entra em cena. A ferramenta de criação de versão de produção no site oferece a capacidade de criar uma versão com apenas os testes necessários.
Isso é útil quando você sabe que precisa apenas de um determinado conjunto de testes. Por exemplo, seu site pode não aproveitar as sombras de caixa do CSS, mas pode precisar oferecer suporte a gradientes de CSS. Usando a ferramenta de compilação, você pode incluir os testes necessários e excluir os desnecessários, mantendo o código-fonte em uso e o tempo total de carregamento do usuário reduzido.
Para o nosso exemplo, estarei trabalhando na versão de desenvolvimento. Acho que quando estou construindo um site, é melhor trabalhar com a versão completa e, depois que você souber quais recursos você usará em seu site, reduza a versão.
Vamos fazer uma detecção simples de recursos com o Modernizr. Começaremos com um site de amostra bruto.
Vamos usar este pequeno teste para detectar se o nosso navegador é capaz de suportar ou não o SVG. Por uma questão de simplicidade, vamos adicionar duas tags de span à página para detectar o suporte.
Huzzah! You have SVG support.BOO! You don't have SVG support.Se você testar isso em um navegador que suporte SVG, você verá a mensagem “Huzzah! Você tem suporte a SVG. ”Considerando que se você tiver um navegador que não suporte SVG, você encontrará o“ BOO! Você não tem suporte ao SVG. ”Mensagem.
Este exemplo é bastante rudimentar, mas mostra a idéia central de usar o Modernizr para corrigir problemas entre navegadores. Se estivéssemos fazendo a mesma correção usando o antigo método do agente do usuário, teríamos que ter uma folha de estilo para cada navegador que não suportasse SVG e alterássemos nosso CSS para cada um. (Para qualquer pessoa interessada, os únicos principais navegadores sem suporte a SVG são o Internet Explorer 7 e inferior.)
Adicionando a classe svg / no-svg ao html na página, seu CSS agora tem um seletor que pode ser usado para sobrescrever as regras CSS existentes. Por estar na tag pai mais, ele pode ser usado para substituir outras classes na página.
Então, neste caso, ambas as tags span são exibidas: none; Se não houver suporte a SVG, a exibição: declaração inline na tag span com a classe .no substitui a exibição: oculta graças à regra no-svg na tag html.
Vamos tentar um exemplo mais útil da mesma ideia. Podemos querer ter uma imagem de plano de fundo do SVG na página, que volta para um PNG se o navegador não suportar SVG. Por padrão, usaremos a imagem PNG. Dessa forma, o SVG não é exibido a menos que seja necessário e se torne um aprimoramento progressivo.
Agora, temos um incrível crânio SVG que ficará incrível e nítido para usuários com telas de alta resolução e ainda parecerá bom para usuários com navegadores mais antigos.
Há uma grande riqueza de informações a serem aprendidas sobre o Modernizr. Mostramos como funciona o recurso de navegadores cruzados sem precisar lembrar ou manter uma lista de execução dos navegadores que suportam SVG.
Funciona excepcionalmente como um sistema com o qual serve os atuadores do usuário para criar sites rápidos e altamente funcionais.
Você usa Modernizr em seus projetos? Quais outros métodos você usou para veicular conteúdo responsivo? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de linhas divergentes via Shutterstock.