Browsers » Pinceladas da Web - HTML5 Hard Coding and Bullet Proof CSS

Como previnir o bug de dupla margem no IE

Postado por: Pedro Rogério em 30 de outubro de 2007

30 out
21

Muitas pessoas já devem ter passado por esse tipo de problema e nem sabiam o por que de ocorrer isso, mas se repararem, quando você defini uma margem para algum elemento de uma página, e esse elemento tem um float na mesma direção da margem, ela é duplicada. Isso ocorre no IE6, não sei em versões anteriores, mas na versão 7 isso já foi corrigido.

Para vocês verem o que acontece, dêem uma olhada nesse exemplo. Eu defini um float:left para a Div e uma margem esquerda no valor de 200px, no IE6 isso vai para 400px. A maneira de corrigir isso é muito simples, basta definir um display:inline para a Div que tudo volta ao normal, vejam como ficou agora.

Quer testar seu site na primeira versão do Firefox?

Postado por: Pedro Rogério em 18 de outubro de 2007

18 out
4

Phoenix

Estava recentemente vendo as estatísticas de visitas aqui do meu blog, aí fui ver como andavam as coisas em relação aos browsers, então, vi um browser com um nome meio estranho, chamado Phoenix, fui até o Google buscar mais informações sobre o mesmo e descobri que esse foi o nome dado as primeiras versões do Firefox.

A partir da página de Releases do Firefox, você pode baixar todas as versões, desde a 0.1 até a versão mais atual, a 2.0.0.7.

Como eu adoro efetuar esse tipo de teste, baixei a versão 0.1, descompactei os arquivos e abri o browser, pois não é necessário nenhum tipo de instalação. Fui testar o meu blog, fiquei muito triste, olhem só o resultado abaixo:

Depois do multiple ies, agora é a vez do multi-safari

Postado por: Pedro Rogério em 17 de outubro de 2007

17 out
4

Após o lançamento do IE7, foi necessário descobrir uma forma de rodar o IE6 e o IE7 no mesmo PC para podermos testar os sites, mas o Safari não ficou atrás nisso, se quisermos testar o site em versões antigas do Safari, existem ainda disponíveis para download os instaladores desde a versão 1.0 até a versão 2.0.4. Portanto, se você é um feliz usuário do MAC, aproveite e veja como seu site se comporta em diferentes versões do Safari.

Mobile Firefox: Browser para mobiles

Postado por: Pedro Rogério em 11 de outubro de 2007

11 out
0

Recentemente foi desenvolvido um browser para dispositivos móveis baseado no Firefox, chamado Maemo, que infelizmente por enquanto só está disponível para o aparelho Nokia N800 com Tablet OS 2007, que por sua vez tem largo suporte aos WebStandards, pois usa o motor de renderização Gecko.

Ele é bem interessante, tem suporte a Ajax, RSS e aos plugins do Firefox. Veja abaixo algumas screenshots dele em funcionamento:

Referências

Via Anieto2K.

30 Extensões Firefox para Desenvolvedores Web

Postado por: Pedro Rogério em 3 de outubro de 2007

3 out
9

Uma das coisas mais interessantes do Firefox é a possibilidade de você instalar extensões nele que podem lhe auxiliar e muito, seja para navegar, ou para o desenvolvimento web, e até hoje eu não entendo como tem muita gente ainda que não utiliza o Firefox, seja, ou por receio, ou por que o acha feio, não sei, mas isso fica para um próximo post, mas abaixo você pode ver uma lista de 30 extensões que eu encontrei no site Sentido Web, e podem auxiliar e muito você desenvolvedor:

CSS

Aardvark: Permite ver atributos CSS, ID’s e Classes, selecionando elementos individuais na página.
chromEdit: Permite modificar o CSS e o JavaScript de qualquer página.
CSSMate: Edição de arquivos CSS.
CSS Validator: Valida o CSS de suas páginas.
CSSViewer: Visualiza propriedades CSS.
EditCSS: Permite modificar os CSS carregados.
IETab: Visualize suas páginas web no IE dentro do Firefox.
Style Sheet Chooser II: Permite selecionar folhas de estilo alternativas para uma página.

Debug e Análise

Firebug: Dispensa apresentações, a melhor ferramenta para análise e debug de HTML, CSS, JavaScript e Ajax.
HTML Validator: Valida o HTML suas páginas de acordo com o W3C.
JavaScript Debugger: Debug de JavaScript.
Link Checker: Comprova se os links de uma página são válidos.
Load Time Analyzer: Ferramenta para mostrar o tempo de carregamento de uma página.
View Dependencies: Mostra informações de todos os arquivos usados ao carregar uma página.

Outros

Clipmarks: Tire screenhots de lugares específicos de sua página.
Codetech: Editor Web com a aparência do Dreamweaver.
ColorZilla: Capture cores das páginas visitadas.
FirePHP: Ferramenta para depurar PHP.
Greasemonkey: Altere o comportamento de qualquer página web com esse plug-in.
Measureit: Ferramenta para medir(em pixels), partes das páginas web.
Platypus: Uma das melhores ferramentas para modificar uma página web.
Poster: Permite interagir com WebServices e outras ferramentas web.
Professor X: Mostra o conteúdo do header de uma página web.
Screen grab: Tire Screenshots de suas páginas web.
TestGen4Web: Grava a atividade dos usuários em páginas web.
View Source Chart: Visualizador de código fonte.
Web Developer: Uma coleção de ferramentas para desenvolvimento web.
X-Ray: Permite ver o código fonte de uma página e alternar entre ambos de uma forma simples.