Andrea Baccolini, web designer, siti internet

Traduzione dell’articolo “Learning To Use The :before And :after Pseudo-Elements In CSS” del blog “Smashingmagazine“

 
Se avete tenuto sotto controllo vari blog di Web design, probabilmente avete notato che gli pseudo-elementi “:before” e “:after” sono stati sempre sempre sotto attenzione nel panorama di sviluppo front-end – e per una buona ragione .
In particolare, gli esperimenti di un blogger – vale a dire, Nicolas Gallagher sviluppatore con sede a Londra – hanno dato agli pseudo-elementi un po’ di risalto in ritardo.

Nicolas Gallagher ha usato gli pseudo-elementi per creare 84 icone GUI create dalla semantica HTML.
Per completare questa esposizione (e approfittare di un trend in crescita), ho messo insieme quello che spero sia un completo run-down di pseudo-elementi.
Questo articolo è rivolto in primo luogo a quelli di voi che hanno visto alcune delle cose interessanti fatte con gli pseudo-elementi, ma vogliono sapere che cosa è questa tecnica CSS prima di provare loro stessi. Sebbene le specifiche CSS contengono altri pseudo-elementi , mi concentrerò su “:after” e “:before” .
Così, per brevità, dirò “pseudo-elementi” per riferirsi in generale a questi due in particolare.

Che cosa fa un pseudo-elemento?

Un pseudo-elemento fa esattamente ciò che la parola implica.
Esso crea un elemento e lo inserisce prima o dopo il contenuto dell’elemento che hai indicato.
La parola “pseudo” è una traslitterazione di una parola greca che significa sostanzialmente “mentire, ingannevole, falso.” Allora, chiamarli pseudo-elementi è opportuno, perché in realtà non cambiano nulla nel documento.
Piuttosto, essi inseriscono elementi come un fantasma che sono visibili per l’utente e che sono nel CSS.

Sintassi di base

:before e :after sono molto facili da codice (come lo sono la maggior parte proprietà CSS che non richiedono un sacco di prefissi).
Ecco un semplice esempio:

#example:before {
   content: "#";
}

#example:after {
   content: ".";
}

Ci sono due cose da notare in questo esempio.
In primo luogo, abbiamo preso di mira lo stesso elemento utilizzando #example:before e #example:after.
In senso stretto, sono gli pseudo-elementi nel codice.
In secondo luogo, senza la proprietà dei “content”, che è parte del modulo contenuto generato nel disciplinare, pseudo-elementi sono inutili.
Così, mentre il selettore pseudo-elemento stesso è necessario per indirizzare l’elemento, non sarà in grado di inserire qualsiasi cosa senza aggiungere la proprietà del contenuto.
In questo esempio, l’elemento con l’esempio id avrà un cancelletto posto “prima” il suo contenuto, e un periodo (o punto) placed “dopo” il suo contenuto.

ALCUNE NOTE SULLA SINTASSi

Si potrebbe lasciare la proprietà di contenuto vuoto e trattare la pseudo-elemento come una scatola di contenuti, in questo modo:

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

Tuttavia, non è possibile rimuovere la proprietà “content” del tutto.
Se così fosse, lo pseudo-elemento non funzionerebbe.
Per lo meno, la proprietà di “content” ha bisogno di virgolette vuote come valore.
Avrete notato che è possibile anche inserire nel codice degli pseudo-elementi  i doppi due punti (“::before” e “::after”), come ho discusso in precedenza.
La breve spiegazione è che non vi è alcuna differenza tra le due sintassi, è solo un modo per differenziare gli pseudo-elementi (due punti) da pseudo-classi (singoli punti) in CSS3.
Un ultimo punto per quanto riguarda la sintassi.
Tecnicamente, si potrebbe implementare uno pseudo-elemento universalmente, senza colpire qualsiasi elemento, in questo modo:

:before {
   content: "#";
}

Anche se quanto scritto  sopra è valido, è abbastanza inutile.
Il codice inserirà un simbolo cancelletto prima del contenuto di ogni elemento nel DOM.
Anche se è stato rimosso il tag “body” e tutto il suo contenuto, ci sono ancora due simboli cancelletto nella pagina: uno nell’ “html” e uno nel tag “body”, che il browser costruisce automaticamente.

