Sempre con un occhio rivolto alle nuove specifiche mi sono deciso a scrivere questo articolo riguardante i nuovi selettori CSS3 e le loro strepitose funzionalità; parliamo del comportamento che possono gestire questi selettori su i link e il loro aspetto.

Infatti con l’introduzione nei CSS3 di nuove potenzialità si può differenziare tra collegamenti che portano all’interno del proprio sito e quelli che si riferiscono a link esterni.

Purtroppo c’è da precisare che tali soluzioni funzioneranno solamente con i browser più moderni, come Mozilla&Co., e risulteranno “normali” su altri meno recenti, vedi Internet Explorer.

La questione è estremamente semplice, infatti non si deve fare altro che utilizzare l’attributo “che inizia con” sviluppato per i nuovi CSS3. Questo si comporta come una super-class, e determina che tutti gli elementi che presentano l’attributo specificato e iniziano in un modo precedentemente dichiarato si debbano comportare nella maniera impostata.

Vediamo un esempio semplice per capirci meglio:

[code lang=”css”]
a:hover { background:yellow;}
a[href^="http:"]:hover{ background: red ; }
[/code]

 

[code lang=”html”]
<p>Un <a href="#">collegamento interno</a> ed ¬
uno verso <a href="http://www.google.it">Google</a>, quindi esterno.</p>
[/code]

In questo esempio abbiamo utilizzato l’attributo “che inizia con” per isolare i tag <a> e che hanno un attributo href che inizia con il protocollo http: , e che quindi porta all’esterno della pagina. Questo sistema basato sui CSS3 permette di creare delle regole che controllano graficamente i link in base alle pagine web a cui puntano.

A parte questo semplicissimo utilizzo si possono creare delle più interessanti applicazioni di tale attributo, come per esempio quello di abbinare ai link esterni al proprio sito delle piccole icone che aiutano l’utente a capire che si tratta di un collegamento esterno.

Un’idea di questa metodica è presente all’interno delle pagine di ricerca di Wikipedia.

[code lang=”css”]
a[href^="http:"] {
background: url("icon-external.gif") right center no-repeat;
padding-right:8px;
}
a[href^="http:"]:hover {
background: url("icon-external.gif") right center no-repeat;
}
[/code]

Il risultato di questa operazione è che, con i browser moderni, ci sarà una piccola icona alla destra del link, e questo fatto renderà immediatamente ovvio agli utenti che il collegamento in questione non risiede all’interno di quello stesso sito.

Un utilizzo interessante di queste nuove proprietà potrebbe essere quello di esaltare degli errori di markup durante la scrittura di un codice, oppure segnalare dei collegamenti con protocolli diversi dall’http, come per esempio l’ftp:

[code lang=”css”]
img[title=""]{border: 20px solid red;}
a[href^="ftp:"] {background:yellow;}
a[href^="ftp:"]:hover {background:red;}
[/code]

Il controllo sulla stampa

L’utilizzo migliore che se ne possa fare, secondo me, è quello di abbinarlo ad un controllo dei collegamenti in fase di stampa: sarà capitato a tutti di stampare delle pagine web da Internet, e, in seguito, notare che il testo riguardante un collegamento presenta le caratteristiche dovute, ma, poiché stampato, non si può più risalire al link di riferimento.

Ebbene con un utilizzo consapevole di questi nuovi CSS3 si potrà risolvere il problema, facendo comparire nel documento stampato accanto al link anche l’URL assoluto a cui punta.

Dovremo utilizzare un foglio di stile a parte, tutto dedicato alla stampa; a tal proposito non mi dilungherò troppo, l’unica cosa importante da definire è che il contenuto testuale della pagina web è racchiuso all’interno di un div#text, e con esso anche alcuni collegamenti, sia interni che esterni.

Adesso dobbiamo mettere in opera le cose che abbiamo imparato sui CSS3 e quindi utilizzeremo il seguente codice CSS nel documento web:

[code lang=”css”]
a:link, a:visited { text-decoration:none;}
a:hover { text-decoration:underline;}
a[href^="http:"] {
background: url("icon-external.gif") right center no-repeat;
padding-right:8px;
}
a[href^="http:"]:hover {
background: url("icon-external.gif") right center no-repeat;
}
#wrap {
margin:0 auto;
padding:5px;
width:60%;
background: url("bg.gif") repeat-x;
border: 1px solid #ddd;
}
#text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
}
[/code]

ed otterremo un risultato simile a questo, mentre per riuscire a far visualizzare l’URL dei nostri link in fase di stampa dobbiamo appoggiarci ad un CSS esterno, che chiameremo print.css.

Il foglio di stile per la stampa deve essere richiamato all’interno del documento XHTML che deve controllare, perciò si deve utilizzare una sintassi ben precisa, posizionata sempre prima della chiusura dell’HEAD:

[code lang=”html”]<link rel="stylesheet" type="text/css" href="print.css" media="print" />[/code]

Il foglio di stile per la stampa è un tipo di documento che riduce all’essenziale e controlla la grafica della pagina web, eliminando il superfluo ed esaltando principalmente il contenuto testuale del documento.

Fondamentalmente per ora è importante soffermarci sul controllo dei link contenuti all’interno del div#text, decidendo come debbano apparire su una pagina stampata:

[code lang=”css”]
#text a[href]:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
[/code]

Per inserire l’URL assoluto del nostro link tramite CSS, utilizziamo la proprietà content insieme al pseudo elemento :after, questo ci permetterà di far comparire in fase di stampa l’URL del link all’interno di parentesi tonde, e risulterà così l’URLcome è stato scritto dal web master.

Il risultato di questo lavoro si può vedere qui, ed è sempre in piedi il discorso che purtroppo questa tipologia di supporto ai CSS3 non è compatibile su tutti i browser, ma ci auguriamo che presto sia così.