Div centrati con jQuery

Ho letto con molto interesse un recente post di Cesare Lamanna dove veniva mostrata una tecnica solo CSS per centrare dei div all'interno di un contenitore. La tecnica fa uso del valore inline-block e di un hack per IE6 per centrare i box.

Tuttavia, questa tecnica, anche se funziona, ha dei limiti. Il più grande di questi limiti è che stiamo usando un valore che non presenta nessun problema se all'interno dei div si trova contenuto semplice, come del testo o un immagine. Ma se all'interno di questi div vogliamo inserire del contenuto un po' più complesso, come ad esempio degli elementi flottati o posizionati, allora potrebbero sorgere dei problemi. Infatti, inline-block si comporta come block, ma le interazioni con questo valore non sono ben definite dalle specifiche. In altre parole, anche se oggi la tecnica funziona per il contenuto complesso, non è detto che funzionerà  in futuro qualora venissero cambiate le regole per la definizione di un contesto di formattazione di blocco per questo valore. Per inciso: i test della suite del W3C non contemplano questo caso, quindi il tutto andrebbe verificato.

Meglio ripiegare quindi su un più tradizionale e sicuro contesto block. Come fare? Ho scritto un post dove illustro una tecnica davvero semplice per ottenere lo stesso effetto con il floating e jQuery. Sostanzialmente ho un contenitore con all'interno tre div flottati. Tramite jQuery, creo un secondo contenitore che andrà  ad abbracciare il primo. Il contenitore #wrapper, invece, verrà  centrato all'interno del secondo contenitore, creando così l'effetto finale dei tre div centrati. In totale sono richieste solo 3 righe di jQuery: tutto il resto sono stili CSS. Il vantaggio principale di questa tecnica è che possiamo gestire una situazione di blocco ben nota, ossia quella di box flottati con del contenuto all'interno.

Mi sarebbe piaciuto usare una tecnica solo CSS, ma al momento i CSS si trovano in un limbo, combattuti come sono tra le specifiche CSS 2.1 (che non sono ancora una raccomandazione ufficiale dopo ben dieci anni!) e i moduli CSS3, che più o meno sono nella stessa situazione di incompiutezza. Il punto è che il CSS Working Group continua ad apportare modifiche ai dettagli delle specifiche e le nuove versioni dei browser cercano di star dietro a queste modifiche che vanno avanti con ritmo mensile. Mi dispiace dirlo, ma in questo caso un approccio conservatore e retrogrado ci evita di trovarci nella spiacevole situazione di vedere un nostro layout funzionare con la versione x di un browser per poi fallire con la versione y, nonostante il fatto che siano stati compiuti passi da gigante nel regression testing.