Come rendere il vostro css più leggero
Ci sono diverse proprietà css che possono essere accorciate, accorpandole in una sola entità, di modo da rendere il nostro foglio di stile più leggero e corto. Senza indugiare oltre iniziamo a vedere come e cosa possiamo accorciare:
- Margin|-top|-right|-bottom|-left: possiamo dichiarare ogni lato al margin oppure scrivere semplicemente: margin:|valoretop| |valoreright| |valorebottom| |valoreleft|; (es. margin:10px 9px 1px 4px;) leggendolo quindi in senso orario partendo dal top. Variazioni di questo possono essere margin:|valoretop&bottom| |valoreleft&right|; oppure margin:|valoretop| |valorebottom| |valoreleft&right|;
- Il padding funziona alla stessa maniera.
- Background|-attachment|-color|-image|-position|-repeat|: può essere scritto anche così: background: |#color| |image (url)| |repeat| |attachment| |position|;
- Font|-style|-weight|-size|-line-height|-family|: potremmo scriverlo anche come font: |style| |weight| |size|/|line-height| |family|; quindi, ad esempio: font: italic bold .8em/17px arial; Col font se ne possono usare molti di più ma pochi servono davvero.
Queste sono solo alcune proprietà css tra le più usate che è possibile accorciare e accorpare in un solo attributo. Per vederle tutte vi rimando a W3CSchool.
Amazon-Box creato da Giuseppe Frattura
L'Autore
Architetto dell'Informazione presso uno società di webdesign, ho sviluppato nel tempo conoscenze in interaction design e user centered design che cerco di condividere con gli utenti di ItalianWebDesign.
Add to Google
16 Commenti
Davvero utilissimo, grazie! ^.^
personalmente prediligo la leggibilità alla compressione dei css. Anche perchè può sempre capitare di dover rimettere le mani su un css e averlo “compresso” spesso non è la migliore delle cose. Se può essere utile esistono alcuni tool online che ottimizzano i css.
Questo è molto customizzabile e per codice ben scritto riesce comunque a ridurre il pero del 4,5%: http://www.cleancss.com .
Questo è un pò più “aggressivo” e per lo stesso codice arriva ad un “risparmio dell’11%.
pardon il link!
http://www.cssoptimiser.com
grazie dei links Alex!
Prego
per approfondire l’argomento dell’ottimizzazione delle prestazioni (otimizzare il codice html,CSS, JS, impostazioni server ecc.) c’è l’ottimo “Creare siti web ad alte prestazion” di Steve Souders uscito da poco in italiano. Io l’ho solo sfogliato ma sembra molto interessante
Devo ammettere che anche io preferisco un CSS leggibile piuttosto che compresso. Niente da dire sulle regole citate nell’articolo, meglio sintetizzare in quei casi
Per risparmiare banda credo che i problemi siano da ricercare altrove, vedi peso delle immagini, dei js, o del codice html.
a riguardo è molto utile usare il tab net di firebug!
Bell’articolo… ovviamente sono daccordo con gli altri, se è un progetto su cui ci dovranno mettere le mani anche altri designer, allore prediligo la leggibilità;
altrimenti compressione assoluta, tanto se l’ho scritto io e lo devo modificare solo io, so come va cambiato!
Prediligo anche la leggibilità alla compressione, ma penso che i suggerimenti riportati nell’articolo non compromettano la leggibilità del css, anzi, lo rendo un po’ più snello e quindi anche più semplice da consultare.
La compressione inizia a minare la leggibilità quando si scrivono le regole tutte su una riga, ad esempio.
Io uso sempre le scorciatoie e scrivo ogni regola su una riga diversa, usando le indentazioni
io elimino tutti gli spazi
…il peso scende di un paio di kb!
per i css a meno che non siano migliaia di righe normalmente segueo queste regole:
- file css unico validato
- richiamato come primo elemento dell’head
Se si utilizzano framework js è li che si può risparmiare considerevolmente banda. In quel caso utilizzo le versioni compresse e non li richiamao nelle pagine che effettiavmente non li utilizzano
Io nei css (apparte il fatto che ne uso 7 [mio framework]) tendo a spaziare, indentare, commentare, e quant’altro, così la leggibilità non è compromessa affatto anche se uso le regole di questo post
(esempio: http://www.marcolivetti.com/themes/site_themes/default/css/style.css)
Concordo, il css deve essere leggibile, commenti e dichiarazioni più marcate tornano molto utili soprattutto se si lavora in tanti sugli stessi files. Occorre bilanciare in maniera corretta compressione e leggibilità.
Concordo che la leggibilità del codice sia importante, ma se posso cerco di raggruppare le regole simile.
Per essere precisi
margin:|valoretop| |valoreleft&right| |valorebottom|;
Ciao
Hu è vero, ho scritto una fesseria nel post e li ho invertiti
ahiahiai ti picchio