Nifty Corners Cube: angoli arrotondati mai così facili

Link copiato negli appunti

A distanza di più di un'anno dalla prima versione dei Nifty Corners Angoli arrotondati senza immagini, e dopo la Nifty Corners: miglioramenti e nuove funzionalità, eccoci arrivati alla terza versione. Dopo una breve introduzione alle novità introdotte rispetto alle precedenti e i riferimenti per l'uso dello script, presenteremo diversi esempi in cui non si sono usate immagini per gli angoli arrotondati, ma solo Javascript e CSS. Cominciamo subito.

Le novità

Sono diverse le novità introdotte nei Nifty Corners Cube, che in generale sono stati pensati per essere più versatili e semplici da usare. Basti pensare che dei quattro parametri nella prima versione e cinque nella seconda, nella terza versione si usano solo due parametri di cui uno opzionale.

Vediamo brevemente le novità:

non è più necessario specificare i colori, che vengono ora
rilevati automaticamente;
i Nifty Corners sono ora più semplici da integrare nel processo di design,
grazie al fatto che il padding (sia verticale che orizzontale) viene
preservato. Unica limitazione è che il padding deve essere specificato in
pixel;
è possibile usarli più facilmente con altri script;
sono disponibili ora tre dimensioni: piccoli (2px), medi (5px) e
grandi (10px);
è stato migliorato/esteso il supporto per i selettori CSS usati come
parametro;
sono state introdotte le Nifty Columns, ovvero le false colonne senza
sfondo;
basta ora una sola riga nella sezione head
per linkare l'intera libreria: il CSS per i Nifty Corners viene infatti caricato
tramite lo script stesso;
sono ora rilasciati sotto licenza.

Insieme a molte novità, che scopriremo attraverso diversi esempi, due inversioni di tendenza rispetto alla precedente versione. Il supporto per Internet Explorer 5.0 è stato definitivamente abbandonato, ma la compatibilità con gli altri browser stata mantenuta: tutti gli esempi dell'articolo sono stati testati con successo su IE 5.5, IE6, IE7 beta 2, Opera 8.5, Firefox 1.5 e Safari 2.0. Gli utenti IE5.0, come quelli con Javascript disabilitato, vedranno comunque la pagina senza angoli arrotondati.

Ho dovuto abbandonare i Nifty Corners con bordi: si sono rivelati un po' problematici nella versione 2, e non sono riuscito ad integrarli in questa nuova versione per problemi di resa su IE.

Nifty Corners 3: introduzione

Siamo così pronti a presentare il primo esempio: si tratta di un div con angoli arrotondati grazie ai Nifty Corners.
Per chi non avesse letto gli articoli precedenti, i Nifty Corners sono una soluzione per ottenere angoli arrotondati senza immagini, ma solo con CSS e Javascript.
In particolare, questa terza versione si compone di tre parti essenziali:

Un file Javascript
Un file CSS
Le chiamate Javascript specifiche della pagina

In quanto ai primi due punti, i file esterni non necessitano di modifiche e
andranno copiati nella stessa cartella della pagina HTML. C'è da evidenziare
che basterà linkare il file Javascript che si occuperà, se i Nifty Corners possono girare, di aggiungere automaticamente il CSS esterno necessario. Se guardate il codice HTML dell'esempio,
l'unica referenza a file esterni è infatti la seguente riga:

Per quanto riguarda il terzo punto, ecco il codice HTML della pagina, con Javascript incorporato, per ottenere un div con angoli arrotondati:

In grassetto ho riportato la parte variabile dello script, che sarà la parte
che andrà modificata secondo le esigenze e costituisce la chiamata alla funzione
Nifty. Questa riceve due parametri che sono il vero punto di forza dei Nifty Corners. Vediamoli da vicino.

I due parametri

Introducendo il primo
esempio abbiamo visto la chiamata alla funzione Nifty:

Nifty("div#box","big");

Questa riceve due parametri nella forma:

Nifty("primo parametro","secondo parametro");

Entrambi devono essere indicati tra virgolette e separati da una virgola. Il
primo parametro individua il selettore CSS che individuerà su quali elementi verranno applicati i Nifty Corners; il secondo parametro, facoltativo, definisce le opzioni.

Per quanto riguarda il primo parametro, come selettori CSS sono accettati
selettori di tag, classe e id, selettore discendente (con qualche limitazione)
e il raggruppamento. La seguente tabella mostra alcuni esempi:

