8

Tenho um menu de navegação com alguns ícones utilizando @font-face. Cada item desse menu tem:

  • o ícone (com ::before);
  • texto, explicando qual a função daquele link.

.Acontece que, quando a página for carregada em um dispositivo menor, quero que o texto "desapareça" e seja mostrado somente o ícone. Tenho a seguinte estrutura:

<nav>
  <ul>
    <li><a class='ico-foo' href='#'>Visitar Foo</a></li>
    <li><a class='ico-bar' href='#'>Visitar Bar</a></li>
    <li><a class='ico-foobar' href='#'>Visitar FooBar</a></li>
  </ul>
</nav>

Normal, como a maioria das estruturas. Acontece que, se eu tentar esconder o conteúdo da tag <a> o ícone no ::before não irá aparecer. Por exemplo, tentei usar text-indent: -999px; e não funcionou pois o ícone acompanha essa regra e "some".

Pois bem, a solução que encontrei para esconder o texto foi colocar ele dentro de um <span>, assim quando a página é aberta em um dispositivo menor eu dou um display:none nessa tag <span> e assim é mostrado somente os ícones como eu gostaria. A estrutura então:

<nav>
  <ul>
    <li><a class='ico-foo' href='#'><span>Visitar Foo</span></a></li>
    <li><a class='ico-bar' href='#'><span>Visitar Bar</span></a></li>
    <li><a class='ico-foobar' href='#'><span>Visitar FooBar</span></a></li>
  </ul>
</nav>

Beleza. A minha dúvida é: Essa é a melhor tag para fazer isto? Estou me preocupando com pouca coisa?

Alguns sites (principalmente os criados usando bootstrap) utilizam a tag para ícones, mas segundo essa pergunta o uso é apenas para economizar caracteres.

Alguma sugestão pra fazer isso de uma forma melhor?

2
  • 3
    Renang, a minha ideia não funciona tão bem quanto eu pensava. O icon também é apanhado. Acho que o span é de facto a melhor opção. Vamos ver o que os demais dizem.
    – Sergio
    26/10/2014 às 21:22
  • 2
    E um line-height alto com overflow hidden, alguém tentou?
    – bfavaretto
    26/10/2014 às 21:31

1 Resposta 1

8

A tag <span/> é de facto a mais utilizada para lidar com problemas como o que referes.

O elemento HTML <span> é um conteiner genérico em linha para conteúdo fraseado, que não representa nada por natureza.

É um elemento sem qualquer significado adicional associado ao seu uso, ao contrário de outros elementos como <em/> e <i/> que têm um significado por trás do seu uso, ou seja, foram criados com um objetivo especifico, ao passo que o elemento <span/> foi criado para permitir atribuir formatação via CSS, referenciar idioma, entre outros, a determinado conteúdo sem que este seja influenciado pelo seu uso.

No teu caso em particular pretendes manipular o texto via CSS, nada melhor que o envolver com um <span> para abstraíres o impacto do CSS do resto da tua markup e focar o mesmo unicamente no texto.

Sobre a forma como estás a agir, o display:none; parece-me o melhor percurso a tomar.

Outros métodos carecem alguns cuidados:

  • Indentação negativa

    Pode ser utilizado em alguns cenários, por exemplo text-indent:-999px mas muito cuidado porque a tela do visitante pode ser maior que o text-indent dado e o texto vai aparecer num local inapropriado.

  • Tamanho de letra zero

    Pode ser utilizado em alguns cenários, mas os crawlers (Inglês), como é o caso da Google consideram isso incorreto e contra as regras de SEO o que vai deixar uma bandeira na página de forma negativa.

3
  • 1
    A sugestão de indentar o texto não funciona, o ícone está sendo inserido no ::before da tag. Então, minha solução é a mais adequada mesmo? O uso da tag <span> ? 26/10/2014 às 21:38
  • 1
    Sim, eu diria que o que estás a fazer é o melhor que pode ser feito dado o que pretendes. Não estás a elevar a complexidade da markup nem a tirar significado aos elementos de HTML. Está tudo Ok :)
    – Zuul
    26/10/2014 às 21:40
  • Se da forma que tens resulta, estares a alterar não ganhas nada a não ser "perder tempo". Precisas de uma <span> seja para o icon seja para manipular a visibilidade do texto. Se usas para um ou para outro é irrelevante no que respeita ao código na tua pergunta. Continua a achar que estás bem como estás :)
    – Zuul
    26/10/2014 às 21:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .