Usando o seletor css: target como substituto do JS

Digamos que temos um campo de busca oculto em nosso site e ele aparecerá quando o usuário clicar em uma lupa. O HTML é o seguinte:

<aside id="search-box">
    <div id="search-container">
      <form id="searchform" action="#" method="get">
        <input type="text" placeholder="Search" name="search">
      </form>
    </div>
    <a id="toggle-search" href="#search-container">Search</a>
  </aside>

Ok, o javascript ( coffeescript com jQuery na verdade) para fazer funcionar não é mágico e não há nada de novo aqui:

$ ->
  $searchBox = $('#search-box')
  $searchContainer = $('#search-container', $searchBox)
  $('#toggle-search', $searchBox).on "click", (e) ->
    $searchContainer.slideToggle("fast")
    $('input[type=text]', $searchContainer).focus()
    false

Ótimo! Agora segue minha dica

Queremos fornecer um fallback para os usuários com javascript desabilitado , em um cenário onde ninguém usa navegadores antigos (quer dizer, podemos usar seletores CSS3 sem preocupações) =)

#search-container
  display: none

  &:target
    display: block

Ok, agora funciona muito parecido com o javascript habilitado!

Clique aqui se quiser ver uma demonstração (não se esqueça de desabilitar seu javascript).

Conclusão

O seletor css : target pode ser usado de várias maneiras, mas tenho que admitir que não vi seu valor real até começar a usá-lo como fallback para JS.

Felicidades!