[Pillola] Un nuovo metodo crossbrowser per il clearing dei float
La mia prima pillola nel forum CSS
Come da titolo credo (a ragione, dopo aver fatto un numero consistente di prove) di aver trovato un nuovo metodo che consente di ottenere il clearing dei blocchi float sulla falsariga del metodo denominato easyclearing (http://positioniseverything.net/easyclearing.html)
Tale metodo consente di ottenere il clearing senza l'uso di markup strutturale usando un blocco che racchiuda i float, ma dopo averlo usato per diversi progetti ho riscontrato alcuni limiti:
- Fa ricorso allo "star hack" (non più supportato da IE7)
- Ricorre ad un hack sui commenti per garantire la compatibilità con IE per Mac (trascurabile la percentuale degli utenti con questo browser)
- Non funziona perfettamente con Opera a mio parere in quanto - dopo molte prove effettuate - il div che racchiude il/i float presenta un anomalo margine inferiore di 4pixel. Inoltre non sembra funzionare con regolarità su Opera 9 (uscito due giorni fa)
Da qui l'esigenza di cercare un nuovo metodo
- privo di hack
- che tenesse conto dei maggiori (e per quanto possibile minori a parte IE per Mac) browser in circolazione attualmente e se possibile già pronto per IE7.
- che non ricorresse a markup strutturale a tal scopo
Dopo qualche prova sono giunto a questa soluzione sulla falsa riga dell'easyclearing (che ho chiamato FabClearing...
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Author" content="Fabrizio Calderan, http://www.fabriziocalderan.it/" /> <title>FabClearing</title> <style type="text/css"> /* <![CDATA[ */ html, body { margin : 0; padding : 0; } /*** FabClearing ***/ .cleared:after { display : block; visibility : hidden; content : "."; height : 0; clear : both; } .cleared { clear : both; /* per Gecko */ height : 1%; /* per IE */ } /*** ***/ /* ]]> */ </style> </head> <body> <div class="cleared"> <div style="float: left; border:1px #ccc solid; width: 150px; height: 50px;"> Blocco con float left </div> <div style="float: left; border:1px #ccc solid; width: 150px; height: 50px;"> Blocco con float left </div> </div> Il test è superato se questa scritta appare al di sotto dei due blocchi float e se - evidenziando questa frase - la selezione appare adiacente al bordo inferiore dei due blocchi. </body> </html>
Tale soluzione funziona (per prova diretta) con i maggiori browser quali
- Firefox 1.5 (Win32, Mac)
- IE 6 (Win32)
- Opera 9 (Win32)
- Netscape 7.2 (Win32)
- Safari 2.0.3 (Mac)
Per prova indiretta (usando browsershots http://www.browsershots.org/):
- IE 7 beta
- Opera 8.5
- Galeon 1.3.20
- Epiphany 1.4.8
(le prove effettuate sono visibili su http://browsershots.org/website/1174657/)
Tutte le prove generano un comportamento identico tra questi browser. Non ho ancora riscontri per ora del funzionamento su IE5, IE 5.5 e IE 5.2 per Mac.
Per ciò che riguarda il funzionamento, è sufficiente racchiudere i blocchi float all'interno di un div contenitore a cui si deve dare classe 'cleared'. I blocchi flottati all'interno devono avere almeno una dimensione orizzontale definita (come nell'esempio).
Se volete potete utilizzare il thread per segnalazioni su malfunzionamenti (anche se spero non ce ne siano, ma non si può mai dire) con altri browser da quelli sopraelencati oppure per riportare i risultati delle prove sui browser che mancano all'appello. (sono gradite delle screenshot naturalmente
Spero possa essere utile.
-Fab-
Edit: si vedano i post più recenti di questa discussione
Keywords: clear clearing float easyclearing opera hack fabclearing
Rispondi quotando
