Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

quarta-feira, 23 de maio de 2007

Abreviação das palavras

Hoje li um post no Revolução e etc, que chamou-me a atenção, então resolvi fazer um fast-post, existe um tal elemento abbr, que a função dele é fazer uma abreviação de uma palavra, e se passar o mouse por cima da palavra aparece uma etiqueta com o significado completo da palavra, através da propriedade title, o uso dela é bem simples:

CSS
<abbr title="Cascading Style Sheets">CSS</abbr>


Só pra variar o IEca não dá suporte a esse elemento. Como de costume, existe maneiras de transpassar por esse problema, aqui vai uma delas:



Function abbrToSpan(){
var newSourceCode;
if(isIE){
newSourceCode = document.body.innerHTML;
newSourceCode = newSourceCode.replace('<ABBR','<SPAN class="abbr">');
newSourceCode = newSourceCode.replace('</ABBR>','</SPAN>');
document.body.innerHTML = newSourceCode;
}
}

window.onload = function(){
abbrToSpan();
/* other onloads */
}

isIE = (document.all) ? true:false;


Aqui vai o link do código.

O código é bem simples, substitui as tags abbr por tags span com a classe abbr, que ela por sua vez, vai estar configurada no css (estilo).

Entendido o assunto, vou estende-me um pouco mais, existem diferenças entre abreviações, há aquelas que se fala letra por letra da abreviação (CSS, HTML, PHP etc), mas há aqueles onde formam uma palavra (Modem, ALCA, ONU etc) e para esse segundo grupo utilizamos a tag acronym o qual funciona de forma semelhante:

ONU
<acronym title="Organização das Nações Unidas">ONU</acronym>


Esse é suportado pelo IEca 6.

Conclusão:

Não há problema de utilizar o acronym em tudo, a não ser que você tenha problemas com códigos "sujos".

Referência:
Maujor

Fuiii...

Marcadores: ,

3 Comentários:

Blogger Matioli disse...

Nossa cara, mais uma vez venho fazer uma critica, mas acho que é pra melhorar...

É que esse código que você colocou substitui apenas o primeiro ABBR que encontrar, pois no replace do JavaScript precisa de Expressão Regular para substituir tudo realmente, então acho que a melhor solução seria:

<script type="text/javascript">
<!--
function abbrToSpan(){
if(isIE){
document.body.innerHTML = document.body.innerHTML.replace(/<ABBR([^>]*)>([^<]*)<\/ABBR>/ig, "<span class=\"abbr\" $1>$2<\/span>");
}
}

window.onload = function(){
abbrToSpan();
/* other onloads */
}

var isIE = (ua.indexOf("msie")!=-1);
-->
</script>

Ah, e verificar se é o IE pelo document.all num dá, pq o Opera tb o aceita...

Acredito que o IE7 deva aceitar o ABBR, sendo assim, acho que seria melhor deixar esse script num comentário condicional que pega as versões menores que a 7...

Abços,
Matheus de Oliveira (matioli.matheus@hotmail.com)

12 de setembro de 2007 15:28  
Blogger ramon disse...

Olá Matioli,
Com certeza, meu caro as críticas são muito bem aceitas, vc está certo, quanto ao replace, de fato ele só vai substituir a primeira ocorrência.

Quanto a testar apenas versões anteriores ao 7 do IEca, eu não tenho certeza se a última aceita, mas não confio muito no IE, porém se você estiver certo disso, o teste cabe apenas às versões anteriores.

E por último o comentário condicional, não sou muito fã de usar dessa forma, acho que o código fica "sujo" sem necessidade, deixo o comentário condicional apenas para o css, que não tem jeito, ou é "sujar", ou não validar. entre essas escolhas fico com o "sujar".

Obrigado pelo comentário,
Volte Sempre

Fuiii...

12 de setembro de 2007 15:54  
Anonymous Anônimo disse...

o que eu estava procurando, obrigado

20 de novembro de 2009 03:33  

Postar um comentário

Assinar Postar comentários [Atom]

<< Início