Caratteristiche del “content” inserito

Come accennato, il “content” che viene inserito non è visibile nel sorgente della pagina.
E ‘visibile solo nel CSS.
Inoltre, l’elemento inserito per default è un elemento in linea (o, in termini HTML5, nella categoria semantica a livello del testo).
Così, per dare l’elemento inserito in un altezza, spaziatura, margini e così via, è solitamente necessario definirlo esplicitamente come un elemento a livello di blocco.
Questo porta anche ad una breve descrizione di come è lo stile degli pseudo-elementi.
Guardate questo grafico dal mio editor di testo:

In questo esempio, ho evidenziato gli stili che verranno applicati agli elementi inseriti prima e dopo il contenuto dell’elemento di destinazione.
Gli pseudo-elementi sono qualcosa di unico in questo caso, perché si inserisce il contenuto e gli stili nello stesso blocco di dichiarazione.
Si noti inoltre che tipiche regole di ereditarietà CSS si applicano agli elementi inseriti.
Se avessi fatto, per esempio, un carattere Helvetica, Arial, sans-serif applicato all’elemento “body” del documento, la pseudo-elemento avrebbe ereditato quel font come qualsiasi altro elemento.
Allo stesso modo, gli pseudo-elementi non ereditano gli stili che non sono naturalmente ereditati da elementi padre (come il padding e i margini).

Prima o dopo cosa?

L’impressione nel vedere gli pseudo-elementi “:before” e “:after” potrebbe essere che il “content” verrà inserito prima e dopo l’elemento preso in considerazione. Ma, come accennato in precedenza, non è questo il caso.
Il contenuto che viene inserito sarà un contenuto figlio in relazione all’elemento mirato, ma verrà posizionato “prima” o “dopo” di qualsiasi altro contenuto in quell’elemento.
Per dimostrare questo, guardare il seguente codice. In primo luogo, il codice HTML:

Other content.

Ed ecco il CSS che inserisce un pseudo-elemento:

p.box {
   width: 300px;
   border: solid 1px white;
   padding: 20px;
}

p.box:before {
   content: "#";
   border: solid 1px white;
   padding: 2px;
   margin: 0 10px 0 0;
}

Nel HTML, come si dovrebbe vedere è un paragrafo con una classe “box”, con il testo “AOther content” al suo interno (lo stesso di quello che si potrebbe vedere se si visualizzava la sorgente della pagina dal vivo).
Nel CSS, il punto viene dato un set di larghezza, con un po ‘di “padding” e un bordo visibile.
Poi abbiamo lo pseudo-elemento. In questo caso, si tratta di un simbolo cancelletto inserito “prima” del contenuto del paragrafo. Il successivo CSS dà un bordo, insieme ad alcuni padding e margini.

Ecco il risultato visualizzato nel browser:

La scatola esterna è il paragrafo. Il bordo intorno al simbolo cancelletto indica il confine del pseudo-elemento. Così, invece di essere inserita “prima” del paragrafo, lo pseudo-elemento è collocato prima del testo “Other content” nel paragrafo.

Inserimento di contenuto non testuale

Ho accennato brevemente che è possibile lasciare il valore della proprietà “content” come stringa vuota o inserire il contenuto del testo.
Lei ha fondamentalmente due opzioni aggiuntive di inclusione come il valore della proprietà “content”.
In primo luogo, è possibile includere un URL che punta a un’immagine, proprio come si farebbe se si includono una immagine di sfondo nel CSS:

p:before {
   content: url(image.jpg);
}

Si noti che le virgolette sono mancanti. Se si avvolge il riferimento URL tra virgolette, allora sarebbe diventata una stringa letterale e inserire il testo “url (immagine.jpg)” come il contenuto, invece di inserire l’immagine stessa.
Naturalmente, si potrebbe includere un URL al posto del riferimento immagine, proprio come si può con un sfondo CSS.
Hai anche la possibilità di includere una funzione in forma di “attr (X)”. Questa funzione, come nelle specifiche, “restituisce come stringa il valore dell’attributo X per il soggetto del selettore.”
Ecco un esempio:

