L’articolo (in lingua inglese) proviene da 456 Berea Street ed è stato tradotto e riprodotto per gentile concessione dell’autore.

Hai mai desiderato realizzare un box di grandi dimensioni con angoli arrotondati o squadrati (la forma poi la scegli tu), con bordi su misura e un ombra trasparente? E hai pensato di volerlo fare senza ingombrare il markup con una quantità enorme di elementi div? Ora puoi farlo.

L’estate scorsa ho scritto qualcosa su una tecnica per creare un box flessibile con angoli e bordi su misura. Benché questo sistema funzioni, necessita comunque di alcuni markup in più, e ha un paio di altre limitazioni. Questa nuova tecnica non usa nessun markup extra, e permette l’uso di immagini trasparenti per i bordi e per gli angoli, e non ha restrizioni sul colore del background e sul margine degli elementi dentro il contenitore principale. Se sei curioso di vedere il risultato già finito, vai direttamente all’ esempio finale.

Obiettivo principale: meno markup, maggiore trasparenza

Una delle mie speranze e predizione per il 2005 era l’incremento dell’utilizzo di JavaScript. C’è stato in effetti un significativo aumento quest’anno, e spero che tu sia d’accordo con me nel considerare questo articolo incluso in questa categoria.

Il markup extra richiesto per sistemare gli angoli e i bordi al loro posto è rimosso dal codice HTML e inserito invece nel JavaScript. Disattiva il JavaScript e gli elementi su misura scompariranno, lasciando un box più semplice ed elementare dietro. Disattiva il CSS e arrivi ad un documento senza stile. Se disattivi entrambi otterrai un documento senza stile. Ti sei ora fatto un idea. Il contenuto del box deve essere sempre accessibile.

Per permettere l’uso di immagini trasparenti per gli angoli e i bordi, il CSS deve essere modificato un po’; è più facile capire quando puoi vedere tutti i markup, quindi dai un occhiata all’esempio con solo CSS per l’HTML e il CSS, che includono il markup inserito dallo script nell’esempio finale.

Poiché le proprietà del background di un elemento determinano anche il colore della superficie o l’immagine del padding, devo usare i margini e le relative posizioni anziché il padding che avevo inizialmente usato per posizionare le immagini. Se avessi usato il padding originale, la trasparenza delle immagini potrebbe causare alcuni overlapping indesiderati, come è dimostrato nell’esempio CSS+Padding.

Come le vecchie versioni, questo box verrà allargato per includere il contenuto verticalmente, supporterà ogni misura del testo, e può inoltre diventare molto spazioso prima che i bordi orizzontali comincino ad allargarsi. Quanto si allargherà orizzontalmente dipenderà dalla larghezza dell’immagine di sfondo che contiene gli angoli.

Il fattore IE

C’è ovviamente un avvertimento per l’uso di immagini PNG con alfa trasparenza. E’ ben risaputo che la versione corrente di Internet Explorer per Windows non lo supporta. Poiché IE7, a causa della ritardataria uscita della versione beta, lo farà (di supportare), penso che sia ragionevole cominciare a guardare i modi in cui la trasparenza può essere usata. Ovviamente avrai bisogno di considerare le vecchie versioni di IE/Win per molto tempo, ma ci sono comunque dei modi per inviare diverse immagini a questo browser.

In questi esempi ho usato commenti per inviare immagini GIF al browser Internet Explorer (versione inferiore alla 7), quindi quando IE7 progredirà con le versioni, userà le immagini PNG, proprio come i browser moderni. Fino ad allora, gli utenti di IE useranno qualcosa di simile all’esempio CSS: versione per IE.

Usare l’immagine

Sono utilizzate due immagini. La prima box.png contiene un box completo e viene usato per gli angoli e per i bordi orizzontali. Per rispetto di questo demo ho fatto il box di 1600 pixel. Potresti riuscire a cavartela con un immagine più piccola, più ristretta, ma probabilmente non risparmierai molti byte in più. L’altra immagine borders.png contiene i bordi verticali.

