Ci sono aspetti dei CSS3 che fanno meno notizia solo per il fatto che non contemplano la realizzazione di scintillanti effetti visuali. Cià non toglie che le loro potenzialità  siano di estremo interesse. Per quanto riguarda la strutturazione del layout, ad esempio, merita di essere preso in considerazione il cosiddetto box model flessibile. àˆ supportato al momento da Safari, Chrome e Firefox nelle loro versioni più recenti. Un eccellente punto di partenza per scoprirne i segreti è questo articolo uscito su Mozilla Hacks. Dal momento che alcuni degli esempi allegati non sembrano funzionare (a differenza della demo finale), ho replicato quello iniziale per illustrare il concetto di base. (more...)

Continua a leggere Tutto sul box model flessibile

Categoria: CSS

Tags: , ,

Ci fu un tempo in cui avvicinarsi alla costruzione di layout con i CSS significava apprendere come regola n° 1 che il browser più usato al mondo non interpretava correttamente il concetto di box model del W3C. Un bug tanto famoso da essersi guadagnato l'onore di una corposa voce su Wikipedia e per il quale non mancano gli hack risolutori. famous cigar shopTutti a dare addosso a IE e Microsoft, chiaro, ma diciamolo: a livello logico, l'idea che la larghezza complessiva di un elemento sia uguale alla somma di contenuto + padding + bordi non è che fosse così strampalata... Non so se hanno fatto questo tipo di ragionamento al W3C, ma nei CSS3 è prevista l'introduzione di un meccanismo simile. Il cuore di tutto è rappresentato dalla proprietà  box-sizing. Variando il valore ad essa assegnata è possibile effettuare quello potremmo chiamare un box model switching. In pratica e semplificando, usando il valore content-box ci si allinea al box model del W3C, usando border-box si rispolvera il modello IE5, con larghezza totale di un elemento data dalla somma di contenuto + padding + bordi. Al momento la proprietà  è supportata su Firefox e Safari/WebKit tramite prefissi proprietari ma anche su Opera 9.5 e IE8. Per questo e altri dettagli, tra cui un semplice caso' d'uso in cui la proprietà  potrebbe risultare utilissima, vi rimando a questo ottimo intervento apparso su Helephant.com.

Continua a leggere Un box model alternativo per i CSS3

Categoria: CSS

Tags: ,

Uno degli argomenti più complessi dei CSS è l'inline formatting model, ovvero come vengono trattati margini, padding e altezza di linea di elementi inline. Si aggiunge così all'approfondito riferimento Inline formatting model di Eric Meyer il recentissimo Inline elements and padding di Russ Weakley.Padroneggiare questi concetti, apparentemente difficili e poco pratici, è essenziale per utilizzare appieno le potenzialità  dei CSS. Due esempi che sfruttano le proprietà  di elementi inline si possono trovare, tra le risorse di casa, in Un menu a tabs con i CSS e nel recente mini bottoni con i CSS. Buona lettura!

Continua a leggere Inline formatting model

Categoria: CSS

Uno dei miei primi articoli su PRO, che risale a circa due anni fa, è quello sul box model. Ho pensato di proporre su questo blog un post su una delle tecniche che non è presente in quell'articolo, una tecnica di facile applicazione, solida, robusta e a prova di futuro.Rivediamo brevemente il problema: se assegniamo una larghezza esplicita a un elemento, secondo le specifiche CSS questo valore indicherà l'area utile al contenuto, bordi e padding esclusi. Internet Explorer 5.0, 5.5 (e la versione 6 in quirk mode, ovvero senza un corretto doctype), interpreteranno tale valore come la larghezza totale dell'elemento, includendo erroneamente, quindi, bordi e padding. Per ottenere un dimensionamento consistente le possibili soluzioni sono due: Evitare di specificare la larghezza effettiva all'elemento e insieme bordi e/o padding Usare uno delle tante versioni del box model hack (more...)

Continua a leggere Box Model e workaround

Categoria: CSS