a:after {
   content: attr(href);
}

Che funzione ha “attr()”?
Prende il valore dell’attributo specificato e lo inserisce come contenuto testo da inserire come pseudo-elemento.
Il codice di cui sopra potrebbe causare il valore “href” di ogni elemento “a” sulla pagina da inserire immediatamente dopo ogni rispettivo elemento.
Questo potrebbe essere utilizzato in un foglio di stile di stampa per includere URL completi accanto a tutti i collegamenti quando un documento viene stampato.
Si potrebbe anche usare questa funzione per prendere il valore dell’attributo “title” di un elemento, o anche valori microdati.
Naturalmente, non tutti questi esempi possono essere usati, ma a seconda della situazione, un valore di attributo specifico potrebbe essere pratico come un pseudo-elemento.
Pur essendo in grado di prendere il “title” o il testo dell’ “alt” di un’immagine e visualizzarla sulla pagina come un pseudo-elemento, questo non è possibile.
Ricordate che il pseudo-elemento deve essere un elemento figlio dell’elemento a cui viene applicata.
Le immagini, che sono vuote (o elementi vuoti), non hanno elementi figlio, per questo non avrebbe funzionato. Lo stesso vale per gli altri elementi vuoti, come “input /”.

BROWSER SUPPORTATI

Come per ogni tecnologia di front-end che si sta sviluppando, una delle prime preoccupazioni è il supporto del browser. In questo caso, non è tanto un problema.
Browser supportati per gli pseudo-elementi “:before” e “:after” sono:

• Chrome 2+,
• Firefox 3.5+ (3.0 ha un supporto parziale),
• Safari 1.3+,
• Opera 9.2+,
• IE8+ (con qualche bug),
• Praticamente tutti i browser mobili.

L’unico vero problema (nessuna sorpresa) è IE6 e IE7, che non hanno il supporto. Quindi, se il pubblico è nella nicchia di sviluppo Web (o un altro mercato che ha versioni di IE bassi), probabilmente si può andare avanti e utilizzare gli pseudo-elementi liberamente.

GLI PSEUDO ELEMENTI NON SONO CRITICI

Fortunatamente, una mancanza di pseudo-elementi non causerà enormi problemi di usabilità.
Per la maggior parte, gli pseudo-elementi sono generalmente elementi decorativi dei contenuti tale da non causare problemi nei browser supportati. Quindi, anche se il pubblico ha numeri elevati di IE, è ancora possibile utilizzarli in una certa misura.

Un paio di Promemoria

Come accennato, il contenuto pseudo-elemento non viene visualizzato nel DOM.
Questi elementi non sono elementi reali.
Come tali, essi non sono accessibili alla maggior parte dei dispositivi di assistenza.. Quindi, non utilizzare mai gli pseudo-elementi per generare contenuti fondamentali per l’usabilità o l’accessibilità delle pagine.
Un’altra cosa da tenere a mente è che gli strumenti di sviluppo, come Firebug non mostrano il contenuto generato da pseudo-elementi. Quindi, se abusati, gli pseudo-elementi possono causare mal di testa nel fare il debug di un processo perchè lo renderebbero molto più lento.
(Aggiornamento: Come detto nei commenti, è possibile utilizzare gli strumenti di sviluppo di Chrome per visualizzare gli stili associati con una pseudo-elemento, ma l’elemento non verrà visualizzato nel DOM. Inoltre, Firebug ora supporta gli pseudo-elemento dalla versione 1.8..)
Ecco spiegato tutti i concetti necessari per creare qualcosa di pratico con questa tecnica. Nel frattempo, per ulteriori letture sui CSS pseudo-elementi, assicurati di controllare alcuni degli articoli che abbiamo linkato dentro questo articolo.

Traduzione dell’articolo “Learning To Use The :before And :after Pseudo-Elements In CSS” del blog “Smashingmagazine“