20 consigli utili per usare al meglio i fogli di stile CSS (tutorial CSS)

L’utilizzo di fogli di stile (CSS) permette di ottenere un design esteticamente piacevole, mentre è più facile e meno costoso costruire siti.

I CSS separano il Markup dalla Presentazione, favorendo sviluppatori ed utenti

Il successo di CSS deriva dai numerosi vantaggi che fornisce ai progettisti.

Il primo è il ricco insieme delle caratteristiche. Utilizzando uno stile dichiarativo semplice, i progettisti possono stabilire posizionamento, margini e allineamento, colori, stile del testo, elenchi numerati e molto di più. Inoltre, direzione di scrittura, stile dei caratteri e altre convenzioni che possono essere diverse da una lingua all’altra. I CSS sostengono inoltre un numero crescente di varie tradizioni tipografiche ed hanno fatto progressi significativi verso la rappresentazione di documenti multilingue.

Il secondo vantaggio è il riutilizzo. I fogli di stile possono essere condivisi da più pagine multiple, rendendo semplice aggiornare un intero sito, cambiando una singola riga di CSS. Poiché i moduli di stile possono essere messi in memoria cache, questo significa anche prestazioni migliorate. CSS promuove l’accessibility in molti modi, senza compromettere il design. Separare il markup dallo stile permette agli agenti di accessibilità di comunicare le informazioni secondo le necessità di utenti con disabilità. La progettazione CSS assicura un buon equilibrio fra l’autore e i bisogni dell’utente, permettendo agli utenti di fare uso di più pagine. I fogli di stile riducono anche la dipendenza dall’utilizzo di tabelle HTML per il layout, che può essere una barriera per alcuni utenti disabili che utilizzino tecnologie assistive come gli screen reader.

Un ulteriore vantaggio di CSS è la più semplice pubblicazione su media differenti; lo stesso documento può essere visualizzato con vari dispositivi (da grandi monitor a colori, a telefoni mobili, a stampanti) semplicemente applicando il foglio di stile appropriato. Il software può scegliere il foglio di stile più appropriato in modo automatico, (come deciso dall’autore del foglio stesso), e permettere all’utente di scegliere da tra i vari fogli di stile disponibili, per soddisfare le proprie necessità.

Questo è sufficiente per convincere all’utilizzo dei CSS nel fare siti web. A questo punto indicherò alcuni suggerimenti (CSS tips) per utilizzare i fogli di stile al meglio. Possono essere abbastanza ovvi, però consiglio di leggere tutti i punti ugualmente.

Se vi viene in mente qualche altro suggerimento utile, potete segnalarmelo nei commenti.

1. Usare un reset.css

   Normalmente i browser tipo Firefox e Internet Explorer hanno diversi stili di default. Un reset.css ridefinisce la visualizzazione di tutti gli stili di base, in modo da poter partire da delle fondamenta solide, con impostazioni che permettono la stessa visualizzazione su tutti i browsers.

   Ecco alcuni dei framework reset.css più utilizzati - Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli

2. Usare le abbreviazioni CSS

   Le abbreviazioni CSS offrono una via più breve di scrivere codice CSS, e, meglio ancora, rendono il codice più pulito e semplice da capire.

   Ad esempio, invece di creare un CSS tipo questo:

   .header {
         background-color: #fff;
         background-image: url(image.gif);
         background-repeat: no-repeat;
         background-position: top left;
       }

   Si può abbreviare nel seguente:

   .header {
         background: #fff url(image.gif) no-repeat top left
       }

   Approfondimenti - Introduction to CSS Shorthand, Useful CSS shorthand properties

3. Capire Class e ID

   Questi due selettori possono confondere i principianti. Nei CSS, class è rappresentato da un punto “.” mentre id è un hash ‘#”. In breve, id è usato su elementi che sono unici e non si ripetono, class d’altra parte può essere riutilizzato varie volte. Notare che hanno priorità diverse.

   Approfondimenti - Class vs. ID | When to use Class, ID | Applying Class and ID together

4. Potere degli elenchi puntati <li>

   <li> è molto utile quando usato correttamente insieme a <ol> o <ul>, in particolare quando usato per stilizzare i menu di navigazione.

   Approfondimenti - Taming Lists, Amazing LI

5. Dimentica <table>, prova <div>


   Uno dei maggiori vantaggi di CSS è che si possono usare i <div> per ottenere la massima flessibilità in termini di stilizzazione. <div> sono diversi da <table>, dove i contenuti sono bloccati da celle <td>. Si può tranquillamente affermare che nella stragrande maggioranza dei casi, i layout ottenibili con l’uso di tabelle, si possono ottenere in modo migliore utilizzando i <div>.

   Approfondimenti - Tables are dead, Tables Vs. CSS, CSS vs tables

6. Strumenti di debug per CSS

   è sempre utile avere un’anteprima istantanea del layout mentre si lavora sui CSS, aiuta a capire e a debuggare gli stili CSS meglio. Ecco alcuni strumenti di debugging gratuiti che si possono installare nei browsers: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, e Firebug.

   

