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!)

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!

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.

Have fun! Vi aqui.

Se você quiser ver uma versão, digamos, alto nível das novidades, acesse esta página.

Se você está interessado em ver as novidades da versão 3.5 para nós, desenvolvedores, veja esta página.

Fica a dica!

Diante dessa lembrança eu pensei em usar o objeto Canvas do HTML 5 que eu havia comentado anteriormente para, digamos, “reviver” essa brincadeira numa formato digital.

Procurei uma imagem para fazer os testes e acabei encontrando um site bem legal, com várias imagens no estilo “ligue os pontos”. Dentre as várias opções, escolhi a imagem abaixo:

Ligue os pontos e ganhe um pato (ou cisne, ou ganso, ou marreco)

A partir daí comecei a pesquisar um pouco mais sobre os métodos de desenho disponíveis para codificar algo que permitisse desenhar umas linhas sobre a imagem acima. O tutorial de Canvas no MDC foi bastante importante nesse sentido.

Bom, mas chega de enrolação e deixe-me mostrar esse tal “ligue os pontos digital“. =) Basta sair clicando para ver o resultado. Há também alguns comandos de teclado disponíveis mas eu vou deixar que você descubra (espero) intuitivamente (ou por associação).

O código-fonte está bem simples  o que permite entender relativamente fácil o que foi feito. E falando sobre o código, vale lembrar que o código em si é mais uma prova de conceito do que um exemplo de código bem estruturado. Ah, e detalhe importante é a imagem no canto superior direito na página.

Pra ficar mais legal ainda, embora o tempo não me permita, seria legal colocar junto do código algum algoritmo para descobrir quando a imagem foi desenhada corretamente.

E por fim, o “liga pontos” acima foi testado (e funcionou) em Firefox 3.0.10, Opera 9.64, Safari 3.2.3 e Chrome 2.0.172. No IE 8, nativamente, não funciona.

Update! Enquanto eu “jogava” eu estive pensando e cheguei a conclusão que esse tipo de jogo pode ser interessante para pessoas que estão iniciando no mundo da informática, principalmente para adquirir destreza ao usar um mouse. Interessante!

O que há de errado com a margem padrão?

A questão aqui é muito simples: ela é inconsistente entre alguns navegadores. Alguns elementos aparecem com padding num navegador, outros usam margin, em alguns o valor é X, em outros o valor é Y… Aí já viu, bobeou e é um festival de pequenas diferenças nos seus layouts.

A solução para este problema é bastante simples, para não dizer óbvia:

* {
margin: 0;
padding: 0;
}

Usando o seletor universal “*” zeramos os valores de margin e padding em todos os elementos da página

Desta forma, um elemento só vai ter margem (interna ou externa) se você especificar, o que no final das contas facilita sua vida pois você não vai precisar ficar lembrando onde estão as inconsistências de cada elemento em cada navegador.

Não gostei desse seletor universal aí…

É, nem todo mundo se sente confortável com um seletor universal na página. Se você preferir, o Tantek Çelik tem uma solução alternativa também muito boa. É o undohtml.css. Coloquei abaixo uma cópia do original:

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let’s get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary… */

Um CSS com seletores básicos, bem fácil de ser entendido.

Faça o teste!

Experimente começar um novo projeto usando umas das duas formas propostas acima. Posso te garantir que você não vai se arrepender!