Algumas aplicações da tag title no CSS

Estava eu no outro dia a mexer aqui no CSS quando reparei que estava utilizando alguns truques catitas dos quais ainda não escrevi nenhum tutorial mostrando como usar. 8)

E como este blogue anda meio lento estes dias (é mal do administrador no Verão... e no resto do ano. :-` ), vou aqui explicar como usar o CSS em duas situações onde normalmente se utiliza o javascript para dar alguns estilos a determinado elemento tendo como referência a tag title.

Para comprovar a existência da tag title nos exemplos abaixo ou em qualquer elemento, basta colocar o rato em cima do dito cujo.

Para o primeiro exemplo, que utilizei no artigo Dimensões no CSS: Exacta, Máxima, Mínima para colocar os nomes dos artistas das imagens com que decorei o artigo. Como sei que muita gente nem vai clicar no link que subtilmente inseri, aqui fica o que quero dizer (e com nova imagem qué pró artigo não aborrecer muito I-X ):

Nota: Mais uma vez, esta imagem foi retirada do site Heromorph. Neste caso, foi a imagem que a MsV me ofereceu no ultimo Natal . :)

E como é que usamos a tag title para colocar aquela legenda bem fixa na imagem acima, vocês perguntam deslumbrados...

Simples! Abaixo o código HTML e respectivo estilo CSS com algumas explicações:

/* A parte HTML */
<div class='captionimg' title='Judge Anderson by MsV'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZ-7j9a0xru1GQgk8TO7b8lAQ0uB-c8bkg7uteuGVayS2BC4iYS10jBlR7qiZ5X5s-E6FKTp42cbxWgzSSysfRpeZxVLj_h2djvvFdy4qATTIIHvdm9kbZLnD1vXrCIZcTWiR4Y-p5Fw/s550/22127.jpg" border="0" />
</div>
/* A parte em CSS com os estilos */
.captionimg { /* A class que envolve a imagem e onde colocamos o title */
padding: 0;
width: 550px; /* Largura DEVE igual à da imagem */
position: relative; /* Esta posição DEVE ficar relativa para que funcione a posição da legenda na imagem */
}
.captionimg img {
display: block;
padding: 0;
border: 0;
}
.captionimg::before {
content: attr(title); /* Aqui é onde vamos buscar o conteúdo da tag title */
position: absolute; /* Colocamos posição absoluta para se sobrepor à imagem com z-index, top, left e right. Se desejarmos que a legenda fique na parte de baixo da imagem, substituir top por bottom. */
background: #EAF200; /* Cor do fundo */
background: rgba(0, 0, 0, 0.3); /* Cor do fundo em RGBA */
color: #FFFF00; /* Cor do texto */
font-size: 15px; /* Tamanho do texto */
padding: 10px; /* Espaço entre texto e margens */
right: 0; 
top: 0;
left: 0;
text-align: center; /* Para centrar o texto */
z-index: 1;
text-shadow: 1px 1px 1px #000, -1px 1px 1px #000; /* Sombreado do texto */
}

Deu para perceber? Espero que sim mas alguma dúvida, podem deixar nos comentários. :D

Agora para o segundo exemplo de como utilizar a tag title como referência para os estilos em CSS.

Primeiro, alguns exemplos:

Um texto qualquer sem nada de especial

Exemplo de div com tag title : Um

...Texto normal sem divs ou titles...

Exemplo de div com tag title : Dois

Como podem verificar, onde existe tag title também existem estilos diferentes. Poderia ter colocado algo menos colorido mas quis chamar a atenção mesmo. =D

E não, não vou falar do estilo da div que envolve os exemplos. x-P

Abaixo, o código HTML e respectivo estilo CSS:

/* A parte HTML */
<div class="exemplo2">Um texto qualquer sem nada de especial 
 
<div title='exemplo1'>Exemplo de div com tag title : Um</div> 
 
...Texto normal sem divs ou titles... 
 
<div title='exemplo2'>Exemplo de div com tag title : Dois</div> 
</div>
/* A parte em CSS com os estilos */
[title~="exemplo1"]{ /* CSS que capta a tag title e selecciona o elemento através do conteúdo */
    background: yellow;
    display: inline-block;
    border: 4px double red;
    border-radius: 10px;
    padding: 3px 8px;
    box-shadow: 3px 5px 5px #000;
}
[title~="exemplo2"]{ /* CSS que capta a tag title e selecciona o elemento através do conteúdo */
    background: lime;
    display: inline-block;
    border: 4px ridge grey;
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

Atenção que devemos escrever o conteúdo da tag title exactamente da mesma maneira em ambos os lugares. E para que não exista conflitos entre elementos presentes na pagina, devemos utilizar um nome único em cada elemento para este efeito.

E tenham em conta que para que estes truques funcionem em alguns navegadores, necessitamos de incluir alguns estilos exclusivos a cada navegador. Claro que no caso de navegadores do tempo dos dinossauros... aí a solução só vai com javascript.

Mas... E no caso de imagens? Ou links?

O principio é o mesmo. No meu caso descobri este truque quando necessitei de corrigir imagens em falta nuns links aos quais não tinha acesso directo, e somente podia aceder ao elemento através da tag title exactamente porque nos diversos links presentes cada um deles tinha um title único para cada um deles.

Alguém adivinha a que me refiro? Qual o elemento presente neste blogue e nesta data (15 de Julho, 2014) tem imagens em falta nos respectivos links? ;D

E então? Acham que estas duas dicas podem ser de utilidade para vocês?

Até Breve. :-F

Queres ler outro artigo ao calhas?