7. Evitare selettori superflui

   A volte le dichiarazioni CSS possono essere semplificate, ad esempio invece di scrivere cose tipo:

   • ul li { ... }

   • ol li { ... }

   • table tr td { ... }

   Si possono abbreviare tipo:

   • li { ... }

   • td { ... }

   Spiegazione: <li> esiste solo all’interno di <ul> o <ol> e <td> sarà solo all’interno di <tr> e <table> quindi non è realmente necessario specificarli nuovamente.

8. Conoscere !important

   Qualsiasi stile marcato con !important sarà utilizzato indipendentemente dal fatto che ci sia una regola che lo ridefinisce in seguito.

   .page {	background-color:blue !important;	background-color:red;}

   In quest’esempio, background-color:blue sarà adottato perché è marcato con !important, anche quando c’è una direttiva background-color:red; che lo segue. !important è usato in situazioni dove vuoi forzare uno stile senza che questo possa essere sovrascritto. Attenzione che potrebbe non funzionare in vecchie versioni di Internet Explorer.

9. Rimpiazzare testi con immagini

   Questa è una pratica comunemente adottata per sostituire <h1>title</h1> da un titolo basato su un testo a un’immagine. Ecco come si può fare.

   h1 {
   text-indent:-9999px;
   background:url("title.jpg") no-repeat;
   width:100px;
   height:50px;
   }

   Spiegazione: text-indent:-9999px; sposta il testo del titolo fuori dallo schermo, sostituendolo con l’immagine specificata da background: {...} con width e height specificate.

10. Capire il posizionamento CSS

    Il seguente articolo fornisce una spiegazione chiara di come si usa il posizionamento nei fogli di stile - position: {...}

    Approfondimento - Learn CSS Positioning in Ten Steps

11. CSS @import vs <link>

    Ci sono 2 modi per includere un file CSS esterno - usare rispettivamente @import e <link>. Se non sai che metodo usare, ecco un articolo che entra nel dettaglio del funzionamento dei due metodi.

    Approfondimento - Difference Between @import and link

12. Progettare Form con i CSS

    I form possono essere progettati e personalizzati facilmente con i CSS. I seguenti articoli mostrano come:

    Approfondimenti - Table-less form, Form Garden, Styling even more form controls

    

13. Ispirati dai migliori

    Se cerchi in giro dei siti ben fatti basati sull’utilizzo di CSS-based per ispirarti, o semplicemente guardando in giro per alcune buone UI, ecco alcuni siti che servono come catalogo CSS posso raccomandare:

    • CSS Remix
    • CSS Reboot
    • CSS Beauty
    • CSS Elite
    • CSS Mania
    • CSS Leak

    

    Ne volete altri ancora? Ecco 74 Gallerie CSS.

14. Angoli arrotondati in CSS

    Il seguente articolo fornisce una descrizione di come creare angoli arrotondati con i CSS compatibili cross-browser. Rounded corners in CSS.

    

15. Tenere il codice CSS Pulito

    Se il codice CSS è disordinato, è probabile che la confusione aumenti e diventi sempre più difficile capire come funziona il codice. Per i principianti: utilizzare l’indentazione corretta e commentare il codice correttamente.

    Approfondimenti - 12 Principles For Keeping Your Code Clean, Format CSS Codes Online

16. Unità di misura tipografiche: px vs em

    Non sai se usare le unità di misura px o em? I seguenti articoli spiegano in dettaglio le differenze.

    Approfondimenti - Units of Measurement in CSS, CSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts

17. Tabella di compatibilità CSS per i Browsers

    Sappiamo tutti che i vari browser non supportano pienamente gli standards e quindi possono visualizzare diversamente gli stili CSS. Può essere utile avere una guida di riferimento, dei grafici o degli elenchi che mostrano le compatibilità CSS di ciascun browser in modo esauriente.

    Tabelle di supporto CSS: #1, #2, #3, #4.

    

18. Design Multicolonne in CSS

    Progettare design multicolonna che funzionino perfettamente in tutti i browsers richiede perfetta padronanza dei CSS ed è una vera sfida anche per i grafici più esperti. Ecco alcuni articoli che possono aiutare:

    • In Search of the Holy Grail
    • Faux Columns
    • Top reasons your CSS columns are messed up
    • Litte Boxes (examples)
    • Multi-Column Layouts Climb Out of the Box
    • Absolute Columns

    

19. Utilizza un editor CSS gratuito

    Gli strumenti dedicati sono sempre meglio del blocco note. Eccone alcuni consigliati:

    Approfondimenti - Simple CSS, Notepad ++, A Style CSS Editor

    

20. Capire i Media Types

    Ci sono alcuni media types quando si dichiarano i CSS con <link>. print, projection e screen sono alcuni dei tipi comunemente usati. Capirli ed usarli correttamente permettono di ottenere una migliore accessibilità per gli utenti. I seguenti articoli spiegano come gestire i CSS Media types.

    Approfondimenti - CSS and Media Types, W3 Media Types, CSS Media Types, CSS2 Media Types

Per il momento non ci sono post correlati.

Tags: grafica