Cos’è il valore attr() e come utilizzarlo

attr() è un valore appartenente alla proprietà content con il quale è possibile ottenere diverse tipologie di visualizzazione dei contenuti. Vediamo come utilizzarlo.
Cos’è il valore attr() e come utilizzarlo

La proprietà content ed il valore attr()

La proprietà content inclusa nei CSS2 e CSS2.1 si occupa di generare un contenuto creato dal browser ma che non è rappresentato da nessun tipo di marcatura e ne dal contenuto del documento.

attr() è uno dei suoi valori, il suo scopo è quello di prendere il contenuto dell’attributo di un elemento e trasformarlo in una parte della visualizzazione del documento.

Come usare attr()

Un semplice esempio è quello di inserire il valore dell’attributo href di ogni collegamento subito dopo il link.

<a href="http://www.laboratoriocss.it">Visita il nostro blog </a>
<a href="http://www.w3c.it/it/1/ufficio-italiano-w3c.html">W3C Italia </a>
a[href]:after{content:"[" attr(href) "]";

Risultato

Visita il nostro blog [http://www.laboratoriocss.it]
W3C Italia [http://www.w3c.it/it/1/ufficio-italiano-w3c.html]

Associare l’attributo data-*

Nell’esempio precedente abbiamo visto come inserire del testo dopo le voci di collegamento. Ma se io volessi personalizzare il contenuto da far uscire dopo una determinata voce? In questo caso ci può tornare utile l’attributo data-* dell’html5.

data-* offre la possibilità di incorporare attributi personalizzati all’interno di elementi html. E’ costituito da due parti: Il nome dell’attributo, che deve essere lungo almeno un carattere, non può contenere lettere maiuscole e deve essere preceduto da . Poi c’è il valore, che può contenere qualsiasi tipo di stringa. Prima di visionare il codice consultiamo la tabella per il supporto dei browser.

Codice HTML e CSS

<p data-messaggio="www.laboratoriocss.it">Visita il nostro blog: </p>
<p data-messaggio="Italia">W3C </p>
p:after{content:attr(data-messaggio);}

Risultato

Visita il nostro blog: www.laboratoriocss.it
W3C Italia

Esempio pratico

Questo è un esempio su come si potrebbe utilizzare attr() in modo concreto. Si tratta di una valida alternativa per realizzare un tooltip che compare su un elemento al passaggio del mouse.


<p class="tips" data-tooltips="www.laboratoriocss.it">Visita il nostro Blog</p>

.tips:hover:after{
    border:1px solid #fc0;
    padding:5px;
    background:#fffea1;
    content:attr(data-tooltips);
    position:absolute;
    right:20px;
    bottom:-30px;
}

Esprimi la tua opinione

Tu hai mai usato il valore attr() nei tuoi progetti? Dì la tua usando il box dei commenti o la nostra fanpage.

Fonte

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github