Perché usare una singola, grande immagine per gli angoli, anziché tante piccole immagini? Ci sono parecchie ragioni:

  • Dividere l’immagine in un insieme di immagini più piccole (8 in questo caso, una per ogni angolo più i bordi
    superiore e inferiore) può causare davvero l’aumento della grandezza totale del file, ciò dipende
    dall’aspetto dei bordi e degli angoli;
  • Puoi diminuire il numero di HTTP richiesti da inviare al server;
  • Un altro vantaggio è la convenienza. Quando cambi l’aspetto dei bordi e degli angoli, sostituire due files è
    più veloce che sostituirne otto!

Ovviamente puoi continuare ad usare l’extra markup se preferisci. Funziona e non causerà nessun problema, eccetto che per IE/Mac, dove i bordi verticali non sono visualizzati. Se riesci a risolvere questo problema, scrivimi. Non sto impiegando molto tempo per questo, in quanto IE/Mac è un progetto morto e non è neanche più incluso nell’installazione del Mac OS X. Poi, usando il JavaScript descritto di seguito andrà bene anche per IE/Mac.

Verso l’esterno con i div, dentro con il JS

Ho scritto un po’ su JavaScript per agevolarmi nel ripulire le cose.

Lo script inserisce l’elemento div extra e cambia il nome della classe del contenitore principale. Cambiando il nome della classe è pronto per abilitare nuovi stili sulla base della disponibilità e funzionalità del JavaScript.

Non sono un esperto di JavaScript, quindi lavorando sullo script ho usato un po’ di codici presi da altre parti invece di sprecare tre settimane a provare di farne funzionare altri inutilmente. La funzione createElement che fa funzionare lo script sia con HTML (text/html) che con XHTML (text/html oppure application/xhtml+xml) è stato trovato nell’articolo di Simon Willison Javascript, il DOM e application/xhtml. Anche la tecnica per includere i contenuti di un elemento in un altro elemento è stata, accidentalmente, trovata in un articolo di Simon: Angoli arrotondati con CSS e Javascript. Quindi grazie Simon. Infine, se riconosci lo script AddEvent è perché è uno dei tanti script ampiamente diffusi di Scott Andrew LePera come generatori di eventi crossbrowser.

Ho appena adattato gli script come dovevo e li ho fatti lavorare assieme. Guarda lo script completo per vedere tutti i dettagli.

Per creare un box con i bordi su misura, tutto ciò che devi fare è inserire ciò che vuoi che ci sia dentro in un elemento div con una classe nominata cbb (usa classi multiple se ti va, lo script è fatto per supportarlo):

<div class="cbb">
 Box content
</div>

Questa è la classe che vuoi stilizzare per i browser con il JavaScript spento (o che non supportano il metodo DOM usato). Guarda l’esempio JavaScript off per renderti conto dello stile molto essenziale che ho usato.

E ovviamente, hai bisogno di scaricare il file contenente il JavaScript:

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

Lo script aggiunge l’elemento extra div e cambia il nome della classe da cbb a cb, quindi cb è la classe usata per attaccare l’immagine. Se vuoi usare altri nomi di classi, ti basta modificare la funzione initCB nel file del JavaScript.

Abbiamo fatto

A questo punto quello che tu ti ritroverai sarà un box ridimensionabile con bordi e angoli trasparenti, senza aggiunta di extra markup. Puoi facilmente personalizzarlo con le immagini che preferisci. Se i tuoi bordi arrotondati hanno misure differenti da quelle utilizzate in questo demo devi modificare il CSS di modo che ci sia un buon effetto.

Hai dei suggerimenti per un miglioramento? Sentiamoli, io sono qui.

Aggiornamento: Ho fatto alcuni cambiamenti per riparare a delle sbavature errate accennate nelle osservazioni.

I problemi risolti includono:

  • Floating: potete ora aumentare il float senza rompere il box.
  • Margins: Ora i margini verticali del box sono più facili da controllare. Questo è particolarmente utile quando si
    hanno parecchi box impilati uno sull’altro.

Per risolvere questo ho cambiato un bit allo script. Ora inserisce un nuovo elemento div che contiene il box. Fare questo mi ha permesso il posizionamento relativo e negativo dei margini, che stavano causando dei problemi in alcuni casi. Ho dovuto mettere in un div un height di 1px per accontentare IE.

Adattare le istruzioni: per personalizzare i vostri progetti grafici fate riferimento a Come personalizzare angoli e bordi.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.