quinta-feira, setembro 08, 2011

Marca texto colorido com HTML

Atualizado dia 31/05/2015.
Canetas marca texto

A maioria das tags de HTML 5 ainda não funciona do mesmo jeito em todos os navegadores, então temos que usar gambiarras. Um exemplo é a tag <mark>, que colore o background do texto com a cor amarela, da mesma forma que uma caneta marca texto que usamos no papel.

Código:

Já viu como fica um <mark>texto marcado</mark> quando a gente usa essa tag nova?

Resultado:

Já viu como fica um texto marcado quando a gente usa essa tag nova?

Para saber se seu navegador já é compatível, visite a seguinte página nele: web.htmhelen.com/mark.html.

Teoricamente a tag <mark> já deve funcionar perfeitamente nas versões mais recentes de todos os navegadores, mas na prática a teoria é outra.

► Outras cores

Para definir outra tonalidade em sua marcação, mude background-color e color na folha de estilos.

a) CSS padrão:
<style>
mark {background-color:#00ff00; color:#000000;}
</style>
b) CSS do Blogger:
mark {background-color:#00ff00; color:#000000;}
]]></b:skin>
c) CSS dentro da própria tag (inline):
Defina dentro da tag <mark style="background-color:salmon; color:lightyellow;">mark</mark> a cor de sua marcação.

Resultado:

Defina dentro da tag mark a cor de sua marcação.

Algumas combinações com fonte preta (#000000):

#ffff00 #f5deb3 #ffd700 #ffa500 #9acd32 #adff2f #00ff7f #00ffff #d8bfd8 #ffc0cb #e6e6fa #ffeecc #ffccee #eeffcc #eeccff #ccffee #cceeff

Algumas combinações com fonte branca (#ffffff):

#7b68ee #00bfff #ee82ee #ff69b4 #ff1493 #d2691e #ff8c00 #f08080 #ff0000 #0000ff #000066 #006666 #006600 #660000

► Bug do Internet Explorer

Fiz vários testes no Internet Explorer 9 e descobri que em alguns blogs a tag não funciona, mas em outras páginas sim. Para não ser refém da instabilidade desse navegador, sempre defina o background na folha de estilos, mesmo que queira manter o tom amarelo [#ffff00].

► Bug do Opera 11

No Opera dá erro quando a gente usa a tag <mark> dentro de um parágrafo <p>. Esse navegador gera INEXPLICAVELMENTE uma quebra de linha antes da primeira palavra marcada.

Código:

<p>Já viu como fica um <mark>texto marcado</mark> no Opera quando a gente usa essa <mark>tag nova?</p>

Resultado:

Já viu como fica um
texto marcado no Opera quando a gente usa essa tag nova?

Fiz centenas de testes para remover essa quebra com CSS, mas não funcionou. O que deu certo foi uma gambiarra: trocar <p> por <div> ou inserir uma tag <div> dentro de <p>.

<p><div>Já viu como fica um <mark>texto marcado</mark> quando a gente usa essa <mark>tag nova?</div></p>

Resultado:

Já viu como fica um texto marcado quando a gente usa essa tag nova?

Nos meus testes com a tag <mark> não identifiquei nenhum bug nos seguintes navegadores:

  • Chrome 14
  • Firefox 6.0
  • Safari 5.1

Até mais!

Pix meutedio arroba mail ponto com

4 comentários:

  1. Que legal!
    Eu não sabia que no HTML5 havia uma tag que realçava o texto em amarelo.

    ResponderExcluir
  2. IE? Opera? Tenho dó de quem usa essas gambiarras que se chamam de navegadores, procuro deixar meu site funcional nesses navegadores mas o mais feio possível, com vários avisos de troque seu navegador.

    ResponderExcluir
  3. Yan, concordo quanto ao IE, mas o Opera é massa. 99% das "inovações" do Firefox e do Chrome foram kibadas dele.

    ResponderExcluir
  4. Achei o texto super didático! Muito obrigada pela ajuda!

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.