CSS  »  Articoli  »  Mondo CSS 

In questo articolo, che presuppone una discreta conoscenza dei fogli di stile, parleremo delle best practices (migliori pratiche): vedremo cioè come migliorare la codifica dei fogli di stile in fase di scrittura, così da renderli facilmente leggibili, rieditabili e leggeri in termini di peso.

Lo studio dei css

I css richiedono studio, e a parer mio seguire una buona guida è importante. In rete se ne trovano moltissime: tra tante, risorse valide per avvicinarsi e approfondire fogli di stile sono Guida ai Fogli di Stile (CSS) di html.it e la guida ai fogli di stile di W3schools.com, corredata da molti esempi pratici, e per una lettura veloce e dettagliata i due tutorial (base e avanzato) di Brainjar.com. Infine, per i dubbi teorici e per un miglior livello di dettaglio sui fogli di stile, è spesso utile la reference del w3c.

Le proprietà

Finchè non si conosceranno a memoria tutte le proprietà e i loro possibili valori, può risultare utile una quick reference, cioè un elenco con tutte le proprietà e i loro possibili valori, come quella di W3schools. Inoltre è bene considerare il supporto di ciascuna proprietà, su questa tabella trovate l' elenco delle proprietà e la compatibilità per i più diffusi browsers.

Usare gli shorthands (scorciatoie)

Dopo questa brevissima introduzione sulle risorse inerenti i fogli di stile, entriamo nel vivo dell' articolo. Gli shorthands (scorciatoie) sono proprietà a valori multipli, e il loro uso è decisamente vantaggioso in quanto consentono di snellire molto le regole css e di conseguenza l' intero foglio di stile. Ecco l' elenco degli shorthand, con indicate le proprietà che racchiudono:

• background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
• border
  • border-width
  • border-style
  • border-color
• font
  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
• list-style
  • list-style-type
  • list-style-position
  • list-style-image

C'è da notare che i valori attribuiti agli shorthands vanno elencati secondo un preciso ordine, che andrà seguito anche omettendone alcuni. Vediamo un paio di esempi:

p.inevidenza{ font: italic small-caps 500 1.1em/150% Helvetica,Arial,sans-serif}
div#contenuti{ background: #ffc url(sfondo.gif) repeat-y top right}

Altri articoli

Altre guide

Altre newsletter