Selettore	Esempio
selettore di tag	"p" "h2"
selettore di id	"div#header" "h2#about"
selettore di classe	"div.news" "span.date" "p.comment"
selettore discendente (con id)	"div#content h2" "div#menu a"
selettore discendente (con classe)	"ul.news li" "div.entry h4"
raggruppamento (un qualsiasi numero e combinazione dei selettori precenti)	"h2,h3" "div#header,div#content,div#footer" "ul#menu li,div.entry li"

In particolare il selettore discendente accetta solo due tipologie, ovvero
quelle ottenute combinando id con tag oppure classi con tag.

Ora vediamo le opzioni, che vanno specificate attraverso le virgolette,
possono essere in qualsiasi ordine e numero e si basano su delle keyword:

opzione	significato
tl	angolo in alto a sinistra
tr	angolo in alto a destra
bl	angolo in basso a sinistra
br	angolo in basso a destra
top	angoli superiori
bottom	angoli inferiori
left	angoli sinistri
right	angoli destri
all (parametro di default)	tutti e quattro gli angoli
none	nessun angolo (da usare con le Nifty columns)
small	angoli piccoli (2px)
normal (parametro di default)	angoli normali (5px)
big	angoli grandi (10px)
transparent	angoli trasparenti all'interno. Da notare che questa opzione viene applicata di default se non è specificato il colore dell'elemento da arrotondare, oppure è specificato solo un'immagine di background
fixed-height	da applicare ad elementi con altezza fissa impostata via CSS
same-height	Parametro per le Nifty colums: tutti gli elementi indivuati dal selettore CSS indicato con il primo parametro verranno resi dallo script della stessa altezza. L'effetto si ottiene anche se non si vogliono arrotondare gli angoli, ovvero in combinazione con la keyword none.

Ora non ci resta che passare agli esempi.

Esempio 1: un singolo div

Il primo esempio è
stato presentato in apertura: grazie ai Nifty Corners viene arrotondato un div
con angoli grandi. Vediamo l'aggiunta necessaria nell'HTML:

