Pular para o conteúdo principal

Como Fazer o Internet Explorer Reconhecer Tag's do HTML5


Novas Tag's, Novos Problemas

Com a chegada do HTML5 e suas novas Tag's, nós desenvolvedores HTML, voltamos a entrar em guerra com um antigo vilão: O Internet Explorer, vulgo IE. O motivo? Até a versão 9, ele não reconhecia essas novas Tag's e com isso não renderizava nenhum dos novos elementos, interessante não?

A partir da versão 9, esse problema foi corrigido, mas se você é um desenvolvedor que se preocupa com Cross Browser, sabe que ainda há aqueles que teimam em não atualizar seus navegadores e para esses, nós temos que ter uma solução em mãos se não quisermos perder visitantes por falta de compatibilidade.



Criando Cada Elemento Individualmente

Até encontrar uma solução mais apropriada, eu como vários outros,  para utilizar um simples <header> "Cabeçalho", utilizava uma saída bem pouco "elegante", que era criar esse elemento através de javascript para que o IE viesse a reconhecê-lo, com o seguinte código:
document.createElement("header");

E para utilizar outras Tag's? Faria exatamente o mesmo, criaria elemento por elemento através de Javascript...



Deixe o HTML5Shiv Trabalhar por Você

Mas um desenvolvedor chamado Remy Sharp criou um script que apelidou de HTML5Shiv para que pudéssemos focar em nos preocupar com o que realmente importa. E de quebra você não precisa nem fazer o download dele, já que a biblioteca de códigos do google já hospeda e disponibiliza-o de mão beijada. Basta utilizar a seguinte regra que serve para restringir a chamada do script às versões anteriores à 9 do IE:

<!--[if lt IE9] </script>

<script src="dist/html5shiv.js"></script>

<!--[endif]-->


Agora basta clicar no link a seguir e ser feliz....

Baixar html5shiv.

/fa-clock-o/ WEEK TRENDING$type=list

Como Criar um Menu Horizontal com Sub Menu Utilizando CSS3

Clique aqui e veja aqui o código em funcionamento. Como Criar um Menu com Sub-menu? No princípio das minhas peripécias com front-end, eu tive bastante dificuldade para criar até mesmo um simples menu horizontal com CSS seguindo nossos amados tutoriais nas "interwebs" da vida. Criar um menu com Drop-down então, com o que eu sabia, era impensável! Antes de estudar bem o CSS, eu nem imaginava a capacidade que ele tinha. Se você não sabe o que é drop-down: Drop-down em tradução livre e literal significa suspenso. Mas no caso de um menu com  função  drop-down, é um menu com um sub-menu acoplado para determinados items, que se revela ao passar o mouse ou clicar nesses mesmo itens. Quebrei muito a cabeça com tutoriais e códigos prontos e não conseguia entender a lógica do sistema e sem entender essa lógica não era possível adaptá-lo para meus fins e acabava por utilizar outras saídas que até resolviam o problema, porém davam muito trabalho para pouco resultado. Ut...

Conheça o Vite e esqueça todas as outras ferramentas de bundle

Conheça o Vite e esqueça todas as outras ferramentas de bundle O ecossistema JavaScript está em constante evolução, e com isso, surgem novas ferramentas e frameworks que prometem tornar a vida dos desenvolvedores mais fácil. Um exemplo disso é o Vite, uma ferramenta de build ultra-rápida criada pelo criador do Vue.js, Evan You. Neste artigo, iremos explorar como o Vite surgiu e como ele funciona, além de mostrar alguns exemplos práticos de como utilizá-lo.   Confira o blog DougDesign para e veja como conseguir seu primeiro emprego na área de proramação e tecnologia.   O que é o Vite? O Vite é uma ferramenta de build e desenvolvimento para projetos JavaScript. Ele se destaca por ser extremamente rápido, oferecendo uma experiência de desenvolvimento fluida e instantânea. Ao contrário de outras ferramentas de build como o Webpack, o Vite não necessita de uma compilação prévia para executar, e utiliza a dependência nativa do navegador para carregar os módulos. Isso significa que o...

Criando componentes reutilizáveis com Vue.js: um guia completo

Criando componentes reutilizáveis com Vue.js: um guia completo Vue.js é um framework JavaScript popular para a criação de interfaces de usuário interativas e responsivas. Ele é baseado em componentes e, como tal, é fácil de criar componentes reutilizáveis que podem ser usados em diferentes partes do seu aplicativo. Neste guia completo, vamos explorar o que são componentes no Vue.js, como criá-los e como usá-los para criar aplicativos web escaláveis e reutilizáveis.   Confira o blog DougDesign para e veja como conseguir seu primeiro emprego na área de proramação e tecnologia. O que são componentes no Vue.js? Um componente no Vue.js é um bloco reutilizável de código que contém lógica, estrutura e estilo. Ele é semelhante a um widget em outros frameworks, e pode ser usado em diferentes partes do seu aplicativo para criar uma interface de usuário consistente e escalável. Os componentes Vue.js são compostos de três partes principais: Template: O template é onde você coloca o HTML e as d...