Nifty Corners: miglioramenti e nuove funzionalità

Link copiato negli appunti

L'articolo sui Nifty Corners e la tecnica lì presentata, che consente, lo ricordiamo, di ottenere angoli arrotondati sugli elementi di una pagina senza usare immagini aggiuntive, ha ottenuto un riscontro eccellente e insperato: parlano da sole le citazioni e le riprese ricavabili da Google, ma anche su servizi come Technorati e del.iciou.us (ben 1345 segnalazioni). Spinto anche da questo feedback positivo, ho pensato di potenziare ulteriormente la tecnica, tentando di risolvere alcuni problemi e introducendo nuove funzionalità. Vediamole.

Le novità

Sono molte le novità aggiunte ai Nifty Corners. La prima e più importante è che è stato esteso il supporto dei browser, grazie ad un prezioso suggerimento sul CSS di Big John di PositionIsEveryThing: ora i Nifty Corners vanno anche su Internet Explorer 5.5 e, in parte, anche su IE5.

I Nifty Corners ora funzionano anche su pagine XHTML servite con il mime type application/xhtml+xml.

Un'altra novità importante è che ora è possibile scegliere quali angoli arrotondare. Gli altri miglioramenti consistono nella possibilità di avere anche la trasparenza all'interno, di avere angoli arrotondati con una leggera forma di antialiasing e di avere angoli arrotondati con bordi.

Guarderemo questi miglioramenti da vicino attraverso i dieci esempi che ho preparato. Ma prima, diamo uno sguardo al principio di funzionamento e a come usare la libreria Javascript per avere gli angoli arrotondati senza immagini.

Come funzionano i Nifty Corners

Come per la precedente versione, i Nifty Corners sono composti da quattro parti essenziali:

Un file CSS per gli angoli arrotondati a schermo
Un file CSS per nascondere gli angoli arrotondati a stampa
Un file Javascript che contiene la libreria per gli angoli arrotondati
Le chiamate Javascript per aggiungere gli angoli arrotondati su qualsiasi elemento di pagina.

Per la consultazione on-line, ho predisposto tre pagine HTML che riportano il codice CSS per lo schermo di niftyCorners.css, quello per la stampa di niftyPrint.css e il codice Javascript di nifty.js. Ovviamente sono anche disponibili per il download insieme agli esempi che vedremo. Questi tre file non necessitano di modifiche, e per attivare gli angoli arrotondati in qualsiasi pagina basterà linkarli nella sezione head con le seguenti righe:

In quanto alla quarta parte: questa è quella che vi consentirà di ottenere gli angoli arrotondati senza immagini su elementi di pagina HTML. Vediamo subito la funzione principale.

La funzione Rounded

Vediamo subito il primo esempio. Se osservate il codice, noterete che ho lasciato incorporato una parte del Javascript:

La funzione NiftyCheck effettua un test sul supporto del DOM. Se questo è superato, la funzione Rounded viene richiamata. Questa ammette ora cinque parametri:

Un selettore CSS che indica su quali elementi applicare la funzione
Una stringa che indica quali angoli arrotondare
Il colore esterno degli angoli arrotondati
Il colore interno degli angoli arrotondati
Un quinto parametro facoltativo che conterrà le varie opzioni

Vediamoli nel dettaglio.

Primo parametro: selettore CSS

Lo script è in grado di ricevere un selettore CSS per individuare gli elementi da arrotondare. Sono parametri ammessi:

Il selettore di tag, per esempio "p" oppure "blockquote" o "h2"
Il selettore di id, a cui andrà anteposto il tag: per esempio "div#content" oppure "p#news" o "li#home"
Il selettore di classe, a cui andrà anteposto il tag: sono parametri validi per esempio "div.news" o "h2.hightlight"
Il selettore discendente con qualche limitazione: questo dovrà essere composto da un selettore di id più un selettore di tag: esempi validi sono "div#news div" oppure "ul#menu li".

Secondo parametro: quali angoli arrotondare

Rivediamo la chiamata alla funzione Rounded dell'esempio:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Attraverso il secondo parametro è possibile scegliere quali angoli arrotondare, usando alcune parole chiave. Sono parole chiave ammesse:

all arrotonderà i quattro angoli
top per i due angoli superiori
bottom per i due inferiori
tl angolo superiore sinistro
tr angolo superiore destro
bl angolo inferiore sinistro
br angolo inferiore destro

