Arquivo da categoria: Browsers

Como se prevenir para a chegada do IE8

O Internet Explorer 8 está chegando aí e seu lançamento pode servir tanto de alívio como dor de cabeça pra nós desenvolvedores, visto que vários bugs das versões “atuais” (IE’s 6 e 7) serão corrigidos, porém os hacks estrela (* html para IE6 e *+html para IE7) continurão o hack estrela para o IE7 (*+html) continua funcionando no IE8.

Trabalho é legal, mas re-trabalho é entediante…

Se você, como eu, é do tipo que não gosta de re-trabalho, é bom começar a pensar nisso. E é o que eu tenho feito nos meus últimos projetos. Tento evitar ao máximo o uso de hacks, mas quando não dá pra escapar, recorro aos recursos técnicos de emergência (aka gambiarra). A própria Microsoft (quem diria…) bem que nos avisou ainda na época do lançamento do IE7: prefiram os comentários condicionais.

Comentários condicionais? Mas isso não aumenta meu trabalho?

A grande desculpa esfarrapada para o não-uso dos comentários condicionais é que o número de arquivos CSS podem aumentar consideravelmente e isso em projeto grandes pode se tornar em um caos para administrar. O fato é que, apesar de não ter me envolvido em nenhum projeto grande até hoje, eu costumo pegar alguns layouts complexos pra codificar (<jabá>vide portfolio da Interag, desatualizado e prestes a sofrer alterações</jabá>) e, mesmo assim, é raro eu ter que criar mais de um arquivo CSS especificamente para os IE’s e esse único geralmente não tem mais do que 15 ou 20 linhas de código. Isso mesmo. Eu crio apenas um único arquivo CSS que cuida das incompatibilidades do IE6 e do IE7. Como?

<!--[if (IE 6)|(IE 7)]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"><![endif]-->

Esse trecho de código faz a mágica. Nele nós dizemos que, caso o browser do usuário seja o IE na versão 6 ou 7, um novo arquivo ie.css deverá ser incluído na página. Colocamos esse código no <head></head> de nosso documento e pronto. Agora tudo o que temos que fazer é, dentro desse arquivo ie.css declarar as regras CSS específicas para o IE6, para o IE7 e para ambos:

/* ie6 e ie7 */
.clearfix { display:inline-block; }

/* apenas ie6 */
* html #geral { height: 1px; }

/* apenas ie7 */
*+html legend { text-indent: -5px; }

Mas olha os hacks ali! Você trapaceou!

Como dito anteriormente, apenas as versões 6 e 7 do navegador da Microsoft verão esse arquivo. Portanto, é OK usar hacks específicos para essas duas versões do browser dentro desse arquivo (e somente dentro dele). 😉

Um exemplo prático

Nada como um exemplo mais prático para compreendermos como funcionam as engrenagens. Vamos assumir que temos a seguinte marcação no nosso HTML:

<h1>Olá! Eu sou um exemplo prático. :)</h1>

OK, esse exemplo não foi nada prático. Mas continue seguindo, você não tem nada a perder…
Bem, suponhamos que queiramos que esse título assuma as seguintes formatações:

  1. azul com fundo branco nos browsers;
  2. branco com fundo azul no IE7;
  3. branco com fundo vemelho no IE6.

Para isso, precisaríamos ter em nosso arquivo CSS principal a seguinte regra:

h1 {
    color: #00B;
    background-color: #FFF;
}

E o nosso arquivo ie.css ficaria da seguinte forma:

