Respond
1.4.2
Direitos autorais 2011: Scott Jehl, scottjehl.com
Licenciado sob a licença MIT.
O objetivo deste script é fornecer um script rápido e leve (3kb minificado/1kb compactado com gzip) para permitir designs web responsivos em navegadores que não suportam consultas de mídia CSS3 - em particular, Internet Explorer 8 e inferior. Ele foi escrito de tal maneira que provavelmente também corrigirá o suporte para outros navegadores sem suporte (mais informações sobre isso em breve).
Se você não está familiarizado com os conceitos que envolvem Web Design Responsivo, você pode ler aqui e também aqui
Página de demonstração (as cores mudam para mostrar que as consultas de mídia estão funcionando)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}Consulte o script respond.min.js (1kb min/gzipado) depois de todo o seu CSS (quanto mais cedo ele for executado, maior será a chance de os usuários do IE não verem um flash de conteúdo não mediado)
Abra o Internet Explorer e levante os punhos de alegria
Respond.js funciona solicitando uma cópia original do seu CSS via AJAX, portanto, se você hospedar suas folhas de estilo em um CDN (ou subdomínio), precisará configurar um proxy local para solicitar o CSS para navegadores IE antigos. Versões anteriores recomendavam uma abordagem obsoleta de domínio x, mas um proxy local é preferível (por razões de desempenho e segurança) a tentar contornar as limitações de domínio cruzado.
Algumas notas a ter em mente:
O foco deste script é propositalmente muito restrito: apenas consultas de mídia de largura mínima e largura máxima e todos os tipos de mídia (tela, impressão, etc.) são traduzidos para navegadores sem suporte. Eu queria manter as coisas simples em termos de tamanho de arquivo, manutenção e desempenho, por isso limitei intencionalmente o suporte a consultas que são essenciais para construir um design responsivo (primeiro para dispositivos móveis). No futuro, posso refazer um pouco as coisas para incluir um gancho para corrigir recursos adicionais de consulta de mídia - fique ligado!
Os navegadores que suportam nativamente consultas de mídia CSS3 não podem executar este script o mais rápido possível. Nos testes de suporte, todos os outros navegadores são submetidos a um teste rápido para determinar se suportam consultas de mídia ou não antes de prosseguir com a execução do script. Este teste agora está incluído separadamente na parte superior e usa o polyfill window.matchMedia encontrado aqui: https://github.com/paulirish/matchMedia.js. Se você já está incluindo este polyfill via Modernizr ou de outra forma, fique à vontade para remover essa parte.
Este script não depende de nenhum outro script ou estrutura (além do polyfill matchMedia incluído) e é otimizado para entrega móvel (tamanho total de arquivo de aproximadamente 1kb min/gzip)
Como você pode imaginar, esta implementação é bastante burra em relação às regras de análise de CSS. Isso é bom, porque permite que ele funcione muito rápido, mas sua frouxidão também pode causar um comportamento inesperado. Por exemplo: se você incluir uma consulta de mídia inteira em um comentário com a intenção de desabilitar suas regras, você provavelmente descobrirá que essas regras acabarão habilitadas em navegadores que não suportam consultas de mídia.
Respond.js não analisa CSS referenciado via @import, nem funciona com consultas de mídia dentro de elementos de estilo, pois esses estilos não podem ser solicitados novamente para análise.
Devido a restrições de segurança, alguns navegadores podem não permitir que este script funcione em urls file:// (porque ele usa xmlHttpRequest). Execute-o em um servidor web.
Se a solicitação do arquivo CSS que inclui o estilo específico do MQ estiver atrás de um redirecionamento, o Respond.js falhará silenciosamente. Os arquivos CSS devem responder com o status 200.
Atualmente, os atributos de mídia em elementos de link são suportados, mas somente se a folha de estilo vinculada não contiver consultas de mídia. Se contiver consultas, o atributo media será ignorado e as consultas internas serão analisadas normalmente. Em outras palavras, as declarações @media no CSS têm prioridade.
Alegadamente, se os arquivos CSS forem codificados em UTF-8 com Byte-Order-Mark (BOM), eles não funcionarão com Respond.js no IE7 ou IE8. Observado na edição nº 97
AVISO: Incluir regras @font-face em uma consulta de mídia fará com que o IE7 e o IE8 travem durante o carregamento. Para contornar isso, coloque as regras @font-face abertas, como irmãs de outras consultas de mídia.
Se você tiver mais de 32 folhas de estilo referenciadas, o IE gerará um erro Invalid procedure call or argument . Concatene seu CSS e o problema deverá desaparecer.
Os mapas de origem Sass/SCSS não são suportados; @media -sass-debug-info quebrará o respond.js. Observado na edição nº 148
O Internet Explorer 9 oferece suporte a consultas de mídia css3, mas não dentro de frames quando o CSS que contém a consulta de mídia está em um arquivo externo (isso parece ser um bug no IE9 - consulte https://stackoverflow.com/questions/10316247/media-queries -fail-inside-ie9-iframe). Veja este commit para uma correção se você estiver tendo esse problema. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
Consultas de mídia aninhadas não são suportadas
Basicamente, o script percorre o CSS referenciado na página e executa uma ou duas expressões regulares em seu conteúdo para encontrar consultas de mídia e seus blocos CSS associados. No Internet Explorer, é impossível recuperar o conteúdo da folha de estilo em seu estado pré-analisado (o que no IE 8 significa que suas consultas de mídia são removidas do texto), então o Respond.js solicita novamente os arquivos CSS usando Ajax e analisa a resposta de texto a partir daí. Certifique-se de configurar o cache dos seus arquivos CSS corretamente para que essa nova solicitação não vá para o servidor, atingindo o cache do navegador.
A partir daí, cada bloco de consulta de mídia é anexado ao cabeçalho em ordem por meio de elementos de estilo, e esses elementos de estilo são ativados e desativados (leia-se: anexados e removidos do DOM) dependendo de como sua largura mínima/máxima se compara à largura do navegador. O atributo media nos elementos de estilo corresponderá ao da consulta no CSS, então pode ser "tela", "projetor" ou o que você quiser. Quaisquer caminhos relativos contidos no CSS serão prefixados pelo href de sua folha de estilo, portanto, os caminhos das imagens serão direcionados ao destino adequado.
Claro, alguns:
Este não é o único script polyfill CSS3 Media Query que existe; mas pode muito bem ser o mais rápido.
Se você está procurando um suporte mais robusto para CSS3 Media Query, você pode conferir https://code.google.com/p/css3-mediaqueries-js/. Nos testes, descobri que esse script é visivelmente lento ao renderizar designs responsivos complexos (tanto em tamanho de arquivo quanto em desempenho), mas ele realmente suporta muito mais recursos de consulta de mídia do que este script. Grande gorjeta para os autores! :)
