Una delle nuove caratteristiche proposte nella Internet Explorer Platform Preview 2 che non ha ottenuto una grande attenzione è il supporto per i floats posizionati, in lingua madre “positioned floats”. Il nome sta ad abbreviare la specifica cosìdetta “CSS Floats and Positioning Level 3”, porposta a Maggio 2011 da Microsoft e Adobe in modo congiunto.

Ma che cosa sono i floats posizionati? Di seguito la traduzione delle parole della specifica proposta, ispirata alla proprietà di text wrap. I due colossi dicono così:

Invece di limitare gli elementi a flottare a destra o a sinistra relativamente alla loro posizione nel documento, i floats posizionati potrebbero essere posizionati ad una specifica distanza dai lati top, bottom, left, right di un elemento di blocco contenitore, rimanendo tuttavia parte stessa del documento.

Come funzionano? Un nuovo valore è stato proposto per la proprietà  float e si definisce positioned – oppure -ms-positioned nella prima implementazione di Microsoft. Usato in combinazione con  position: absolute, puoi posizionare un elemento in modo che continui ad alterare il flusso della pagina e non “voli” sopra di essa. E così il contenitore non si sovrapporrà al contenuto testuale il quale invece, si disporrà intorno. Come? Così:

Float posizionati CSS3

E’ una proposta fantastica per risolvere problemi comuni che noi webdesigner incontriamo. Ora resta da vedere se il W3C reputerà questa proposta buona e completa. Maggiori dettagli potete trovarli direttamente sulla  IE10 Platform Preview docs.

Enjoy!