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:htmhelen.webcindario.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 ecolor na folha de estilos.
a) CSS padrão:
<style>
mark {background-color:#00ff00; color:#000000;}
</style>
mark {background-color:#00ff00; color:#000000;}
</style>
b) CSS do Blogger:
mark {background-color:#00ff00; color:#000000;}
]]></b:skin>
]]></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 tagnova?
Nos meus testes com a tag <mark> não identifiquei nenhum bug nos seguintes navegadores:
- Chrome 14
- Firefox 6.0
- Safari 5.1
Nenhum comentário:
Postar um comentário