asturi.it » Css

Preloader immagini

asturi.it — Tue, 25 Nov 2008 18:08:52 +0000

Ecco un trucchetto per ottenere un leggerissimo preloader in CSS per il caricamento di tutte le immagini del tuo sito:

img { background: url(preloader.gif) no-repeat 50% 50%; }

Questo snippet rappresenta un modo per fornire un indizio ai navigatori, sopratutto quelli dalla connessione lenta, che benché vi sia un blocco vuoto nella pagina, qualcosa sta accadendo, in modo da rassicurarli.

Questa è l’immagine utilizzata nell’esempio del preload:

Usare em invece di pixel

asturi.it — Thu, 13 Nov 2008 10:35:20 +0000

Ecco qualche buon motivo per cui usare em:

I pixel sono precisi, ma non sono molto flessibili. Se si aumenta il font-size del browser, le cose possono assumere un aspetto a dir poco stravagante…

Le misure in percentuali risolvere il problema della flessibilità, ma a volte la matematica diventa difficile e non è molto agevole lavorare in tale modalità.

Facendo corrispondere 1em a 10px, sono in grado di pensare rapidamente in termini di pixel, ma anche assicurare che all’aumento del font-size il sito crescerà in proporzione.

Attenzione: L’unica deroga all’uso di pixel può essere fatta per i bordi di 1px dato che 0.1em non funziona molto bene.

* { margin: 0; padding: 0; font-size: 1em; }
html { font-size: 125%; }
body{ font-size: 50%; text-align: center; }

p { font-size: 1.2em } /* == 12px */
#content { width: 96em; margin: 0 auto; } /* = 960px */

Rimuovere i puntini in Firefox

asturi.it — Mon, 10 Nov 2008 10:07:34 +0000

Premesso che l’utente potrebbe essere abituato ai comportamenti di default del suo browser, per chi ne avesse bisogno, ecco come rimuovere la linea punteggiata che compare attorno ai link in Firefox:

* :focus { outline: 0; }

GridFox – Estensione di Firefox per layout a griglia

asturi.it — Tue, 22 Apr 2008 13:05:08 +0000

I layout Grid-based sono diventati davvero popolari tra i web designer nel corso degli ultimi anni. Questa popolarità è dovuta in gran parte al lavoro di Khoi Vinh, Design Director di NYTimes.com. In più sedi ha messo in evidenza i vantaggi di un design basato su griglie e di come il concetto di stampa si possa tradurre dalla stampa al web.

Tuttavia realiuzzare un sito basato su una griglia di layout può comportare delle difficoltà. Per essere sicuri che ciò che si va sviluppando corrisponda alla griglia iniziale Eric Puidokas ci fornisce GridFox, una utile estensione per Firefox che sovrappone una griglia su qualsiasi sito web. È facile da personalizzare, in modo da creare l’esatta griglia su cui è stato progettato il layout del tuo sito.

Non rimane che provare!

Guida ai CSS

asturi.it — Tue, 12 Feb 2008 11:04:22 +0000

SitePoint dopo un lungo periodo di beta, finalmente rilascia per il pubblico la sua CSS Reference.

Sembra un buon riferimento. Provatela!

CssDoc – style, docblocks and tags

asturi.it — Wed, 19 Dec 2007 12:37:25 +0000

Segnalo questo proggetto in fieri che a una prima occhiata sembra interessante, soprattutto per chi, come me, lavora in team: si tratta di Cssdoc, che apre verso un approccio che aiuti singoli sviluppatori e team a migliorare scrittura, codifica, styling e gestione di file CSS. Il concetto principale è quello di adottare l’uso di commenti DocBlock in CSS.

min-width e max-width anche per IE5.5 e IE6

asturi.it — Thu, 15 Nov 2007 15:39:24 +0000

Finalmente IE7 supporta le comodissime proprietà min-width e max-width, davvero utili nella realizzazione di layout fluidi.

Si può ottenere lo stesso effetto anche per IE6 e IE5.5.

Ecco la regola da passare con commento condizionale suggerita dal buon Cameron Moll:

.nomeClasse { width: expression(document.body.clientWidth < 116? "115px" : document.body.clientWidth > 401? "400px" : "auto"); }

Ovviamente le misure sono da personalizzare secondo le esigenze.

Lo scarto di un px delle misure prima del punto interrogativo è per evitare che IE freezi.

Risoluzione di bug: Doubled-Margin Float

asturi.it — Wed, 07 Nov 2007 13:32:35 +0000

Nel boschetto della mia fantasia, tra ninfe e fate, c’è un luogo in cui i siti che sviluppo con CSS hanno la stessa resa su tutti i browser… nel boschetto della mia fantasia…

Nella dura realtà, quasi quotidianamente, mi trovo a dover risolvere, a volte in maniera ormai automatica, a volte meno, svariati bug per far sì che il layout corrisponda a quello progettato dal bravo grafico.

Fornirò, cominciando da oggi, man mano che mi si da l’occasione di rifletterci su durante il mio lavoro, un piccolo vademecum per la risoluzioni dei maggiori problemi inerenti la resa su diversi browser.
Da tenere comunque ben presente che più della metà dei vostri problemi sarà risolta strutturando il vostro bel codice, CSS e (X)HTML, in maniera corretta; quindi scialate pure con gli appositi validatori: CSS e (X)HTML.

Doubled-Margin Float

Questo bug si verifica quando, in IE 6 e precedenti, un elemento reso float:left ha un margin-left oppure float:right ha un margin-right. Avviene allora che il margine corrispondente al float viene raddoppiato. La soluzione più rapida, se proprio non possiamo fare a meno di specificare il margine critico, è di dichiarare l’elemento display:inline. Questo semplice accorgimento non ha di fatto alcun effetto sulla resa, dato che un elemento float viene reso di default come block-level.