È inoltre possibile combinare le parole chiave. Per esempio se come secondo parametro indichiamo "tr bl" arrotonderemo l'angolo superiore sinistro e l'inferiore destro, mentre se indichiamo "tl bottom" otterremo l'angolo superiore sinistro e i due inferiori arrotondati.

Terzo e quarto parametro: specificare i colori

Rivediamo la chiamata alla funzione Rounded dell'esempio:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Attraverso il terzo e il quarto parametro è possibile specificare rispettivamente il colore esterno e interno degli angoli arrotondati: questi andranno espressi in esadecimale a tre o sei cifre con il cancelletto davanti. Per entrambi i parametri è ora possibile usare anche il valore "transparent" per avere quindi angoli arrotondati trasparenti all'esterno oppure all'interno (ovviamente, non entrambi insieme). La trasparenza interna può risultare molto utile quando vogliamo per esempio usare un background o evitare di specificare il colore interno per diversi elementi.

Il quinto parametro: le opzioni

A questo punto non ci resta che parlare del quinto parametro, che ci consente di ottenere molti effetti. Se riguardiamo la chiamata dell'esempio:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Notiamo che come quinto parametro c'è "smooth" che ci consente di ottenere angoli arrotondati morbidi, ovvero con una leggera forma di antialiasing. Ecco le possibili parole chiave che si possono specificare come quinto parametro:

smooth ci consente di avere angoli arrotondati con antialiasing. In questo caso sarà necessario specificare sia il colore interno che quello esterno agli angoli arrotondati, così da poter fare calcolare allo script il colore intermedio;
border seguito da un colore esadecimale a tre o a sei cifre con il cancelletto, ci consentirà di ottenere gli angoli arrotondati con bordi.I bordi non funzionano in combinazione con la trasparenza all'interno, ma solo all'esterno;
small renderà gli angoli arrotondati piccoli. Questa opzione è utilizzabile in combinazione con tutti i tipi di angoli arrotondati.

Il trattamento del padding verticale

Una caratteristica molto importante ma che è "dietro le quinte" è che lo script rimuoverà il padding verticale impostto via CSS dagli elementi da arrotondare. Questa caratteristica non influisce su come verranno resi, ma si rivela utile per tre motivi: è più facile adattare i Nifty Corners a pagine esistenti, c'è una migliore resa se Javascript è disabilitato ma i CSS abilitati, e risolve un piccolo "saltino" degli elementi da arrotondare al caricamento della pagina.

Gli esempi

Procederemo ora a vedere gli esempi che ho preparato. Per brevità riporterò solo la parte relativa alle chiamate Javascript alla funzione Rounded, va però considerato che queste andranno immerse all'interno del codice standard, ovvero:

window.onload=function(){
if(!NiftyCheck())
return;
/* qui vanno tutte le chiamate per gli angoli arrotondati */
}

Esempio 1: un semplice div arrotondato con angoli morbidi

Il primo esempio è già stato presentato velocemente. Attraverso l'opzione smooth è possibile ottenere angoli arrotondati morbidi. Vediamo la chiamata:

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

Esempio 2: due div

Nel secondo esempio ho arrotondato due div: uno dei due presenta solo gli angoli arrotondati sulla destra. Vediamo la chiamata Javascript:

Rounded("div#content","all","#FFF","#9DD4FF","smooth");
Rounded("div#nav","tr br","#FFF","#FFC79D","smooth");

Esempio 3: trasparenza interna

Nel terzo esempio ho arrotondato gli angoli di un div lasciando però la trasparenza all'interno, così da mostrare lo sfondo anche sugli angoli arrotondati.Vediamo la chiamata:

Rounded("div#box","all","#6385D8","transparent");

Esempio 4: con o senza

Il quarto esempio mostra come vengono resi gli angoli arrotondati con i bordi: nella pagina ci sono due div che condividono la stessa classe. Solo uno ha un id (anche se nessuno stile CSS aggiuntivo), e su questo vengono applicati gli angoli arrotondati con bordi.

Da notare che i bordi orizzontali attorno al titolo e il paragrafo vengono aggiunti dallo script stesso, che provvede più in generale ad aggiungere i bordi orizzontali a tutti i discendenti primi dell'elemento da arrotondare con bordi. In alcuni casi questo potrebbe risultare un limite, e si potrebbero riscontrare problemi di resa. La soluzione più pratica in tali casi è usare un contenitore all'interno dell'elemento da arrotondare che contenga tutto il suo contenuto, oppure evitare l'uso dei bordi. Vediamo le chiamate dell'esempio:

