Ho letto un’articolo molto interessante su Noupe che elenca 15 punti da seguire per scrivere un buon CSS.

Le pratiche per scrivere buon codice non sono mai abbastanza:

1. Usare un CSS di reset per partire dalla stessa base con tutti i browser
2. Usare le dichiarazioni nella loro forma compatta (es: padding: 4px 3px 10px 4px; )
3. Usa i commenti per spiegare cosa stai facendo
4. Aggiungi una leggenda colori (es:  /* light blue: #4595be */ )
5. Considera bene a quale elemento sono relativi gli elementi che dichiari con il posizionamento assoluto
6. Evita gli hack del CSS e prova invece a creare diversi fogli di stile in base al browser se è necessario
7. Usa maggiormente la proprietà margin nel definire il layout. La proprietà padding crea maggiori problemi nella resa crossborwser
8. Aggiungi un elemento contenitore con overflow: hidden agli elementi che fanno uso del float in modo da pulire la situazione (questo devo provarlo).
9. Aggiungi display: inline agli elementi float per risolvere il problema dei doppi margini su IE6
10. Comincia ad usare con maggior convinzione gli sprites (lo so dovrei farlo!)
11. Organizza in modo ordinato file e cartelle per css, scripts, immagini etc…
12. Indenta gli stili (qui non sono d’accordo!)
13. Per i font usa misure assolute in pixel in luogo di quelle relative (em)
14. Limita l’uso delle pseudoclassi perché IE6 le supporta solo parzialmente
15. Evita i problemi con i selettori. Essi rispettano le gerarchie, quindi uno stile applicato viene ereditato

Questo è solo l’elenco. Se vuoi leggere in dettaglio tutti i punti leggi l’articolo originale

Quali tra i tanti browser disponibili supportano le nuve specifiche CSS3 e HTML5?

When can I use… è una pagina studiata appositamente per rispondere a queste domande.

Un’altra pagina molto esaustiva è Web Designer’s Checklist:

Come al solito grazie ad Internet Explorer ci sarà da aspettare un bel po’!

CSS3Please è un sito molto interessante che mostra alcune delle potenzialità che verranno introdotte con la terza versione dei fogli di stile CSS.

La particolarità è che gli stili sono liberamente modificabili per  apprezzare in diretta i cambiamenti. Una volta terminate le prove è possibile copiare lo stile generato per applicarlo ai propri progetti.

Una bella vetrina di quello che si può (si potrà ) fare con il futuro standard.

Anno nuovo design nuovo… Solo che ci ho messo un po’ più del previsto. Tra progetti iniziati, accantonati e ripensati alla fine siamo arrivati a Febbraio.

Il vecchio tema di webquadro, che tra poco sarà disponibile per il download gratuito, mi piace ancora ma lo trovo un po’ troppo semplice per come si sta evolvendo webquadro.

Da pochi di mesi sono un web designer freelance a tempo pieno e quindi ho la necessità di uno spazio più complesso dove convogliare clienti e semplici appassionati di web design.

Quella che segue è una descrizione del processo creativo che ha portato a questo nuovo layout. Il risultato puoi giudicarlo nei commenti ma cerca di essere magnanimo

continua a leggere…

Supponiamo di voler associare un titolo o una descrizione ad un’immagine. Questa mini guida spiega come, tramite i posizionamenti, è possibile allegare del testo ad una immagine.

La soluzione proposta è cross-browser è perfettamente in linea con gli standard attuali…
continua a leggere…

I menu sono da sempre parte integrante e fondamentale delle pagine web. Con il passare degli anni e grazie alle moderne tecniche CSS e Javascript si è assistito ad un radicale cambiamento di questo componente verso una forma sempre più dinamica e flessibile.

In questo post ti spiego una tecnica molto semplice per realizzare un menu dropdown a tre livelli (ma potrebbero essere a due o più) con il solo uso dei fogli di stile CSS.

I menu a tendina (dropdown menu) imitano in un certo senso il comportamento del tag select (quello che viene spesso usato per inserire la nazione in una form).

Passiamo al codice…

continua a leggere…

Tempo fa avevo scritto di come organizzare al meglio un foglio di stile CSS. Il primo punto da seguire riguardava il reset degli elementi più importanti.

I browser, di default attribuiscono valori diversi ad alcune proprietà come margin e padding.

Questi valori di partenza comportano visualizzazioni differenti in relazione al browser che stiamo utilizzando.

Proprio per questo è consigliabile azzerare tutto tramite i css…

continua a leggere…

Webquadro è nato per condividere la mia esperienza. Oggi però sono io che chiedo aiuto a tutti voi!

In rete non ho trovato la soluzione al mio problema, quindi pubblico questo post nella speranza di avere delle risposte attraverso i commenti.

Problema

L’intento è quello di realizzare un layout liquido composto da div della stessa larghezza ma con diverse altezze. ..

Con la proprietà Float e l’attributo left per div con uguale altezza si ottiene qualcosa del genere:

Se invece l’altezza dei div varia in base al contenuto si creano degli spazi verticali…

continua a leggere…

Ti ho già parlato di come scrivere meglio i CSS e anche della lora formattazione. Oggi ti presento un ottimo tool completamente gratuito che ti permette di ottimizzare ulteriormente il tuo codice.

Styleneat è un web app che permette di ottimizzare i fogli di stile.  Farla funzionare è facilissimo. Puoi inserire il codice nella form presente nell’homepage  o fare l’upload del file css dal secondo tab. Il risultato è sotto i tuoi occhi:

In un attimo il tuo foglio sarà indentato e ottimizzato pronto per essere pubblicato. Molto comoda è la funzione che permette di ordinare alfabeticamente le classi ma anche quella che decide se la formattazione deve essere mono o multiriga.

Consigliatissimo!

Questo post , a dispetto del titolo, non è tecnico. Stavo effettuando un installazione di Wordpress quando mi sono accorto di una cosa quantomeno singolare

Da un pò di anni il tema di default di Wordpress è basato su quello sviluppato da Kubrick.  Stavo quindi provvedendo ad eliminare il tema di default per creare il mio. Per comodità ho copiato il suo style.css e stavo eliminando tutte le sue dichiarazioni…

Ebbene alla fine del file ho trovato una dichiarazione fuori dal comune:

Inizialmente pensavo fosse la sua dichiarazione di matrimonio. Cercando ho scoperto che si tratta del testo di una canzone chiamata Daisy Bell scritta da Harry Dacre.