Howtoweb.it

background-image: url(data:image/gif;base64,AAAA);

background-image: url('data:image/gif;base64,AAAA');

<img src="data:image/gif;base64,AAAA" alt="Testo alternativo" />

10 modi per ottimizzare i fogli di stile

Creare un buon foglio di stile richiede pazienza e precisione, anche una volta che tutto funziona, il test su più browser ha dato esito positivo e abbiamo validato il codice è possibile ottimizzare il css per ridurne il peso e in numero di richieste al server.

1) Sintassi contratta nelle regole

Per ridurre il peso di un foglio di stile la prima cosa a cui bisogna pensare è di ridurne il contenuto. Per fare questo possiamo come prima cosa valutare di utilizzare la sintassi contratta dove è possibile e dove è opportuno.

Ad esempio il seguente codice

margin-top:1px;
margin-right:3px;
margin-bottom:20px;
margin-left:10px;

E’ facilmente sintetizzabile con una sintassi contratta come questa

margin:1px 3px 20px 10px;

La sintassi contratta è applicabile a molte proprietà, è bene conoscerle a fondo per capire quando poterle usare. Ecco un altro esempio per il background.

background-color:#ffffff;
background-image:url(images/immagine.jpg);
background-repeat:no-repeat;
background-position:10px 20px;

che in forma contratta verrebbe così

background:#ffffff url(images/immagine.jpg) no-repeat 10px 20px

2) Evitare le unità di misura per valori negativi

Usare le unità di misura è utile per non confondere i vecchi browser e per non incorrere in problematiche di interpretazione errate se usiamo differenti unità di misura in un singolo css, esiste però un caso dove è possibile omettere l’unità di misura senza problemi, quando il valore è 0.

margin:0;

Essendo 0 ha poca importanza che l’unità di misua siano pixel, percentuali o punti perchè la proprietà sarà sempre nulla.

3) Regole scritte in linea

Un ulteriore modo per ridurre il peso dei css è quello di scrivere le regole inlinea piuttosto che a capo.

body{margin:0;padding:0;text-align:center;}

Questo sistema riduce notevolmente il peso del foglio di stile ma rende più difficoltosa la lettura per l’essere umano, è quindi consigliabile scrivere una regola in linea quando questa non ha più di tre proprietà al suo interno, per regole con più di tre proprietà si scriveranno a cascata.

div{
margin:0;
padding:0;
text-align:left;
color:#000;}

4) Valutare l’eredità di una regola

Abbiamo visto in un precedente articolo quanto sia importante valutare la priorità di una regola css, ma non bisogna esagerare con l’eccessiva specificità. Per esempio questa regola:

div#contenitore div#content div#main p#numerotelefono{}

E’ eccessivamente specifica essendo l’ultimo elemento comunque dotato di un id dovremmo trovare il modo di utilizzare la regola specificando meno elementi:

#numerotelefono{}

5) Evitare l’import

A differenza di  <link> che collega un foglio di stile ad una pagina html, l’elemento @import presenta qualche lacuna a livello di performance di caricamento (in particolare per internet explorer) e andrebbe limitato il più possibile. Per approfondire l’argomento leggi questo articolo.

6) Ordinare le proprietà css in ordine alfabetico

Se questo consiglio vi suona come follia, l’unica cosa che può farvi cambiare idea è provare. Questa regola per esempio:

div.{
margin: 0 0 3em 0;
padding: 0.7em 0.2em;
font-size: 1em;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
}

Può diventare molto più leggibile ordinando le regole per iniziale:

div.{
border-bottom: 1px solid #888;
border-top: 1px solid #888;
font-size: 1em;
margin: 0 0 3em 0;
padding: 0.7em 0.2em;
}

Con un sistema del genere in quale punto della regola guardereste per trovare le proprietà del background? Ovviamente in cima. E per trovare z-index? In fondo. E text-align? Poco più su.

Sembra assurdo ma un sistema del genere può far risparmiare molto tempo nel rintracciare le proprietà ed aiuta ad eveitare proprietà duplicate.

7) Non esagerare con i commenti

Aggiungere commenti nel css è sempre utile, soprattutto se lavoriamo su progetti con lunghi tempi di sviluppo o se non siamo i soli a dover modificare i files, aggiungere qualche commento è una forma di cortesia sempre gradita. E’ però utile cercare di limitare i commenti a dove siano realmente necessari, evitando sintassi simili.

/*inizio header*/
#header{}
/*fine header*/
/*inizio contenuto*/
#contenuto{}
/*fine contenuto*/

In questo caso gli id già rendono chiare le funzioni dell’elemento e sarebbe possibile omettere i commenti ma nel caso si desideri mantenere qualche suggerimento nel codice sarebbe opportuno evitare di segnalare la fine e l’inizio della regola.

/*inizio header*/
#header{}
/*inizio contenuto*/
#contenuto{}

8) Dividere le regole su più fogli di stile

Sembra una banalità ma non lo è, avere più files da caricare è sicuramente un carico maggiore in termini di richieste al server ma permette una navigazione più veloce all’utente il quale scaricherà e salverà nella cache i css delle pagine man mano che prosegue nella navigazione. Questo è positivo perchè permette di non scaricare fogli di stile per pagine che non vedremo (quindi non si utilizza banda per dati non necessari) e una volta completata la visita del sito i dati rimarranno nella cache rendendo le future visite più veloci.

9) Utilizzare le regole per internet explorer separatamente

Utilizzare i commenti condizionali è un buon modo per evitare che i comuni browser facciano una chiamata al server in più, la differenza a livello di peso è inesistente se il css è interno alla pagina ma con un css esterno è possibile risparmiare una richiesta al server e il peso del css dedicato ad internet explorer.

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" />
<![endif]-->

10) Utilizzare meglio le classi

Le classi risultano oltremodo utile per ridurre il peso del css, questo perchè una classe definisce una regola applicabile su più elementi a differenza degli id è quindi utile se nella pagina html esistono molti elementi con proprietà comuni. Ovviamente occorre fare attenzione a non esagerare aumentando il numero di classi sugli elementi e di conseguenza il peso della pagina html, un modo utile per valutare se le regole sono ben bilanciate è vedere quante regole sono definite come id e quante come classi, nel caso le prime superino le seconde è utile valutare quante volte vengono ripetuta ogni proprietà nel css.

Tag: css

  function getPageviewsByCityFeed(ProfileId) {
    var myFeedUri = scope + '/data' +
        '?start-date=2009-01-01' +
        '&end-date=2009-05-08' +
        '&dimensions=ga:country,ga:city' +
        '&metrics=ga:visits' +
        '&sort=-ga:visits' +
        '&max-results=100' +
        '&ids=ga:' + ProfileId;
    myService.getDataFeed(myFeedUri, handleMyFeed, handleError);
  }