Klaus Paiva

Hoje eu estava lendo alguns feeds RSS quando acabei navegando até essa página aqui: https://developer.mozilla.org/En/Using_the_:target_selector

Nela é possível ver várias formas de utilização da pseudo-classe :target. Essa pseudo classe pode ser usada nos seus arquivos CSS quando um elemento é referenciado pela âncora lá na URL.

Ou seja, http://example.com/#isso_aqui_eh_a_ancora

Dessa forma, você pode obter alguns comportamentos dinâmicos utilizando apenas CSS. Comportamentos tipicamente feitos por JavasScript, como destacar uma foto ao clicar sobre sua imagem menor, podem ser feitos sem problemas utilizando-se esta técnica.

Ainda não ficou muito claro, né? Para facilitar as coisas, veja este exemplo funcional.

Experimente clicar nos links disponíveis abaixo da foto. Note que clicando em qualquer um deles a imagem é alterada. A "mágica"está lá no arquivo CSS:

/* esconde as imagens por padrão */
#imagens img {
	display: none;
}
#imagens #imagem-1:target,
#imagens #imagem-2:target,
#imagens #imagem-3:target,
#imagens #imagem-4:target,
#imagens #imagem-5:target,
#imagens #imagem-6:target {
	display: block;
}

Ou seja, o pseudo seletor :target só será ativado quando a âncora na URL casar com o elemento respectivo, tornando a imagem selecionada visível (e as demais invisíveis).

Em termos de compatibilidade, este exemplo foi testado e funciona em: Firefox 3.6, Chrome 5.0, Opera 10.60 e Safari 5.0.

E funciona no IE? Talvez... talvez no IE 9! (evil laugh here mwhaha!)

Já recebi vários e-mails através do formulário de contato deste blog me perguntando sobre cursos de web standards, HTML, CSS, Javascript e afins. Em termos de cursos disponíveis gratuitamente na web, eu sempre recomendei o conteúdo disponível no site W3Schools.

Porém, além desse curso, essa semana eu recebi um e-mail aqui no trabalho comentando sobre um curso oferecido pela Opera (sim, aquela do navegador Opera). Dei uma olhada geral sobre o conteúdo e parece ser bem interessante, além de abordar a maioria dos tópicos usados no dia-a-dia de quem trabalha e desenvolve interfaces web.

Sendo assim, se você está interessado num curso de desenvolvimento de front-end gratuito, esta é também uma excelente opção. Bons estudos!

Estive dando uma olhada na especificação do HTML 5 e achei uma novidade interessante.

Trata-se do atributo rel="noreferrer", que pode ser aplicado nas tags a e area, que esconde o cabeçalho (sic) Referer quando um usuário clica no link que possui este atributo. Além disso, a propriedade window.opener também recebe valor nulo como consequência do uso deste atributo.

Uma novidade bem interessante no sentido da privacidade dos usuários e que também pode causar um impacto significativo em aplicações que dependam desta informação, por exemplo as aplicações de visitas e estatísticas como o AWStats ou o Google Analytics.

Como a especificação do HTML 5 ainda não está finalizada, pelo que pude apurar, apenas as versões mais recentes do Webkit suportam esta propriedade. Apesar disso, como a implementação deste recurso não parece representar grande dificuldade, logo ela deve ser implementada também pelos demais navegadores.

Um vídeo bastante interessante que mostra vários recursos provenientes do HTML 5: canvas e SVG, <video>, geolocation, app cache e banco de dados local, e web workers. (aliás, eu já falei sobre web workers aqui no blog )

Have fun! Vi aqui.