Dez anos atrás, apenas os designers de sites mais avançados usariam CSS para layout e embelezamento da página da web. Naquela época, o suporte dos navegadores ao layout do CSS estava incompleto e cheio de brechas; portanto, embora essas pessoas insistissem na padronização da Web, elas precisavam usar hacks para fazer suas páginas exibirem normalmente em todos os navegadores. Uma das mais e mais tecnologias de hackers usadas é o Sniffing do navegador, que usa o atributo Navigator. A tecnologia Sniffing do navegador pode ramificar rapidamente o código para aplicar instruções diferentes a diferentes navegadores.
Hoje, os layouts baseados em CSS já são muito comuns e os navegadores o sustentam muito sólidos. Mas agora CSS3 e HTML5 estão aqui, a história se virou e retornou ao seu local original - o suporte para essas novas tecnologias por vários navegadores começou a se tornar desigual novamente. Há muito que estamos acostumados a escrever códigos limpos e compatíveis com o padrão, e não usaremos mais hacks ou navegadores CSS para farejar tecnologias não confiáveis e de baixo nível. Também acreditamos que mais e mais usuários concordam com a ideia de que os sites não precisam ter a mesma aparência em todos os navegadores. Então, diante dessa situação familiar (suporte diferente do navegador) agora, o que devemos fazer? Simples: use a detecção de recursos, o que significa que não precisamos perguntar ao navegador quem é você? Para fazer especulações não confiáveis. Em vez disso, perguntamos ao navegador se você pode fazer isso ou aquilo. É fácil detectar navegadores, mas ainda é chato gastar tempo testando manualmente um por um. Modernizr pode nos ajudar neste momento.
Modernizr: uma biblioteca de detecção funcional desenvolvida especialmente para HTML5 e CSS3
A Modernizr é uma biblioteca JS de código aberto que facilita para designers que desenvolvem diferentes níveis de experiência com base nas diferenças nos navegadores de hóspedes (referindo -se a diferenças no apoio a novos padrões). Ele permite que os designers aproveitem ao máximo os recursos HTML5 e CSS3 para desenvolvimento em navegadores que suportam HTML5 e CSS3 sem sacrificar o controle de outros navegadores que não suportam essas novas tecnologias.
Quando você incorporou o script da Modernizr em uma página da web, ele detectará se o navegador atual suporta recursos CSS3, como @font-face, radius de fronteira, imagem de fronteira, shadow box-shadow, rgba (), etc., e também detectará os recursos HTML5 e os recursos do HTML5 são suportados. Com base na obtenção dessas informações, você pode usá-las nos navegadores que suportam esses recursos para decidir se criar um fallback baseado em JS ou simplesmente fazer o downgrade daqueles que não os suportam. Além disso, o Modernizr também pode permitir que o IE suporte a aplicação de estilos CSS nos elementos HTML5, para que os desenvolvedores possam usar imediatamente essas tags mais semânticas.
A Modernizr é desenvolvida com base na teoria do aprimoramento progressivo, por isso apóia e incentiva os desenvolvedores a criar sua camada de sites por camada. Tudo começa com uma fundação ociosa com JavaScript aplicado, adicionando camadas aprimoradas de aplicativos uma a uma. Como o Modernizr é usado, é fácil para você saber o que o navegador suporta. Vamos dar uma olhada em um exemplo de criação de sites de ponta aplicando o Modernizr.
Comece com a aplicação de modernizr
Primeiro, faça o download da mais recente versão estável do Modernizr em www.modernizr.com (atualmente, o site oficial da Modernizr está bloqueado na China e podemos baixá -lo no github. Ou ser mais simples, você pode baixar o arquivo de script mais recente da versão 1.7 do mestre). No site oficial, você também pode ver uma lista de todos os recursos que suporta para a detecção (a última página deste artigo fornecerá essas listas para que os sapatos infantis que não possam ser deslizados pela parede possam saber quais eles apoiam). Depois de baixar a versão mais recente (o autor usou a versão 1.5 ao escrever este artigo), adicione -a à área da página:
Em seguida, adicione a classe JO ao elemento.
Quando o Modernizr for executado, ele transforma a classe JS em JS para que você saiba que está em execução. A Modernizr não apenas faz isso, mas também adiciona uma classe a todos os recursos que detecta. Se o navegador não suportar um recurso, ele prefixa o nome da classe correspondente ao recurso no não. Então, seu elemento pode se tornar assim:
A Modernizr também criará um objeto JS chamado Modernizr, que é uma lista de resultados booleanos fornecidos para cada recurso detectado. Se o navegador suportar um novo elemento de tela, o valor de Modernizr.Canvas será verdadeiro; Se o navegador não suportar esse novo elemento, o valor correspondente será falso. Esse objeto JS também conterá informações mais detalhadas para determinadas funções, como o Modernizr.Video.h264 informará se o navegador suporta este codec especial. Modernizr.InputTypes.search informará se o navegador atual suporta o novo tipo de entrada de pesquisa, etc.
Nossa página simples e não processada parece um sistema de pré-teste, mas possui melhor semântica e acessibilidade. Vamos adicionar um pouco de estilo básico: um pequeno formato de texto, cor e layout para torná -lo melhor. No momento, não há nada de novo, basta adicionar estilos de expressão a uma página HTML de estrutura semântica e observar a página depois de adicionar o estilo.
Abaixo, queremos aprimorar esta página para torná -la mais interessante. Quero aplicar um efeito de texto peculiar ao H1 na cabeça, dividir a lista de recursos de detecção em duas colunas e, em seguida, obter tudo sobre o Modernizr com uma foto à direita. Eu também quero fazer a fronteira em torno do conteúdo da página bonita. Agora, o CSS3 mais poderoso permite adicionar mais propriedades a uma regra que as ignorará se o navegador não os apoiar. Com CSS Cascade (herança), você pode usar novas propriedades como o Radius de fronteira sem depender da Modernizr. No entanto, o uso do Modernizr pode fornecer alguns recursos que não podem ser fornecidos por meios existentes: nomes de classes modificados dinamicamente com base no suporte diferencial do navegador para coisas novas. Vou ilustrar isso adicionando 2 novas regras à nossa página:
A primeira regra adiciona um canto arredondado de 12 pixels ao elemento #Content. Mas na página existente, definimos uma borda com o elemento #Content com um valor de atributo do início de 2px #666. Isso parece muito bom quando a caixa é de ângulos certos, mas não em cantos arredondados. Graças ao Modernizr, posso definir uma borda real de 1px para fazer boxe com o radiato de fronteira apoiado pelo navegador.
A segunda regra é um pouco mais avançada. Adicionamos uma sombra ao elemento #Content e removemos o atributo de fronteira para navegadores que suportam atributos de sombra de caixa. Por que? Como a maioria dos navegadores não fornece um bom desempenho para a combinação de bordas e cantos com sombras (essa é uma falha em um navegador que deve ser observado, mas temos que suportar agora). Em vez de usar sombras e usar apenas bordas, prefiro usar sombras para envolver os elementos. Dessa forma, posso ter o melhor, preciso e melhor desempenho do CSS do mundo: uma bela sombra aparecerá em um navegador que suporta o atributo de sombra de caixa; Um navegador que suporta apenas o atributo Radius de fronteira apresentará uma bela borda fina arredondada; Para os navegadores quebrados que não suportam esses dois, veremos uma borda de 2 ângulo reto de 2 pixels.
Abaixo, queremos aplicar uma fonte especial personalizada ao cabeçalho. A seguir, é apresentada a nossa declaração atual para H1, sem alterações:
Essas declarações funcionam bem em nossas páginas básicas, e o tamanho do texto de 27 pixels também é adequado para a exibição das fontes que definimos para H1. Mas para a fonte que vou usar chamado belo, 27 pixels são muito pequenos. Aqui queremos adicionar outras regras para usar esta fonte personalizada:
Primeiro, adicionamos a declaração @font-face e especificamos o caminho, o nome do arquivo e o nome da fonte para nossas fontes personalizadas. Em seguida, usamos uma instrução CSS para selecionar o estilo de fonte para o nosso H1. Você verá que eu escolhi um grande tamanho de fonte aqui, porque a bela fonte em si é muito menor que o texto de outras fontes, por isso devemos instruir o navegador a dar ao H1 um grande tamanho de fonte ao exibir nossas fontes personalizadas.
Além disso, nosso belo texto manuscrito tem alguns problemas de renderização com o Shadowing de texto, por isso temos que cancelar o sombreamento do texto quando o navegador decidir usar o texto personalizado. Além disso, a lista de peças de detecção precisa ser dividida em duas colunas. Para atingir meu objetivo, quero usar o impressionante atributo de colunas CSS, que permitirá que o navegador divida inteligentemente a lista em colunas sem interromper sua ordem. Embora nossa lista não tenha um número numérico, ela também é organizada em ordem alfabética. Obviamente, nem todos os navegadores suportam essa propriedade. Para aqueles que não suportam, usamos o Float para alcançar o objetivo de 2 colunas - depois de usar o Float, a lista não será mais organizada em ordem alfabética, mas isso é melhor do que nada.
Usei o Modernizr novamente para definir propriedades diferentes para diferentes situações. Se o navegador suportar colunas CSS, ele dividirá perfeitamente a lista em 2 colunas. Se não for suportado, também podemos usar o método flutuante para transformar a lista em duas colunas flutuando. Embora não seja tão perfeito, é melhor do que aplicar diretamente uma longa lista de colunas únicas.
Aqui você deve ter notado que eu adicionei prefixos diferentes (-moz-, -webkit-, -o-) ao atributo. Isso ocorre porque os diferentes fabricantes de navegadores têm diferentes definições da implementação dessa função; portanto, para implementar essa função, eles precisam adicionar seus prefixos correspondentes a diferentes navegadores.
Após essas mudanças, nossa nova página parece melhor.
Adicionaremos aprimoramentos mais progressivos à nossa página para encerrar este tutorial. Os navegadores baseados em Webkit suportam alguns efeitos especiais mais impressionantes, como transformação CSS, animação e transformação tridimensional. E quero aplicar alguns desses efeitos especiais nas páginas do último estágio. Novamente, essas propriedades serão adicionadas ao nosso CSS existente e ignoradas nos navegadores que não os apoiam. Portanto, é apropriado usar o Modernizr para esta situação em que o aprimoramento gradual não é suportado, por um lado.
Primeiro conjunto:
A regra @KeyFrames faz parte da nova especificação de animações CSS e atualmente suporta apenas o WebKit. Ele permite que você declare um caminho de animação completo para qualquer atributo e altere -os em qualquer estágio que desejar. Para saber mais sobre as animações, leia o rascunho de trabalho do W3C.
Aqui adicionamos o código que faz com que um elemento gire no espaço tridimensional:
Como o logotipo precisa ser girado e espero que se dê mais harmoniosamente com o plano de fundo quando for girado, para que um arquivo de formato PNG seja usado aqui. Eu também usei um atributo Overflow: oculto para ocultar o texto no cabeçalho com pixels de 99999. É interessante fazer os elementos girarem em 3D, mas não muito bonitos. Finalmente, escolhemos usar a regra de animação, definindo seu período de rotação para 2 segundos, girando ao longo de seu próprio eixo central, nunca parando.
A página final parece ótima e até configura animações divertidas para o navegador do webkit. Espero que até agora você possa entender o quão incrível isso pode tornar seu pulso com controle modernizr sobre o seu site e o quão simples ele pode fazer um aprimoramento progressivo real. Este não é apenas o benefício total do Modernizr, mas também pode ajudá -lo a criar fallbacks com base no JS e ajudá -lo a aplicar os novos recursos impressionantes do HTML5.