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.

il problema del supporto dei font su web è sempre stato tema di disussione, ora attraverso quello che sono le variabili CSS introdotte in sperimentazione con CSS3, è possibile integrare un font nella pagina web stessa, senza averlo necessariamente installato nel sistema.
Come funziona, in pratica con il comando variabile @font-face si determina la posizione del font custom nel sistema e sul server, ed il nome attribuito al font stesso, i browser che supportano questa carateristica penseranno a mettere in cace i caratteri potendoli utilizzare nelle nostre pagine, richiamando il nome settato nella variabile alla voce font{}; o font-family{};.
Vediamo un esempio:

@font-face {
font-family: ‘Sketch Block’;
src: url(‘/skin/fonts/Sketch_Block.eot’);
src: local(‘Sketch Block’),
local(‘Sketch Block’),
url(‘/skin/fonts/Sketch_Block.ttf’) format(‘truetype’);
}

body {
font-family: “Sketch Block”, “Arial”, “Helvetica”, sans-serif;
}

I font ovviamente hanno una resa differente di Aliasing su ogni Browser, nel caso si volgia utlizzare il bold din un font custom per i browser non IE è necessario dichirare la variabile con il font bold e il font-weight.
I miei test si sono svolti su Firefox e Safari con esito positivo, mentre si IE e Chrome l’opzione non è andato a buon fine, probabilmente l’opzione su IE è supportata solo se il font è presente anche in versione .eot (OpenType); ho nontato inoltre che neanche su iPhone è supportato.