Overflow – Un vantaggio segreto

L'overflow fa alcune cose splendide che dovreste sapere: crea dei nuovi contesti di formattazione cambiando il modo in cui un elemento blocco interagisce con i float e inoltre funge da clear.
Overflow – Un vantaggio segreto

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Overflow – a secret benefit” di Nicole Sullivan.

Generare contesti di formattazione

Arnaud Gueras lo chiamava “contexte de formattage” anni fa, e quando ritornai negli Stati Uniti rimasi sorpresa nel vedere come qui pochi sviluppatori avevano sentito parlare di questa “arma segreta”. Quando la proprietà overflow è impostata, viene creato un nuovo contesto di formattazione. Cosa significa questo? Cambia il modo in cui un elemento blocco interagisce con i float. Non si wrappa più attorno ai float, ma piuttosto diventa più stretto.

Il bordo di una tabella, un elemento block-level rimpiazzato, o un elemento nel normale flusso che determina un nuovo contesto di formattazione (come, ad esempio, un elemento con “overflow” diverso da “visible”) non deve sovrapporsi a nessun float nello stesso contesto di formattazione se non all’elemento stesso. [W3C, CSS 2.1]

Questo non è un hack, E’ tutto nelle specifiche del W3C.

Bene, quindi come puoi usarlo?

Un elemento con un nuovo contesto di formattazione occupa tutto lo spazio rimanente su una linea, invece di lasciare spazio per floats che sono già stati posizionati. Nel mio progetto di programmazione a oggetti CSS open source uso i contesti di formattazione in due modi.

Colonna di contenuto principale – aggiungere un contesto di formattazione significa che la mia colonna principale occupa tutto lo spazio rimanente dopo che sono state renderizzate le colonne di destra e sinistra. Questo significa avere un solo template, perchè se provi a rimuovere una colonna da un layout a tre colonne, dovrai cancellare semplicemente la colonna dall’html. Non ci sono altre modifiche da fare, gli sviluppatori CMS ti adoreranno per questo.

Gioca con il template in Firebug

  1. Prova ad aggiungere la classe “liquid” all’elemento con classe “page”
  2. Aggiungi o rimuovi una delle colonne dall’HTML
  3. Estendi uno degli oggetti della colonna con le classi addizionali elencate nella documentazione
  4. Prova a cambiare la larghezza della colonna direttamente in Firebug

Griglia – chiunque abbia sviluppato un sistema a griglie conosce gli errori di arrotondamento dei sub-pixel. I browsers non sanno cosa fare con 33.3 pixel, perciò fanno tutti qualcosa di diverso. Il sistema a griglie YUI nasconde queste differenze nei margini interni tra i blocchi, ma possiamo anche nascondere quella differenza dentro le unità stesse.

Un nuovo contesto di formattazione può essere utilizzato affinchè l’ultima colonna di ogni linea della griglia assimili le piccole differenze di misura. Giocate con le griglie, noterete che non appena modificate le dimensioni delle unità (colonne), l’ultima unità cresce e si adatta per colmare la differenza. Non ha larghezza e, inoltre, con questo nuovo contesto di formattazione non wrappa i float.

Annullare il float

Probabilmente hai sentito parlare del clear dei float. Si sta parlando da un po’ di annullare i float attraverso la proprietà overflow. Alcuni non lo considerano un lavoro ben fatto, ma una lettura attenta delle specifiche mostra che mentre questo potrebbe non essere previsto espressamente dagli autori delle specifiche, è stato invece ragionevolmente interpretato dai fornitori di browser.

Per consentire loro di calcolare che cosa superava i limiti del blocco (e quindi cosa avrebbe dovuto essere nascosto), avevano bisogno di sapere la dimensione del blocco. Poichè questi blocchi non hanno una specifica altezza impostata, i browser usarono l’altezza calcolata del contenuto. Per maggiori informazioni sul clear, vai a vedere questa conversazione che Eric Meyer ed io abbiamo avuto sul suo blog.

Attenzione

L’overflow può omettere parti con contenuto troppo grande (come immagini giganti, “pre” o tabelle), sto sperimentando adesso overflow:auto contro hidden per vedere quale è la soluzione migliore.

Altri lavori in questo campo

Molte persone stanno lavorando per trovare soluzioni affinchè le griglie abbiano certi requisiti:

  • Matt Sweeney dello YUI team sta provando con gli inline-blocks
  • Thierry Koblentz sta lavorando all’idea di usare le celle delle tabelle
  • Lindsey Simon di Google sta cercando alternative all’overflow:hidden che possa funzionare bene con le applicazioni web
  • Blueprint e 960gs usano le larghezze in pixel invece di percentuali
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github