In genere, il CSS si collega all'HTML soltanto attraverso i selettori. CSS non conosce il vero contenuto degli elementi nell'HTML. Tuttavia, esiste una funzione che permette di prelevare e utilizzare il contenuto HTML. La funzione attr() in CSS viene utilizzata per recuperare il valore di un attributo HTML e usarlo come contenuto o all'interno di una proprietà CSS.
La sintassi base della funzione attr() è la seguente: content: attr(nomeAttributo)
Generalmente, è meglio utilizzare la funzione attr() con la proprietà content, che abbiamo visto nella lezione degli pseudo-elementi. Nonostante sia possibile usare la funzione in altre proprietà CSS, come color, width, ecc., il supporto per queste proprietà è limitato nei browser e non ancora pienamente utilizzabile.
Vediamo un semplice esempio dell'utilizzo di attr():
<button data=" a tutti!">Ciao</button>
<style>
button::after {
content: attr(data);
}
</style>Nell'esempio, il testo del pulsante (grazie a attr()) diventa Ciao a tutti!. Infatti, una parte della scritta è già presente nel pulsante ("Ciao"), e una parte (" a tutti!") viene presa dall'attributo HTML data in content.
Possiamo utilizzare la funzione attr() per creare un popup che appare quando il mouse si trova sopra la scritta. Per questo scopo, usiamo :hover (che abbiamo visto nella lezione delle pseudo-classi). Il popup aggiunge delle informazioni in più rispetto a ciò che è già scritto nella pagina. Quando vai sopra al testo con il mouse, il popup passa da opacity:0 (nascosto) a opacity:1 (visibile):
<p class="tooltip" data-tooltip="Questo è un esempio!">Passa il mouse per maggiori info</p>
<style>
.tooltip {
position: relative;
display: inline-block;
font-size: 18px;
color: black;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
pointer-events: none; /* Impedisce l'interazione con il tooltip */
transition: opacity 0.3s ease;
}
.tooltip:hover::after {
opacity: 1;
}
</style>Nell'esempio, abbiamo utilizzato alcune proprietà:
position:absolute per permettere al popup di posizionarsi sopra la scritta. Ne abbiamo parlato nella lezione delle posizioni degli elementi.cursor:pointer per visualizzare il mouse in questo modo: . Vedremo tutti i diversi cursori nella lezione sui cursori CSS.transform:translate(-50%) per posizionare il popup al centro. Vedremo in dettaglio questa proprietà nella lezione sulle trasformazioni 2D.padding al popup per spaziare il testo dal bordo. Abbiamo visto questa proprietà nella lezione sul padding.border-radius per rendere i bordi curvi. Trovi altri dettagli sulla lezione di bordi.pointer-events:none impedisce che l'utente possa evidenziare il contenuto del popup, perché opacity:0 (come abbiamo visto nella lezione sulla visibilità degli elementi) permette di evidenziare il testo nascosto.transition, che vedremo nella lezione delle transizioni.