Una particolare regola CSS che permette di visualizzare dei box DIV con disposizione tabellare, probabilmente la soluzione definitiva per rimpiazzare le tabelle TABLE; senza un particolare posizionamento grazie alle varie regole display:table— le div con questa proprietà assumono automaticamente una disposizione tabellare…

La regola display table si divide in 8 differenti regole come table-row, table-column, table-header ecc…
Questo link su w3School approfondisce la regola display.

Mah…con piccole prove si può velocemente testare la regola e notare quanto sia più versatile e stabile di una TABLE, eppure sarebbe troppo bello rimpiazzare definitivamente le tabelle; infatti display:table non è supportato da IE fino alla versione 7, il supporto è stato poi introdotto dalla versione 8, per safari e firefox nessun problema (ecco la pagina che evidenzia il supporto cross-browser della regola).

Vediamo un esempio di codice:

<div class=”riga”>
<div class=”colonna”></div>
<div class=”colonna”></div>
<div class=”colonna”></div>
</div>
<div class=”riga”>
<div class=”colonna”></div>
<div class=”colonna”></div>
<div class=”colonna”></div>
</div>

.riga {width:300px;height:auto;display:table-row;}
.colonna{width:100px;height:40px;display:table-column;}

In questo caso visualizzeremo una tabella formata da 2 righe e 3 colonne per un totale di 6 celle.

Siamo alle solite, caro Interent Explorer 6 neanche la pensione ti darei; oggi ho riscontrato un bug che fortunatamente nel WWW è stato già affrontato da altri designer.
Costantemente nei miei layout CSS utilizzo per il 90% le regole flotattiti per gli elementi, garantendo loro tutte le dimensioni necessarie e reali che a loro spettano.
Infatti il paramentro “float:” sui diversi browser renderizza a dovere i parametri ( height: width: padding: e margin: ) espandendo i vari box secondo il loro contenuto senza difetti di visualizzazione.

IE6 non si smentisce e anche con queste regole si inventa qualcosa se esageriamo, infatti capita che per i tag <div> o <li> se preceduti o nei pressi di un commento HTML ( <!– –> invisibile lato utente) IE6 crea di propria iniziativa un semi duplicato dell’ultimo elemento flottante, mostrando una ripetizione anomala del contento dell’elemento.

Per risolvere questo difetto:

• usare <!—[IF !IE]> attorno al commento
• rimuovere i commenti, soluzione più sensata, o nel caso di una pagina dinamica (.php) usare i commenti del codice appropriato al posto di quelli HTML
• nel flottante precedente aggiungere lo stile {display:inline;}
• aggiungere un margine negativo -3px all’ultimo elemento flottante prima del difetto
• drammaticamente inserire un display:none; per il contenuto difettoso

Nel mio caso lavorando su piattaforma Java ho rimpiazzato i commenti HTML con i commenti JAVA ( <%– –%> ) dissolvendo il BUG alla radice.
In altri casi ho risolto togliendo il float all’elemento difettoso inserendo un clear:both; andando così a pulire la ripetizione dei float.

Ecco l’articolo originale
Altre risorse: Link1, Link2

Le novità introdotte dalle specifiche CSS3 in continuo sviluppo e accompagnate dai Browsers più noti come Safari e Firefox, sono sempre più interessanti; certo non le cito tutto perchè basta cercare CSS3 in Google o andare su css3.info per trovare tutte le regole.
In particolare mi dedico agli effetti dei quali ho sempre sentito la mancanza per implementarli nei mie layout web, come la possibilità di creare un’ombra ad un div.

Vediamo il codice per l’Ombra di un Box:

box-shadow: 0px 0px 5px #ccc; (Standard)
-moz-box-shadow:  0px 0px 5px #ccc; (Firefox)
-webkit-box-shadow: 0px 0px 5px #ccc; (Safari)

Ora creo un box con angoli tondi e ombreggiatura:

#MyID {
position:absolute;
width: 120px;
height: 120px;
border: 1px solid #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 5px #ccc;
-moz-box-shadow: 0px 0px 5px #ccc;
-webkit-box-shadow: 0px 0px 5px #ccc;
}

Presto analizzerò altre capacità CSS3.