Le CSS Shorthand (scorciatoie) sono delle regole CSS con le quali è possibile scrive codice CSS in maniera efficace e ottimizzato.
In pratica sono delle regole che permettono di dichiarare i valori di tutte le proprietà di un selettore in una regola unica, ottimizzando lo spazio e banda, qualora ci sia molto traffico sul sito web.
Sarebbe meglio applicare queste regole a inizio lavori, al limite anche a lavori finiti durante l’ottimizzazione del codice CSS, per per gestire meglio eventuali modifiche.
Andiamo a vedere quando e come applicare le regole shorthand.
A quali proprietà posso applicare queste regole?
- Margini e Padding
- Tipologia di Carattere
- Sfondo
- Bordi
- Elenchi
Margini e Padding
Sono molteplici le metodologie per dichiarare i margini e padding di un elemento, ma dobbiamo sapere che invece di utilizzare margin-top, padding-top possiamo unificare queste dichiarazioni in una singola utilizzando le regole di cui stiamo parlando.
Ecco un esempio:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 0px;
La stessa dichiarazione possiamo scriverla in questo modo applicando le regole:
margin: 10px 15px 5px 0;
In questo caso dobbiamo ricordarci che le posizioni vanno inserire in senso orario, top, right, bottom e left.
Ovviamente se il margine fosse di 10px andremo a scrivere il nostro codice come segue:
margin: 10px;
Possiamo vedere con i nostri occhi che da 4 linee abbiamo generato solo una, più organizzata e semplice da modificare.
Tipologia di Carattere
A differenza dei margini e padding, la dichiarazione del carattere esige almeno due parametri, la dimensione e il tipo di font-family.
font-style: italic;
font-size: 1em;
line-height: 24px;
font-family: arial,verdana,sans-serif;
Anche in questo caso possiamo semplificare le dichiarazioni in una singola in questo modo.
font: italic 1em/24px arial,verdana,sans-serif;
Sfondi
La proprietà background come sappiamo gestisce lo sfondo di un elemento in CSS in un codice come questo.
background-color: #456;
background-image: url(backdrop.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 50% 50%;
Anche per la proprietà background possiamo unificare le dichiarazioni in questo modo.
background: #456 url(backdrop.gif) repeat-y fixed 50% 50%;
La struttura dei parametri da inserire in questo caso sono in ordine:
- colore: trasparente
- image: none immagine: nessuno
- repeat: repeat repeat: repeat
- attachment: scroll attachment: scroll
- position: left top (0 0) posizione: in alto a sinistra (0 0)
Bordi
Per quanto riguarda la dichiarazione dei bordi, anche in questo caso possiamo unificare in una singola rifa come segue.
border :solid;
border-width: 1px;
border-color :#000;
Diventerà con le regole CSS
border: 1px solid #000;
Elenchi
I punti elenco vengono di consueto utilizzati per la realizzazione di menu oppure catalogare informazioni.
Un codice esempio potrebbe essere il seguente:
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
Utilizzando le regole CSS Shorthand possiamo unificare il tutto in questo modo
list-style: inside circle url(bullet.gif);
Conclusione
Non utilizzare queste regole non è un errore gravissimo, ma bisogna sapere della loro esistenza, per cercare, qualora ci sia l’esigenza, di organizzare e gestire meglio il nostro foglio di stile CSS.
Sarebbe buona norma scrivere del codice CSS efficente a inizi lavori, ma non è sempre questa la procedura, nessuno ci vieta di ottimizzare il codice una volta finiti i lavori.
Scrivi un commento da Facebook