La ghigliottina è un bug che taglia la parte inferiore degli elementi flottati quando si passa col mouse su alcuni link.
L'effetto è molto simile al IE/Win: bug del contenuto non scrollabile, ma questo è più facile da impostare e con meno contenuto nella sua esecuzione.
Ecco un rapido esempio:
IE Users: Let's hover over those links to the right to witness some really interesting phenomena.
This is a floated div. You may use this link to fix things once you've done the butchering.
The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.
Ora che abbiamo avuto un assaggio della ghigliottina, vediamo il bug più da vicino.
Gli ingredienti principali della ghigliottina sono:
Il contenuto non flottato può o non può essere contenuto in un elemento di blocco, come p o div.
Le regole di stile 'a:hover' che invocano la ghigliottina possono essere quelle che cambiano, tra l'altro:
<!-- Esempio di layout che provoca la ghigliottina -->
<div id="container">
<div id="floated">
This is the floated content.
It is vulnerable to the Guillotine.
</div>
This is the non floated content inside the container.
Guillotine invoking links should be in this content.
</div>
/* Esempio di regole di stile per un link che provoca la ghigliottina */
a:hover {
background: none #FFFFCC scroll repeat 0% 0%;
/* e/o */
padding: 5px;
/* e/o */
text-style: italic;
/* e/o */
border-bottom: #0000FF 1px solid;
}
Un eccezione è cambiare il colore del testo, che non provoca il bug.
Come si può vedere, è abbastanza semplice finire nella trappola della ghigliottina. Armati di questi prerequisiti, passiamo alla parte "da paura": la ghigliottina in azione.
Se il contenitore ha una dimensione specificata, IE racchiude automaticamente tutti i float nel contenitore. Questa è una grossa violazione delle specifiche, ma, come abbiamo dovuto imparare con dolore, è qualcosa che dobbiamo aspettarci da questo browser. In IE il contenitore si allungherà per contenere un float che ha superato l'altezza del contenuto non flottato.
Esempio live | IE6 Screenshot
This is a float. It is 200px wide, has a blue border and yellow background. It should not be contained in the container div.
Because the container is assigned a width, IE encloses the float in the container.
This is the container. It is 400px wide, has a red border and grey background.
(Se guardate con attenzione, vedrete che anche il jog di 3px del testo è in azione. Lasciamolo stare e concentramoci sul problema attuale.)
Un link che provoca la ghigliottina può annullare questa auto-inclusione dei float. Quando ad un tale link si da l':hover, il bordo inferiore del contenitore salta per racchiudere solo il contenuto non flottato, il che è il modo corretto di rendere gli elementi. Tuttavia, quando il contenitore si restringe, la parte del box flottato che cade sotto il contenuto non flottato viene nascosta, e solo la parte che appare sopra al bordo inferiore del contenitore resta visibile.
Nel demo live che segue, notate come i link nelle prime due righe del contenuto non flottato non invocano il bug, ma resettano la ghigliottina quando viene dato loro un hover. Tutti gli altri link, invece, invocheranno il bug.
Anche i link nel div flottato resetteranno la ghigliottina.
Esempio live | Screenshot prima dell'esecuzione | Screenshot dopo l'esecuzione
This is the floated div.
Any link in this div will reset the Guillotine.
Content
More Content
And More Content
Even More Content
Until the float is taller than the non-floated content
Potrebbe sembrare che non specificare una dimensione per il contenitore, sebbene non sempre cosa pratica, prevenga il bug, poichè il float non verrà auto-incluso. Ma poichè IE è quello che è, anche se il float non è auto-incluso un link che provoca la ghigliottina taglierà la parte inferiore del float in determinate condizioni.
Affinchè la ghigliottina si verifichi in questo contesto, il float non dovrebbe ricevere il 'clear' da nessun elemento. In questa variazione del bug, il float non è tagliato dal contenitore ma dallo stesso body.
Esempio live | Screenshot prima dell'esecuzione | Screenshot dopo l'esecuzione
Questo non è molto elegante, ma l'unica cosa che per ora funziona è avere un div vuoto che dia il 'clear', fuori e dopo il contenitore.
Esempio live
This is the floated div.
Any link in this div will reset the Guillotine.
Content
More Content
And More Content
Even More Content
Until the float is taller than the non-floated content
This is a paragraph that comes after the container
<!-- Esempio di layout che risolve la ghigliottina con la marcatura -->
<div id="container">
<div id="floated">
This is the floated content.
It is vulnerable to the Guillotine.
</div>
This is the non floated content inside the container.
Guillotine invoking links should be in this content.
</div>
<div style="clear: both"></div>
Il float dovrebbe avere il 'clear' dentro il contenitore per essere racchiuso. Usare un div vuoto era il modo usato prima che venisse introdotto il Dare il clear ai float senza marcatura strutturale Se si da il 'clear' al float alla vecchia maniera, la ghigliottina non ha luogo.
Il div di clear appare dentro il div contenitore, dopo il contenuto effettivo.
Esempio live
This is the floated div.
Any link in this div will reset the Guillotine.
Content
More Content
And More Content
Even More Content
Until the float is taller than the non-floated content
<!-- Esempio di layout che risolve la ghigliottina con la marcatura -->
<div id="container">
<div id="floated">
This is the floated content.
It is vulnerable to the Guillotine.
</div>
This is the non floated content inside the container.
Guillotine invoking links should be in this content.
<div style="clear: both"></div>
</div>
Usare la marcatura strutturale senza semantica non è molto adatto; dopo tutto, è per questo motivo che fu introdotto questo metodo di dare il 'clear'. Si basa sulla pseudo-classe :after per i browser conformi agli standard (Mozilla, ad esempio, ma non il browser sotto-standard IE che non supporta :after. B& Co.), ma specificare una dimensione per il contenitore è proprio quello che serve ad innescare la ghigliottina. Così, questo elemento di clear ottenuto col contenuto generato non risolve il problema.
Abbiamo bisogno di un modo per usare il metodo :after continuando però a far funzionare tutto. Per fortuna l'Holly Hack ci viene in aiuto.
Per prima cosa dobbiamo contenere il contenuto non flottato all'interno di un elemento di blocco come un p o un div. Racchiudere il testo in questo modo è semanticamente corretto, così i sostenitori degli standard non si arrabbieranno. Poi diamo un'altezza a questo elemento di blocco usando l'Holly hack, in modo che solo IE veda la dimensione. Quindi, il bug scompare.
Esempio live
This is the floated div.
Any link in this div will reset the Guillotine.
Content
More Content
And More Content
Even More Content
Until the float is taller than the non-floated content
<!-- Esempio di layout con l'Holly hack applicato -->
<div id="container">
<div id="floated">
This is the floated content.
It is vulnerable to the Guillotine.
</div>
<p class="hollyhacked">
This is the non floated content inside
the container. Guillotine invoking links
should be in this content.</p>
</div>
/* Regole di stile per la soluzione di sopra */
#container {
/* Imposta margini, padding, bordi, colori ecc. */
}
/* Contiene i float usando il metodo :after */
#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility:hidden;
}
/* \*/
* html #container {
height: 1%;
}
/* */
/* Fine delle regole di contenimento dei float */
#floated {
/* Imposta margini, padding, bordi, colori ecc. */
float: left; /* flotta il blocco */
}
/* Applica l'Holly hack al contenuto non flottato */
/* \*/
* html .hollyhacked {
height: 1%;
}
/* */
Sarebbe stato bello dire che questa è la fine, ma IE è il genere di primadonna che non lascia mai il palco. L'Holly hack da una dimensione al contenuto non flottato ma, risolvendo la ghigliottina, da il via al modello float di IE più il suo carico di complicazioni.
Tuttavia, l'effetto della ghigliottina è evidente solo se il float è più alto del contenuto che lo segue. Perciò il contenuto non flottato raramente proseguirà sotto al float in una tale situazione. Questo ci da una qualche speranza di applicare con sicurezza l'Holly hack senza rovinare il layout.
Come si può notare, non c'è uan soluzione perfetta al bug della ghigliottina. Il designer dovrebbe scegliere in base al contesto ed essere pronto al compromesso. È difficile, ma cosa non lo è con IE?