Dopo aver linkato lo script esterno, viene definito un blocco script
incorporato nella pagina per invocare i Nifty Corners sul div id="box". Da evidenziare che i colori di sfondo della pagina e del con id="box" vengono rilevati nel CSS dai Nifty Corner, che procederanno a rendere gli angoli arrotondati grandi (grazie all'opzione "big") con un leggero antialias. Da notare inoltre che il padding del div, in questo caso di 20px sui due lati verticali, viene mantenuto anche con i Nifty Corners.

La parte in grassetto indica la chiamata alla funzione Nifty:
dal prossimo esempio per brevità indicherò solo la chiamata a questa funzione,
ma c'è da tener presente che andrà linkato il Javascript esterno e la chiamata
andrà immersa in un blocco script incorporato
come sopra oppure,ancor meglio, in un Javascript esterno.

Esempio 2: due div

Nel secondo esempio
i Nifty Corners sono stati usati per arrotondare due div. L' unica chiamata
Javascript necessaria è la seguente:

Nifty("div#content,div#nav");

In questo caso è stato usato solo il primo parametro, ovvero il selettore CSS, che nel caso dell'esempio racchiude tra virgolette due selettori di id separati da una virgola, grazie al raggruppamento
proprio come avviene per i CSS. Il secondo parametro non è stato specificato: per default i Nifty Corners verranno resi di dimensione media (5px) e con antialias con lo sfondo degli elementi arrotondati.

Esempio 3: trasparenza

Nel terzo esempio su un div con sfondo un gradiente viene mantenuta la trasparenza interna grazie all'opzione transparent. Ecco la chiamata a funzione:

Nifty("div#box","transparent");

Da notare come la trasparenza sul gradiente superiore venga mantenuta. L'opzione di trasparenza
compatibile con tutte le altre, e c'è da evidenziare il fatto che viene attivata di default nel caso in cui
l'elemento su cui applicare non ha colore di sfondo impostato.

Esempio 4: Nifty Tabs

Il quarto esempio
una delle richieste più frequenti in merito agli angoli arrotondati: un menu
a tab senza immagini. La chiamata Javascript è la seguente:

Nifty("ul#nav a","small transparent top");

I link del menu vengono arrotondati sul lato superiore, con angoli piccoli e trasparenti all'interno.
La trasparenza all'interno è infatti essenziale per il rollover, ma se non fosse necessario si potrebbero
avere voci di menu di colori diversi anche con l'antialias: ecco una variante
in cui l'unica chiamata necessaria consente colori differenti e antialias:

Nifty("ul#nav a","top");

Esempio 5: bottoni per blog

Continuamo con i menu: il quinto esempio mostra una mini-navigazione per blog con i Nifty Corners. La sola chiamata necessaria è la seguente:

Nifty("ul.postnav a","transparent");

In questo caso è stata usata una classe per il menu, così da poter avere nell'HTML diversi menu nella stessa pagina. Per quanto riguarda i Nifty Corners quindi usato il selettore discendente in combinazione con il selettore di classe.

Esempio 6: boxes

Nel sesto esempio i Nifty Corners vengono usati per arrotondare sei div con angoli grandi. Ciascuno dei div ha colore diverso, usa padding sia orizzontale che verticale e ha
altezza fissa. Il sesto div (ovvero quello nell'angolo in basso a destra) ha il bianco come colore di sfondo, proprio come lo sfondo della pagina, con conseguente effetto che non si percepiscono gli angoli arrotondati,
anche se in realtà ci sono. I Nifty Corners vengono applicati quindi sui sei div negli angoli alto-sx e inferiori. Importantissimo è in questo caso l'uso dell'opzione fixed-height che fa si che i Nifty Corners preservino l'altezza dei div oltre che il padding. Ecco l'unica chiamata usata:

Nifty("div#about li","tl bottom big fixed-height");

Esempio 7: Nifty columns

Con il settimo esempio
arriviamo a una delle novità più importanti introdotte nella nuova versione
dei Nifty Corners: le Nifty columns, ovvero le false colonne
senza sfondo. Nell'esempio non sono state usate immagini di sfondo: né
per gli angoli arrotondati né per dare l'impressione che i due div hanno
la stessa altezza. Tutto ciò grazie ad un'unica chiamata Javascript:

Nifty("div#content,div#nav","same-height");

L'opzione same-height fa si che lo script si occupi di rilevare tutti gli elementi individuati dal primo parametro - il selettore CSS - e attribuir loro la stessa altezza, ovvero l'altezza maggiore tra quelle rilevate. Risulta così un effetto simile alle faux columns ma senza la necessità di immagini background. Nel caso dell'esempio le Nifty columns sono state applicate ai due div della pagina, con id="content" e id="nav".

Esempi 8, 9 e 10: ancora Nifty Corners

Gli esempi otto, nove e dieci
sono stati costruiti sullo stesso markup di base, che è il seguente:

<ul id="split">
<li id="one">
  <h3>Titolo</h3>
  <div>Contenuto</div>
</li>
<li id="two">
  <h3>Titolo</h3>
  <div>Contenuto</div></li>
<li id="three">
  <h3>Titolo</h3>
  <div>Contenuto</div>
</li>
</ul>

Ho voluto mostrare in questo caso che solo intervenendo sul CSS e le chiamate ai Nifty Corners, usando le Nifty columns sia possibile ottenere diversi risultati. Nel caso dell'esempio 8
si sono usati i Nifty Corners solo sui list-item:

Nifty("ul#split li","same-height");

Per quanto riguarda l'esempio 9, sono due le chiamate usate: una per la parte superiore dei titoli e una per la parte inferiore dei contenuti, su cui si sono applicate le Nifty columns:

Nifty("ul#split h3","top");
Nifty("ul#split div","bottom same-height");

Nel caso dell'esempio 10 le Nifty columns sono state applicate in maniera un po' particolare: se la parte superiore dei list-item (ovvero i titoli) si presentano con angoli arrotondati,
la parte inferiore (i div) sono della stessa altezza e presentano dei bordi impostati mediante il CSS. Per usare le Nifty columns senza che vengano creati angoli arrotondati basterà usare la parola chiave none insieme
a same-height. Ecco il codice:

Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");

Esempi 11 e 12: Nifty Corners Layout

Eccoci quindi ai due esempi più importanti dell'articolo, ovvero i layout. Negli esempi undici e dodici i Nifty Corners
si sono usati estensivamente per layout ed elementi di pagina, senza riccorrere ad immagini di background.

Nel caso dell'esempio
11, come per i precedenti esempi, per comodità di consultazione ho pensato
di lasciare il CSS e il Javascript per le chiamate ai Nifty Corners incorporati
nella pagina. La sezione di Javascript è la seguente:

window.onload=function(){
Nifty("div#container");
Nifty("div#content,div#nav","same-height small");
Nifty("div#header,div#footer","small");
}

Al caricamento della pagina, i Nifty Corners vengono chiamati sul container,
piccoli e con le Nifty columns per contenuti e colonna di navigazione; piccoli
sul footer. L'effetto del bordino bianco attorno alle sezioni principali di
pagina è stato ottenuto grazie al padding sul container.

L'esempio 12 rappresenta
una pagina con layout a due colonne, menu di navigazione a tab e alcuni elementi
(tipo date e commenti) comuni soprattutto nei blog. In questo caso CSS della
pagina e Javascript per i Nifty Corners si sono tenuti in file esterni, ecco
la parte della sezione head della pagina che li riguarda:

Oltre al CSS vengono linkati due file Javascript, uno è la libreria per i Nifty Corners mentre il secondo contiene le chiamate specifiche per la pagina. Il contenuto di quest'ultima è il seguente:

window.onload=function(){
Nifty("div#menu a","small transparent top");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content,div#side","same-height");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","bottom");
}

Tra le chiamate, l'opzione same-height è stata usata per i tre box dell'introduzione
e per ottenere contenuti e navigazione della stessa altezza. In questo secondo caso gli angoli arrotondati intorno ai contenuti non sono visibili in quanto non è specificato il colore di sfondo di questo elemento.

Esempio 13: NiftyLoad

Uno delle questioni più frequenti, soprattutto per chi non è pratico di javascript, è come far coesistere i Nifty Corners con altri script, dato che è possibile assegnare una sola funzione a window.onload. Ho così pensato a una soluzione che si risolva questo problema e che sia pratica e facile da adottare. Nell'esempio 13
viene mostrato un breve messaggio attraverso un alert e in seguito vengono applicati i Nifty Corners al div della pagina. Basta sostituire il tradizionale window.onload
con NiftyLoad. La sezione Javascript, incorporata nel caso dell'esempio, la seguente:

NiftyLoad=function(){
Nifty("div#box","big");
}

Ovviamente il codice appena visto potrà anche essere incluso in un secondo script esterno, come nel caso dell'esempio precedente. Cosa essenziale è che la librieria per i Nifty Corners e le loro chiamate specifiche siano gli ultimi due blocchi script
della sezione head della pagina per poter mantenere l'attivazione di eventuali altri script della pagina. La funzione NiftyLoad può essere usata al posto di window.onload anche nel caso in cui i Nifty Corners siano l'unico script della pagina, come per tutti gli altri esempi visti nell'articolo.

Note finali e risoluzione dei problemi

Nel realizzare i Nifty Corners Cube ho cercato di mantenere lo script il più
semplice e versatile possibile, e spero di aver guidato i lettori,
soprattutto i meno pratici di javascript, al loro uso attraverso i molti esempi.

Esempi che sono serviti anche per verificare compatibilità cross-browser e
robustezza dello script nelle varie situazioni. Questo non significa che non
si possano riscontrare problemi di resa.

Ho così pensato, in chiusura di articolo, di racchiudere alcuni consigli per
la risoluzione dei problemi con i Nifty Corners. Anche se non sono necessarie
conoscenze di Javascript, una solida base di HTML e CSS è consigliata. Buone
pratica da adottare sempre, indipendentemente dai Nifty Corners, sono la validazione dell'HTML e del CSS e il test di resa sui diversi browser.

Se si dovessero riscontrare problemi, è consigliabile togliere temporaneamente i Nifty Corners e ripetere i test. Un approccio generale di sviluppo, che ho adottato personalmente nel preparare gli esempi degli articoli, è quello di aggiungere i Nifty Corners solo dopo aver ultimato di scrivere HTML e CSS della pagina.

Due caratteristiche importanti introdotte in questa versione dovrebbero semplificare molto l'uso dei Nifty Corners. I colori vengono ora rilevati automaticamente dallo script, agevolando di molto la modifica dei colori del CSS di pagina senza dover agire sulle chiamate per gli angoli arrotondati. L'uso del padding sia verticale che orizzontale è ora possibile. Soprattutto per il padding verticale l'unita di misura da usare sono i pixel, ed è consigliato avere valori almeno pari alla altezza degli angoli arrotondati (2px per i piccoli, 5px per gli angoli normali e 10px per quelli grandi).

Gli esempi dovrebbero costitutire un buon punto di partenza per il lettore. Una cosa importante da tener presente è che in una pagina un dato ID, secondo le specifiche HTML, dovrebbe essere usato una sola volta. In caso più di più elementi simili, andrebbero usati il selettore discendente o il selettore di classe.

Conclusioni, licenza e download

Si conclude qui l'articolo sulla terza versione dei Nifty Corners, in cui
abbiamo visto diversi esempi del loro uso. Il mio consiglio è di riferirsi
a questo articolo come una mini-guida.

I Nifty Corners Cube sono rilasciati ora sotto licenza GPL, e sono stati
pubblicati in italiano e in inglese il 22 di Marzo 2006. Codice,
esempi e licenza d'uso sono disponibili per il download. Buon divertimento!

Indice lezioni