Rounded("div#nifty","top","transparent","#FFC5FF","border #C0C0C0");
Rounded("div#nifty","bottom","transparent","#F0F0E7","small border #C0C0C0");

Da notare che gli angoli inferiori sono dichiarati con l'opzione small.

Esempio 5: esplosione di colori

Il quinto esempio mostra uno degli indubbi vantaggi della trasparenza interna: con una sola chiamata è infatti possibile arrotondare due angoli opposti di quattro elementi di colore diverso, solo specificando il colore esterno, ovvero in questo caso il colore di sfondo della pagina. Vediamo la chiamata:

Rounded("div#news div","tr bl","#FFF","transparent");

Esempio 6: div elastici

Nel sesto esempio ho dimensionato tre div in em, e i font in percentuale così da ottenere un effetto elastico: cambiando la dimensione del testo del browser, si varia anche la larghezza dei div. In questo caso, per facilitare l'uso del gradiente sono stati usati gli angoli trasparenti all'interno. Gli elementi h3 hanno gli angoli arrotondati piccoli con bordi: anche in caso in cui l'elemento contiene solo del testo senza tag è possibile ottenere gli angoli arrotondati con bordi. Vediamo le chiamate:

Rounded("h3","all","#FFF","#efeadc","small border #999");
Rounded("div#news div","bottom","#FFF","transparent");

Nel settimo esempio ho realizzato un semplice menu a tab, che avevamo già visto nello scorso appuntamento. Questa volta, in più, ci sono i bordi oltre che la trasparenza esterna. Vediamo la chiamata:

Rounded("div#nav li","top","transparent","#BEFF9A","border #508F0F");

l'esempio otto mostra come con poche modifiche al CSS e al Javascript dell'esempio precedente si può ottenere un menu un po' particolare e decisamente accattivante. Vediamo la chiamata:

Rounded("div#nav li","tr bl","transparent","#9ABEFF","border #3562B1");

Esempio 9: una galleria di immagini

Anche Il nono esempio è stato già in parte trattato nello scorso appuntamento. In questo caso ci sono due significativi miglioramenti. Il primo è che gli angoli arrotondati hanno l'antialising, mentre il secondo e più importante è l'uso nel CSS di un padding verticale di 5px che lasceremo rimuovere dallo script. Questa opzione ci consente di eliminare il saltino che si produce dopo il caricamento della pagina e quando lo script entra in azione. Vediamo la chiamata:

Rounded("div#minipics li","all","#C7C7F2","#FFF","smooth");

Da notare che per utilizzare al meglio questa caratteristica bisognerà impostare via CSS un padding verticale di 5 pixel se vorremo utilizzare i Nifty Corners a dimensione normale, 2 pixels se vogliamo ottenere gli angoli arrotondati piccoli.

Esempio finale

Arriviamo così all'esempio finale, un layout interamente basato sui Nifty Corners. In questo caso che ho tolto il Javascript (e il CSS) incorporato nella pagina per lasciare nella sezione head solo i link a file esterni. Ecco ora l'intera sezione:

<script type="text/javascript" src="layout.js"></script>

Rispetto agli altri esempi la presenza di un secondo file Javascript esterno, che ho indicato qui sopra in grassetto. Il suo contenuto è semplicemente quello che finora abbiamo visto incorporato nella pagina, ovvero le chiamate per ottenere i Nifty Corners sugli elementi che vogliamo arrotondare. È infatti una buona pratica in situazioni reali tenere in file esterni CSS e Javascript. Vediamo il contenuto di layout.js:

window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth");
Rounded("div#header h1","bottom","#84B7FF","#657DA6","small smooth");
Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth");
Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth");
Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth");
Rounded("form","all","#D6DEEC","#B4CEF7","smooth");
Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F");
Rounded("div#relax","all","#FFF","transparent");
Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff");
}

Tra le cose da notare, il modo in cui si sono ottenuti bordi arrotondati spessi nell'header usando la funzione Rounded sull'header e sull'h1 al suo interno. Ho lasciato i colori come utlime regole CSS, così sarà facile modificarli insieme ai colori del file Javascript. Di questa pagina ho preparato anche la versione senza Javascript, che è la base di partenza dell'esempio finale, così da mostrare come la pagina senza i Nifty Corners renda comunque bene.

Conclusioni

La versione qui presentata è decisamente più versatile e robusta rispetto a quella presentata nello scorso appuntamento. A questo punto, credo che sia una versione definitiva. Buon divertimento!

Indice lezioni