HTML5 + CSS3 + Modernizr

[Marcelo Garbin 30]

Bom dia a todos,

 

Seguinte pessoal, estou usando os super poderes do HTML5 e CSS3 em um novo site, ainda sou novato com essas novas marcações, minha dúvida é a seguinte.

 

Por exemplo, estou fazendo todo o site baseado em HTML5 e CSS3 testando em novos browsers para depois eu testar nos mais antigos, esta certo dessa forma? ou faço o contrário? primeiro nos antigos e depois novos?

 

Outra dúvida quando ao Modernizr, o uso dele, ele não é capaz de implementar as novas funcionalidades de HTML5/CSS3 em browser mais antigos pelo que entendi, ele identifica quais as funcionalidades estão ativas ou desativadas em determinado browser, é isso?ae em cima disso eu preciso fazer uma classe CSS para por exemplo "cobrir" a propriedade que o browser mais antigo não possui.. Certo ou nem tanto? hehehe

 

Espero que tenham entendido minhas dúvidas e também que possam me passar suas experiências quanto ao assunto.

 

Obrigado a todos. =)

[Vinicius Rangel 208]

se vc desenvolver um site com HTML5 e CSS3 nem se der ao trabalho de abrir no IE.

diferença é muito grande de qualidade.

[Marcelo Garbin 30]

Pois é Vinicius, mas muitas vezes a gente não pode se dar o "luxo" de fazer isso, infelizmente. As pessoas realmente estão começando a ,mudar isso (usuários comun's) e vendo as novas funcionalidades com outros navegadores, porém a uma grande parcela ainda usa IE(7,8,9 (O 6 acho que ninguém mais usa e se usar f...-se huashuhu)), principalmente em empresas.

 

IE sempre foi uma dor de cabeça mesmo... estou baixando o Ubuntu para por no meu note e estou pensando no IE! Justamente por isso para testar projetos web nesse "projeto de browser"...

[William Bruno 1501]

testando em novos browsers para depois eu testar nos mais antigos, esta certo dessa forma?

não está errado agir assim não, desde que vc saiba oq está fazendo.

Lembre-se que os browsers novos "corrigem" erros seus, e vc pode achar q está certo só por estar funcionando, qndo na verdade o erro é seu, e não o browser antigo que denunciou ele.

Modernizr, o uso dele, ele não é capaz de implementar as novas funcionalidades de HTML5/CSS3 em browser mais antigos pelo que entendi

isso. Mas ele faz o IE "entender" as novas tags. Sem o Modernizr, o IE nem renderiza <article> e <header> por exemplo, fazendo teu site ficar todo quebrado.

 

Ele vai "informar pro ie" que essas tags existem.

[Vinicius Rangel 208]

Marcelo, CSS3 e IE não dão certo cara.

o HTML5 ainda rola e algumas coisas, article, nav etc..

mas o css não rola, é melhor ir para javascript para animar e tudo mais

[Marcelo Garbin 30]

Obrigado @William, realmente testei o site com e sem o Modernizr, o layout quebra todo se esta sem ele.

@Vinicius, é vou usar alguma coisa em Jquery :)

 

Então, estou usando gradiente em todo o site, navegadores bons como sempre funcionam perfeitamente, porém no IE já eras....(tirando a versão 10 que funcionou, o resto não se salva).

 

Eu pensei o seguinte, deixar as regras normais de gradiente e caso o browser não desse suporte para tal(via Modernizr), entrar com imagens/sprit's dos gradientes do layout fazendo uma classe CSS para as mesma.

 

O que me dizem? é esse o caminho? ou teria alguma outra alternativa?

[William Bruno 1501]

acho assim muito trabalhoso.. a menos que a maioria do teu publico acesse com o ie, não vale a pena.

 

O que eu faço é usar uma cor sólida, como fallback. Declarando o background-color antes de tudo, e então quem suportar aplica o gradiente, quem não, aplica a cor sólida.

 

É o conceito chamado: 'graceful degradation'. Diz basicamente o seguinte: "Desde que o visitante tenha acesso ao conteudo, ele não precisa se estiver em um navegador antigo, ver os elementos 'tão bonitos' qnto seriam em navegadores novos".

 

 

Tipo.. ie7 não aplica borda redonda. E tudo bem, pois não vai ser a borda redonda q vai fazer o visitante gostar mais ou menos do site, ou fazer ele comprar.

[Vinicius Rangel 208]

kkkkkkkkkkkkkkkkkkkkkkk acho que só eu sou o vida loka, só nos hacks.

uso o css pie para caso de arredondar, trabalho com imagens para questões de gradient.

imagem de 1 px de largura e repeat-x neles..

por que?

Um site de compras por exemplo pode ter uma diferença muito significativa no layout dando a impressão que o usuário não esta no mesmo site, o que é desconfortavel para quem vai comprar etc..

[Marcelo Garbin 30]

@William

 

O que eu faço é usar uma cor sólida, como fallback. Declarando o background-color antes de tudo, e então quem suportar aplica o gradiente, quem não, aplica a cor sólida.

 

Eu já usava o background-color, mas nem imaginava que era "fallback" hehehe...

 

 

É o conceito chamado: 'graceful degradation'. Diz basicamente o seguinte: "Desde que o visitante tenha acesso ao conteudo, ele não precisa se estiver em um navegador antigo, ver os elementos 'tão bonitos' qnto seriam em navegadores novos".

 

Gostei dessa parte, bem interessante a colocação.

 

@Vinicius

 

 

uso o css pie para caso de arredondar

 

Já ouvi falar dele, mas nunca utilizei. O uso dele é parecido com o do Modernizr?

[William Bruno 1501]

kkkkkkkkkkkkkkkkkkkkkkk acho que só eu sou o vida loka, só nos hacks.

uso o css pie para caso de arredondar, trabalho com imagens para questões de gradient.

imagem de 1 px de largura e repeat-x neles..

já fiz muito site assim.. mas nos dias de hoje, o internet explorer representa 5% ~ 10% nos sites em que trabalho.

 

Então, eu deixo o site acessível, mas não tão bonito qnto poderia ser.

E isso lembrando, que 5% dos 5~10%, são ie6 e ie7.

[Vinicius Rangel 208]

então vale a pena Bruno.

quando eu fiz o meu eu tinha 40% vindo do IE o que era um problema, e depois que a propia microsoft parou de dar suporte para IE6 eu não utilizo mais.

 

E marcelo eu não faço ideia o que é modernizr, mas é só usar o border-radius e depois jogar a classe no elemtno