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

Via SimpleBits e StyleGala arrivo ad un sito dal design molto interessante: quello di Derek Powazek. L'idea di base è semplice: il contenuto prima di tutto, e così perchè non avere la navigazione nel footer?L'autore, che ha realizzato tra l'altro il nuovo design di Technorati, descrive le ragioni della navigazione-footer in un post intitolato Embrace your bottom. Ecco la traduzione del passo più interessante:È arrivato il tempo in cui i designer inizino a pensare al footer come parte del design di un sito. Il fondo di una pagina è il bacio alla fine di un appuntamento, e stiamo facendo siti che si concludono senza neanche una stretta di mano. (more...)

Continua a leggere La navigazione non convenzionale

Categoria: Web Standards

Stu Nicholls è uno degli ultimi pionieri dei CSS e le sue sperimentazioni, che si possono trovare sul suo sito CSSPlay, mi hanno sempre affascinato. Il suo più recente tutorial presentato su WebReference è incentrato su questo tema: come costruire una galleria fotografica interamente basata sui CSS. Il risultato è decisamente sorprendente. Non si può mettere in dubbio un uso davvero creativo dei CSS, ma non è solo sotto l'aspetto scenografico che bisogna valutare la bontà di una tecnica. Ci sono almeno quattro motivi per cui non la userei mai in un progetto reale. (more...)

Continua a leggere Una galleria fotografica con i CSS

Categoria: CSS

Dare una visione d'insieme dei Web Standards che sia semplice ma allo stesso tempo minuziosa è un progetto molto ambizioso per la vastità di argomenti da trattare. Russ Weakley, uno dei miei autori preferiti, ci riesce benissimo in Basic webstandards Workshop, un vero e proprio manifesto del webdesign moderno. Meritano una lettura attenta anche i suoi molti tutorial. Un articolo di livello simile a quello del workshop, anche se con un approccio un po' diverso, è Developing With Web Standards di Roger Johannson. È un peccato che entrambe le pubblicazioni non includano una sezione relativa a Javascript: tre letture che possono costituire un ottimo complemento sono Unobtrusive Javascript di Chris Heilmann, Ten Good Practices for writing javascript in 2005 di Bobby Van Ders Luis e Creating Accessible Javascript di Jared Smith.

Continua a leggere Introduzione ai Web Standards

Categoria: Web Standards

Un post pubblicato di recente su IEBlog inizia a rivelare alcuni dettagli implementativi di IE7. Ma facciamo un attimo un passo indietro, dato che tutto è iniziato in questa calda estate. Il 27 luglio 2005 IEblog annuncia la beta 1 di IE7 (ricordo che per versione beta di un software si intende una versione in fase di test, e lontano dall' essere definitiva). La beta di IE7 è però disponibile solo agli sviluppatori con abbonamento a MSDN... il che la rende quasi una beta privata. (more...)

Continua a leggere IE7: uno sguardo al futuro

Categoria: Web Standards

Un articolo piuttosto recente e divenuto ormai famoso tra gli appassionati di CSS è Creating a Star Rater using CSS, un tutorial in cui si spiega come ottenere un meccanismo di votazione con i CSS: il risultato è molto accattivante e decisamente intuitivo per l'utente. Due parole sull'implementazione: per la comprensione della tecnica ci sono alcuni elementi chiave: il fast CSS rollover, i posizionamenti assoluti, il cambio di dimensioni dei link in stato :hover e soprattutto l' uso sapiente dello z-index. Il CSS è semplice, anche se un po' lunghetto. Komomedia, il sito che ospita l'articolo mi era già noto per la sua menzione su uno dei miei siti preferiti: Devil's detail, che si occupa di evidenziare soluzioni e dettagli di interfacce e widget di siti web. In effetti, il menu laterale che combina tabs e scroller con CSS e Javascript è sorprendente. Ho un po' di dubbi sulla sua usabilità con Javascript disabilitato... Tornando ai menu con rollover, un altro articolo recente degno di nota è Running with Sprites (su un altro sito davvero spettacolare) in cui un menu con rollover viene assegnata anche un'immagine per lo stato attivo. Il risultato è davvero interessante, mi raccomando non perdetevi l'esempio con Gundam. Infine, per un ripasso sui menu con rollover via CSS ricordo la serie sui Menu grafici e semigrafici con i CSS nella sezione omonima di PRO. Ecco i link agli articoli: Parte I: menu semigrafici Parte II: fast CSS rollover Parte III: rollover su immagini Parte IV: fast CSS rollover rivisto Parte V: navigation matrix In particolare da non perdere l'ultimo della serie, il mio preferito.

Continua a leggere Rollover: nuove idee con i CSS

Categoria: CSS