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

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.

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!

Prendo spunto da questo ottimo articolo di NetTuts per darti qualche altro consiglio su come impostare al meglio i CSS.

Nel primo post spiegavo qual’era la formattazione migliore per un CSS per quanto concerne la mia esperienza. In questo nuovo post oltre ad aggiungere alcune dimenticanze segnalo qualche buon consiglio per ottimizzare il flusso di lavoro

continua a leggere…

I fogli di stile contengono le regole che definiscono la rappresentazione dei documenti html e xhtml e sono contenute nelle direttive del W3C.

All’interno di un foglio di stile le regole CSS sono così strutturate:

selettore {
proprietà1 : valore1;
proprietà2 : valore2, valore3;
}

Vediamo come è possibile organizzare al meglio un foglio di stile.

continua a leggere…

I fogli di stile (Cascading Style Sheets) hanno rivoluzionato la gestione dei layout e dello sviluppo web. Ad oggi sono in vigore le specifiche 2.1 ma il W3c ha gia ampiamente trattato i futuri sviluppi che permetterà la terza release dei CSS.

Uno dei maggiori problemi che affligge il web designer è la creazione di angoli arrotondati. Questa tecnica se usata sapientemente dona al nostro sito un aspetto gradevole e moderno.

Vediamo insieme come negli anni si è evoluto il concetto di rounded corners…
continua a leggere…