/* ie6 e ie7 */
h1 { color: #FFF; }

/* apenas ie7 */
*+html h1 { background-color: #00B; }

/* apenas ie6 */
* html h1 { background-color: #B00; }

Se você testar esse código nos browsers de verdade (gentilmente incluindo o IE8 aqui, como colher de chá), verá que o título está azul com fundo branco, como previsto. Já nos IE’s 6 e 7 o título estará branco; no IE7 com fundo azul e no IE6 com fundo vermelho.

That’s all, folks. Em breve espero postar mais artigos pra movimentar novamente o blog. Ou não.

Anúncios

6 Comentários

Arquivado em Artigos, Browsers, CSS, Internet Explorer, Tutoriais, Web Standards

Microsoft libera primeiro beta do IE8

Eis que a luz ao final do túnel começa a aparecer pra nós, desenvolvedores preocupados com os padrões web. Em sua nova versão do browser mais usado do mundo (o que não significa dizer que seja o melhor), a Microsoft, tão crucificada por muitos (inclusive eu) pelo seu pouco caso com as normas do W3C, resolveu olhar pra nós e dar seus dois centavos para a construção de uma web mais unificada.

Hoje pela tarde, durante a MIX08 – conferência que acontece em Las Vegas até dia sexta-feira – a Microsoft liberou o primeiro beta de seu navegador. Se você, como eu, quiser sentir o que vem por aí, você pode baixar o IE8 Beta 1 e começar a testá-lo e enviar suas sugestões (ou não) para a Microsoft.

Agora, se me dá licença, meu download acaba de terminar e eu já vou instalar o bichinho. 🙂
Ah, e daqui a alguns dias eu volto pra dizer o que eu achei do IE8.

Comentários desativados em Microsoft libera primeiro beta do IE8

Arquivado em Browsers, Internet Explorer, Mercado, Rapidinhas, Softwares, Web Standards

Sai Firefox, entra Flock

Há alguns dias saiu na Smashing Magazine um artigo sobre “browsers interessantes sobre os quais você nunca ouviu falar” e, posteriormente, o Pedro também falou sobre alguns deles.

O fato de eu descobrir que o Flock, um fork do Firefox, voltado à integração com as principais redes sociais, chegou em sua primeira versão estável, em conjunto com a minha insatisfação com o desempenho do Firefox me animou a testá-lo mais uma vez. Eu já havia testado o Flock antes, quando ele ainda estava em seus primeiros passos, mas na época não vi muita novidade e acabei não me interessando e desinstalando logo. Bem, as coisas mudaram.

Como disse, o Flock é bastante voltado para a integração com as redes sociais mais conhecidas, como Flickr, Del.icio.us, WordPress, Youtube, Facebook, entre outros. Existem recursos realmente facilitadores nele, como, por exemplo:

  • upload de fotos para o Flickr, direto do browser;
  • o Web Clipboard, uma espécie de área de transferência integrada ao browser;
  • gerenciador de contas e serviços (sem comentários);
  • interface para publicação de posts (na qual estou escrevendo este artigo), com editor bastante parecido com o usado pelo WordPress. Basta informar uma conta em algum serviço de blog conhecido, ou no seu próprio blog e começar a escrever seus posts;

Além disso, o Flock, como é baseado no Firefox, suporta todas (pelo menos das que testei) as extensões do Firefox, o que significa que você não precisa abrir mão de suas comodidades se quiser migrar do Firefox pro Flock.

Com o visual mais bonito, a mesma engine e uma integração fantástica com diversos serviços pela web, além de um desempenho melhor (meu Firefox chegava quase aos imperdoáveis 200MB de consumo) não tive que pensar duas vezes antes de mudar logo de browser. Estou confortável com o Flock e é nele que pretendo ficar, pelo menos até o lançamento “final” do Firefox 3. 🙂

Blogged with Flock

Tags: , , ,

9 Comentários

Arquivado em Artigos, Browsers, Cotidiano, Pessoal, Softwares

Microsoft libera o IE7 para Windows pirateados

Eu não gosto de postar apenas links pra matérias, mas essa notícia (@INFO Online) é sensacional e não pude deixar de divulgar.

O IE7 não é o ideal de browser que se esperava que fosse mas sem dúvida já é um grande avanço em relação a seu irmão mais novo. A possibilidade de todos os usuários de IE6 migrarem para o IE7 sem ter que passar pela validação do Windows é realmente excelente pra nós, desenvolvedores, já que o suporte aos padrões do IE7 é menos pior que do IE6. Portanto, divulguem essa notícia e substituam os IEs em quantos computadores você puder. 🙂

Mas, é claro, prefira sempre a raposa. 😉

3 Comentários

Arquivado em Browsers, Internet Explorer, Softwares, Web Standards

Como você testa o CSS de seus sites?

O Henrique publicou um texto, e o Diego já tinha publicado o dele, sobre a metodologia deles para testar os sites em diversos browsers. A discussão me pareceu interessante, então eu resolvi fazer mais do que apenas comentar no artigo deles.

Bem, eu desenvolvo com o Firefox, IE6, IE7 e Opera abertos. Desta maneira, vou fazendo os testes “ao vivo” sempre que uso uma declaração que suspeito que vai quebrar em um dos IE’s, claro, via conditional comments.

O Opera tem ficado meio às margens, por muitas vezes não se encaixar no público-alvo de nossos projetos, mas mesmo assim costumo conferir como estão as coisas nele, para evitar problemas futuros. O que me deixa irritado com o Opera é que, por ser considerado o browser com maior suporte às CSS (e, de fato, o é), ele deveria ter uma renderização melhor que a do Firefox, mas na prática não é o que acontece. Parece que ele tem o dom de complicar declarações simples, ao passo que suporta declarações que nem o Firefox suporta.

Geralmente, apesar de construir layouts, digamos, não-convencionais, não necessito de muitas linhas de código pra consertar as coisas no IE6, e muito menos no IE7. Palmas para a Micro$oft, que conseguiu dificultar menos a nossa vida, com o IE7.

Eu ouvi falar em IE5? Não, não… acho que estou ouvindo demais…

5 Comentários

Arquivado em Browsers, Cotidiano, CSS

Firefox 2 RC1

Hoje, por volta do meio-dia, o Firefox deu mais um passo rumo ao lançamento de sua segunda versão. Trata-se do lançamento da versão RC1.
Ao ficar sabendo da disponibilidade, não me aguentei e fui logo baixando. 😛
Com menos de 5 minutos já tinha baixado e instalado tudo, o que é bem normal, se tratando de Firefox.

É óbvio que o Firefox 2 RC1 não tem suporte a algumas extensões com as quais já estamos acostumados. Entre as que eu mais usava e que não são suportadas na RC1 estão: Web Developer, Update Notifier, LiveLines, Sage e Session Saver. Mas creio que eu consigo sobreviver sem elas até o final de outubro, quando é esperado o lançamento da versão final do Firefox 2 (isto é, se é que até lá todas estas extensões serão atualizadas também). Sim, eu conseguirei sobreviver sem a Web Developer! Pelo menos assim eu espero…

Quanto à interface – que vinha sido muito comentada devido à participação da empresa canadense Radiant Core – não senti muita diferença (o que é bom), apesar de a iconografia ter sido renovada (pra melhor, na minha opinião).
A grande diferença em relação às versões passadas é o fato de que agora cada aba tem seu próprio botão de fechar, e no canto direito da barra de abas (onde antes ficava o botão de fechar as abas) tem um botão que, quando clicado, mostra todas as abas atualmente abertas no Firefox. Quem usa Opera já deve estar acostumado com isso, mas quem não usa deve sentir um pouco essa mudança.
Outra mudança que pude notar é que agora, no menu Ferramentas, ao invés de aparecerem ambos os itens Temas e Extensões, há apenas um item (Complementos), que abre uma janela semelhante à janela de opções, onde se pode ver tanto os temas instalados quanto as extensões. Coisa bem simples e mínima, mas que deu uma organização melhor ao menu.

Um ponto negativo que notei foi a auxência dos botões Anterior, Próxima, etc., na barra de pesquisa textual pela página. Isso realmente será um incômodo grande caso não seja corrigido antes da versão final.

Bom, ainda é cedo demais pra dizer se o Firefox 2 será ou não tudo o que dizem que será, até porque RC‘s são apenas RC‘s, mas por hora, além do que já tinha sido concretizado na versão Beta 2, não há tanto motivo para grandes euforias.

4 Comentários

Arquivado em Artigos, Browsers, Cotidiano

Opera 9 – Primeiras impressões

Motivado pela boa impressão causada pelo Opera Mini e por uma comparação de browsers feita pelo van Amstel, do Usabilidoido, onde ele compara, em termos de usabilidade, o Firefox 1.0.6, o Opera 8.01 e o IE6 (se é que isso tem usabilidade), resolvi baixar a versão mais recente do Opera pra ver se ele realmente é tudo o que falam que é.
Pois é, eu sei que é muito tarde pra falar do Opera 9, mas eu estava tão satisfeito com meu Firefox que achei que não precisaria conhecer outros browsers. De fato, eu ainda não troco meu Firefox pelo Opera por uma série de fatores, mas tenho que reconhecer que me impressionei muito com esse simpático browser. Me impressionei tanto que resolvi blogar sobre algumas facilidades e funcionalidades sobre as quais ainda não tinha lido ou ouvido falar. Chega de blá blá blá e vamos ao que interesa.

Interface

Pra quem já está acostumado com o Firefox, a interface do Opera é bastante amigável, pois há bastante coisa em comum entre os dois browsers como, por exemplo, a barra de pesquisa embutida que, por padrão, também vem configurada para o Google, mas é possível adicionar outros mecanismos.
Além disso, é possível (como no Firefox) adicionar novas skins feitas pelos próprios usuários. Eu, como skin lover que sou, fui logo atrás de algumas e achei várias legais, dentre elas, a Tango CL, que é a que estou usando.

Opera 9.01 - Tango CL Theme

Suporte aos Padrões

O Opera 9, segundo dados estatísticos, com explicação neste artigo do Idealog, tem o melhor suporte aos padrões juntamente com o Firefox (como já era de se esperar). Da versão 8.5 para a 9, esse suporte cresceu consideravelmente, como se pode perceber através da tabela. Isso evidencia que só mesmo a Microsoft não se interessa pelos padrões, já que o IE6 tinha o pior suporte aos padrões (52%) e o IE7 apresentou (até agora) um “aumento” vergonhoso de apenas 2% a esse suporte.

Usabilidade

O Opera dispõe de uma barra lateral (por padrão vem à esquerda, mas é possível mudar seu posicionamento) muito interessante. Primeiro pelo fato de ela ser “colada” ao canto da página, o que faz com que ela tenha “largura infinita”, como disse o van Amstel em seu vídeo de comparação dos browsers, e seja muito fácil alcançá-lo e clicá-lo. Segundo porque, além de ser personalizável, possibilitanto colocar ali qualquer atalho ou coisa do tipo, ela tem várias funcionalidades, como, por exemplo, o painel links, que mostra todos os links contidos na página, possibilitando, por exemplo, que você faça o download simultâneo de vários arquivos, sem ter que ficar rodando a página toda atrás dos links de download. Prático, não?
Menus simplificados, intuitivos, caminhos curtos, recuperação de páginas fechadas, interface intuitiva e quase 100% customizável. Tudo isso faz com que o Opera 9.01 dê show de usabilidade.

Barra lateral - Fácil acesso e diversas funcionalidades

Facilidades e Funcionalidades

Essa é a parte boa da coisa, a parte que mais me impressionou. O Opera 9.01 por padrão vem com diversas funcionalidades que no Firefox só se tem através de extensões e que os usuários do IE nem sonham que existem. Vamos ver algumas delas:

Mouse Gestures
Disponível no Firefox apenas através da extensão Mouse Gestures, é uma das principais funcionalidades (pelo menos pra mim) do Opera 9.01. Vá para a página anterior simplesmente pressionando rapidamente o botão direito seguido do esquerdo; abra links em novas abas simplesmente clicando-os com o botão direito e arrastando para baixo; recarregue a página simplesmente clicando com o botão direito e arrastando pra cima e pra baixo. Essas são só algumas possibilidades, veja mais sobre isso aqui.
Leitor de Feeds
Assim como o Firefox, o Opera também possui um leitor de feeds embutido, mostrando o ícone de feed na barra de endereço quando ele estiver disponível. O que diferencia o Opera do Firefox é que o Opera pode ser configurado para atualizar os feeds em um intervalo predefinido (que varia entre 5 minutos e 1 semana), e, além disso, ele te notifica quando há novidade entre seus feeds, levantando uma plaquinha no canto inferior direito da tela, o que elimina a inconveniência de ter que ficar visitando sua página no seu leitor de feeds ou ficar acessando seu painel de favoritos dinâmicos (no Firefox) pra ficar procurando as novidades.
BitTorrent
Baixe arquivos via torrent direto do browser, sem precisar de um aplicativo específico pra isso. Basta clicar no arquivo .torrent que deseja baixar e o Opera se encarregará de baixar pra você e salvar em um diretório de sua escolha. Simples, não?
Comandos de voz
Isso mesmo! O Opera 9.01 responde a comandos de voz! Por padrão esse recurso não vem habilitado, mas é possível baixar os arquivos adicionais que são necessários para habilitar essa função simplesmente clicando no ícone do óculos que fica no canto direito, logo acima da barra de rolagem, e depois clicando em Voz ou, se preferir, pelo menu Ferramentas » Preferências » Avançado » Voz e marcando a opção Habilitar controle de navegação por voz. Obviamente, é necessário um microfone para que o Opera entenda seus comandos, que atualmente só estão disponíveis em inglês. Leia mais sobre este recurso aqui.
Widgets
Semelhantes às extensões do Firefox, adicionam várias outras funcionalidades ao Opera, como informações instantâneas sobre o clima em sua cidade (funciona em praticamente todas as cidades), busca por torrents, editores HTML e etc. Infelizmente não achei nada como a Web Developer do Firefox…

Bom pessoal, existem ainda várias coisas pra falar, como, por exemplo, que você pode configurar o Opera para abrir sempre justamente como você parou na última sessão, mas o post já está ficando muito extenso e já deu pra mostrar várias funcionalidades. Acho que por hoje é só.
Um abraço a todos e até o próximo post.

<update>

Thumbnails nas abas
Interessantíssima essa função, e eu tinha me esquecido de falar dela. O Opera permite que você visualize uma thumbnail de uma página aberta em uma aba. Basta você apontar o mouse sobre alguma aba que o Opera exibe uma janelinha com a thumbnail, o título, a codificação usada e o MIME Type da página.

</update>

8 Comentários

Arquivado em Browsers, Cotidiano, Usabilidade