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.
41 Commenti
Ottimo articolo grazie come al solito!
Mi sembra un’ottima tecnica per ottimizzare il codice, pensi che la userò.
Interessante davvero!!!
uso sempre css shorthand e si risparmia una notevole quantità di kb..!!! Bell’articolo come sempre julius..!!!
Ottima utility grande!!!
Grazie mi sembra una tecnica interessante e fa risparmiare effettivamente parecchio spazio…
Credo che in fase di editing sia meglio scrivere tutte le proprietà per individuare velocemente il codice da modificare.
L’ottimizzazione invece credo sia meglio farla a fine lavoro, così da incrementare le prestazioni (in termini di banda) del nostro CSS.
Come sempre un ottimo (utile)articolo
Grazie
Mi stupisce tutto questo entusiasmo.. sono anni che sviluppo così!
Mah!
@ andrew:
Andrew… non tutti sviluppano da anni ed un buon suggerimento da parte di chi ha maturato più esperienza, è sempre utile. Non credi?
credo che siete un branco di pecore sempre pronti a dire “bravo julius, ottimo articolo”, “utile e interessante”, “bellissimo” anche quando scrive minchiate di base.
Questo non è un’articolo, sono le basi del css ed è inutile che vi entusiasmate così leggendo queste 4 cazzate…se ancora non le avete imparate (e non c’è bisogno di conoscere i css da anni, sono le BASI) allora datevi a qualcosaltro, chessò…divertitevi con paint, mi sembra più appropriato!
Finora non c’è mai stato un commento costruttivo, tutti a sbavare dietro julius che dal canto suo fa bene a scrivere articoli inconsistenti, tanto voi li leggete e vi gasate pure!!!
@borkie: anche io trovo che questa tecnica sia davvero banale per chi lavora da anni come web designer, ma è anche vero che quello che è banale per noi non lo è anche per altri che magari si avvicinano al mondo del web e desgin non credi?
Anch’io sono anni che scrivo così i css, ma non per questo che snobbo articoli come questi, anzi fa sempre piacere leggere per confrontarsi.
Mi permetto di aggiungere anche questo:
padding-top:10px;
padding-right: 5px;
padding-bottom:10px;
padding-left: 5px;
si potrebbe scrivere così:
padding:10px 5px;
Io quando sviluppo scrivo direttamente in shorthand, infatti risparmio sia tempo nell’ottimizzazione finale che tempo di stesura del CSS stesso.
Soprattutto, a lavoro terminato, cerco di ridurre al minimo il mio CSS (e anche eventuali JS) con dei tool di compressione che eliminano spazi vuoti e riducono delle proprietà che magari erano sfuggite a me (es: “margin: 5px 2px 5px 2px” -> “margin: 5px 2px”)
@ Mirko:
si ma sono cose risapute di cui è pieno il web con milioni di articoli uguali a questo, sempre le stesse identiche cose, tantè che se uno è alle prime armi, invece di passare le giornate qui si potrebbe leggere le specifiche de w3c, dove sono scritte tutte queste cosine in maniera assimilabile anche da un neofita, senza aspettare che julius ci faccia per così dire “un articolo”.
@borkie: Ti posso assicurare che ci sono designer in web agency abbastanza famose che se gli dici css shorthand non sanno di cosa parli…
Per questo secondo me Julius è libero di scrivere quello che vuole sul suo blog, e ribadisco, le cose che noi diamo per scontato non sono sempre le stesse degli altri…
Mirko ha scritto:
….ci sono webdesigner che non sono webdesigner
per il resto ho la strana sensazione che julius vi tenga in una sorta di limbo della conoscenza, spiegandovi di tanto in tanto qualcosa, stuzzicandovi la curiosità con le sue classifiche di roba figa, mettendovi le classiche pulci nell’orecchio, per poi spillarvi bei soldi ad uno dei suoi workshop!!
@borkie ha scritto:
Non penso che tutti i web designer del mondo pendino dai post di Julius, lui condivide ciò che desidera…
Non sono mai stato ai suoi workshop e quindi non ti posso dire se sono validi o no, ma da quanto si legge pure da chi ci partecipa non sembra fuffa… e poi nessuno viene costretto a partecipare!
@ Mirko:
ti faccio notare che hai sbagliato a quotare, io non ho detto quello ;)
cmq se uno è webdesigner non penso stia qui a leggersi questi articoli, e comunque sia se julius è libero di scrivere quello che gli pare, pure io dovrei essere libero di esprimere la mia opinione
borkie ha scritto:
Da chi lo segue non si direbbe, anche io sono un web designer e molte volte mi ha dato spunti interessanti…
Siete sempre a criticare, non vi piace il blog di julius non leggetelo no, è semplice…
Poi mi fa molto ridere che tutta la gente che lo critica non si rivela mai con un nome e congome o link, avete paura? E poi di cosa?
Andate a lavorare che è meglio….
@ Guido:
to, mi rivelo con un nome e cognome:
Borchiellini Andrea
andrea.borchiellini@gmail.com
http://www.facebook.com/andrea.borchiellini
ora è meglio guido?? posso così esprimere la mia opinione o vuoi pure il numero di cell??
Ognuno ha le proprie opinioni, e può esprimersi come vuole senza esagerare…
@ Mirko:
non mi sembra di aver esagerato!
borkie ha scritto:
Ciao Andrea, ti invito ufficialmente alla terza edizione del mio workshop a Padova il 12 Febbraio gratuitamente per farti ricredere di ciò che dici…
Se ti fa piacere partecipare registrati pure su http://gowebdesign.it/registrati/
Un saluto
Julius ti posso criticare pure io?
@ Julius:
ti ringrazio molto per l’offerta ma non credo di poter accettare
Borkie, in realtà la storia è andata così. Quando Julius ha cominciato a scrivere non se lo filava nessuno. Allora decise di fare un piccolo contest (e ti posso assicurare che è stato uno dei primi a lanciare i contest online in Italia) in cui diceva (me lo ricordo ancora): “A tutti coloro i quali commenteranno quest’articolo regalerò un e-book”.
L’articolo parlava di tabelle e accessibilità.
Ci furono circa 300 commenti e tutti ricevettero l’e-book tramite mail. Nessuno sapeva però che quell’allegato in realtà conteneva un virus che lobotomizzato il computer e poi, per via indiretta, anche l’utilizzatore. Di conseguenza adesso siamo tutti vittime di un suo meschino trucco. Potrebbe pubblicare anche un articolo vuoto! Per noi sarebbe comunque un gran bel pezzo!
@ Gianluca:
c’è del vero in ciò che dici:
Gianluca ha scritto:
è proprio quello che succede
Borkie, probabilmente adesso mi staranno cercando.. gli amici di julius.. forse questo sarà l’ultimo messaggio. Ragazzi è così.. siamo stati lobotomizzati.. ma vi posso garantire che una soluzione c’è.
Ecco.. in questa fase del messaggio dovrei scrivere:
“seguite il blog di Borkie, lui ha la soluzione giusta” ma non posso, svelerei un’azione di guerrilla marketing a supporto dell’attività di Borkie.. opss.. scusate.. l’ho detto.. cavolo.. ora mi licenzieranno di nuovo!!! Lo sapevo… questa è già la quarta volta che smonto una campagna viral!!!!!
@ Gianluca:
cmq se ci fai caso io non ho fatto nessuna pubblicità a questo o quello, e non vi ho nemmeno detto di non seguire questo blog, ho semplicemente consigliato di leggersi le specifiche e le guide del w3c. E se permetti, di questo, a me non ne viene proprio niente.
Ohu ma che casinooooo!!!!Eddaiii piantatela di commentare piuttosto vi ricordo che chi risica non rosica!
A proposito di codice CSS: c’è un limite di peso che deve avere il file si stile?
Comunque mi sa che devo utilizzare anch’io questi metodi che, tra l’altro, ho sempre saputo ma mai praticato. :D
Bisogna dire che la discussione si è comunque fatta interessante.
Se qualcuno si crede un campione di CSS ed è in zona MILANO può proporsi, non sto parlando con nessuno in particolare, sto solo Spammando un articolo correlato con la ricerca che sto svolgendo in questi giorni: http://crebs.it/jobs/view/web-producerdeveloper-xhtmlcss
Borkie….
Julius e’ un esempio perfetto di come anche in Italia un ragazzo ben determinato possa , usando la rete, crearsi un’immagine, un nome , in tutto sommato breve tempo e a livello piu’ che nazionale.
Neanche a me piace piu’ di tanto questo blog in se per se, ma e’ ridicolo non vederlo come un esempio perfetto di come si possa usare la rete per farsi in modo piu’ che elegante e conveniente anche per molti altri, i propri interessi.
Questo blog non presenta praticamente mai qualcosa di originale in se nel contenuto, perlomeno non ricordo di aver mai letto nulla di “originale” classicamente inteso, insomma non approfondisce mai, ovviamente potrei sbagliarmi non avendolo davvero studiato regolarmente, e in tal senso non cresce di una riga, ma e’ indubbio che e’ una miniera di IDEE sul come si possa condurre un blog del genere, chiarissimamente , e penso di non offendere nessuno “commerciale” (in senso “lato”) e finalizzato , giustamente, alla coltivazione prima di tutto della propria immagine.
In altre parole Julius da un esempio di marketing assolutamente UNICO in Italia e in grado di far impallidire schiere di mammasantissima che , e quelli si… spennano polli (ma contenti loro contenti tutti) disposti persino a pagare per farsi raccontare “come si fa” , ma a far che? A fare quello che vende il “come si fa”?
Come mai sei qui e come mai hai deciso di “investire” tanto tempo per “spiegare” la tua posizione? Che te ne viene? ma soprattutto
SE JULIUS IN QUESTO ARTICOLO HA RICORDATO , ed e’ verissimo… banalita’ delle quali il web e’ pieno, TU di fatto
CHE HAI DATO?
Il web e’ prendere si..ma anche DARE, poco , tanto ma sempre anche DARE, diversamente tu, noi non saremmo di sicuro qui a scrivere se avessimo dovuto aspettare che fosse la “scuola ufficiale” a dirci come fare…
su
quando vengono certe “scalmane” che purtroppo , e magari non te ne rendi conto ma sanno maledettamente di cattiva quanto squallida invidia… non volermene… E’ COSI…
fermati un attimo , puoi anche farne a meno di “commentare” se non hai nulla di alternativo da proporre, prova a rifletterci….
questo
e’
solo
un
blog
cazzo ci entra la citazione del W3? Sara’ mica quello il tuo “contributo alternativo”? mah’… mah…..
@ Neck:
caro neck, sappi che la mia ambizione non è gestire un blog del genere e che la mia “invidia” vola altrove, sicuro lontano da qui.
Detto ciò tengo a precisare che il mio primo commento a questo articolo si rivolgeva non a julius che gestisce il blog ma ai “pecoroni” che si entusiasmano e si gasano per qualsiasi cosa qui scritta come se fosse la maggior novità del millennio. Osservando queste reazioni mi è venuto in mente che forse questi “aspiranti webdesigner” non conoscessero le specifiche e le guide del w3c relative ai css e html vari, che sono le basi di questo lavoro (o passione) e che è bene che tutti conoscano.
Il mio contributo ad un web migliore non è sicuramente questo, era un semplice consiglio. Non vado in giro a vantarmi o a pubblicizzarmi e, se dovessi farlo, non lo farei sicuramente in questo modo, affermando che i miei tutorial sono meglio di quelli o bla bla bla in un sito non mio.
Detto ciò, caro neck, il mio contributo è più che presente in rete e spazia oltre il webdesign analizzando soprattutto altre questioni che per correttezza non ti sto qui ad elencare.
Borkie
porta pazienza se non mi sono spiegato bene… mi riferivo al tuo contributo QUI, nel contesto di questi commenti e non in rete…
non mi sfiora nemmeno per sbaglio l’idea di indagare cosa scrivi o che tipo di contributi metti in rete e ci mancherebbe altro…
Tu dici che e’ altrove che ritieni di poter invidiare qualcosa… io penso che forse confondi l’ammirazione con l’invidia e chi si ammira difficilmente lo si invidia… occhio… di solito l’invidia scatta proprio nei confronti di chi ottiene risultati non ritenuti adeguati all’offerta che fa e soprattutto comparati ai propri ,sempre in rapporto agli sforzi… SPESSO non ci si accorge nemmeno e altrettanto spesso non e’ da considerare un male assoluto , MA CI SI FA MALE a livello d’immagine e soprattutto quando e’ evidente, io direi in questo caso, e proprio dalla tua risposta, evidentissimo.
———–
Per quanto ti possano sembrare “roba d’acqua bassa” gli utenti di questo blog, o meglio chi ha commentato il post (ok, gli articoli sono tuttaltra cosa , su questo non ci piove ma penso che lo sappia anche Julius e lo sappiano anche i suoi “fedelissimi” ) , io penso che sia assolutamente assurdo che non sappiano dell’esistenza del W3, delle specifiche del W3 , della stessa scuola del W3 che ovviamente e non puo’ sfuggire a nessuno , parla subito delle scorciatoie e a chiusura di ogni dispensa in ambito CSS…
ma questo non significa assolutamente nulla se cerchi di inquadrare il POST nel contesto del blog… E QUESTO ASPETTO E’ FONDAMENTALE se si vuol tentare un’analisi.
http://www.963.it/2010/04/30/css-efficienti-con-luso-delle-shorthand/ e’ gia’ una faccenda diversa ( O DIO…) , ma questo penso che lo sappiano o scoprano anche gli utenti ai quali piace fondamentalmente VENIRE A TROVARE JULIUS e lasciargli SOPRATTUTTO un segnale di presenza… OCCHIO… vedi un o’ di analizzare questo segnale che spesso e’ fatto di “mi serviva proprio”, “era quello che cercavo”, “grande Julius” , E POI PERO’ prova a mettermi qui (e’ un invito serio) qualcosa di simile a livello NUMERICO e soprattutto CONTINUATIVO, in ambiti di blog che trattano la “materia” che tratta Julius… vai tranq, se tu conosci la rete io non penso proprio di essere un neofita em em…. e sono sicuro che non troverai nulla di paragonabile IN ITALIA….
ovviamente considero non il solo blog ma tutto l’arsenale che ha saputo costruirgli attorno… incredibile… ma vedi un po’ cosa ti combina e come lo combina alla grande questo, con quella faccia da pirla li che non gli darei un euro! haha!
———-
Sto ancora celebrando Julius? No… solo di riflesso, di fatto sto osservando e con piacere i suoi affezzionati perche’ a me appaiono semplicemente come parte di questo Blog e in un modo che ho visto solo qualche volta, ma per e con argomentazioni meno “pratiche” in tempi di web1 e piu’ che altro in ambiti “forum”.
Se tanta gente, occhio… TANTISSIMA GENTE… giornalmente ritiene opportuno aprire questo blog, e MOLTA GENTE ritiene anche di contribuire anche solo con un ciao… e perche’ ha captato che fa parte della splendida avventura di un ragazzo che dopo una preparazione che sono pronto a scommettere fatta del classico annetto di corso generico non so a quale livello, ma si sa a quali livelli sono e son sempre stati dalle nostre parti, nord come sud o centro e pure le isole…… ha capito che era direttamente dalla rete che poteva e doveva attingere, e a differenza di molti altri con i quali non sembra mai essere in competizione…. ha continuato a crescere .Con cio’ non mi sfiora nemmeno l’idea che si stia scrivendo sul blog di un genio e nemmeno di una persona particolarmente dotata, e ancora id meno su di un blog dove si possa imparare chissa che cosa, semplicemente un ottimo elemento che certissimamente fara’ (e penso faccia gia’ ) del design orientato al web la sua vita e che vale certamente la pena di seguire per poter apprendere lezioni, quelle si, di come , ripeto… si possa usando la rete , e anche partendo da presupposti minimi e da attitudini non particolarmente eclatanti , costruirsi un’immagine vincente che assolutamente non significa vendere “fumo” ,anche se non so i costi di Julius, ma sono sicuro che ha i piedi ben piazzati a terra , anche se la testa e’ un po’ sulle nuvole, e’ un webdesigner nato… su questo pero’ non ci piove… un programmatore non lo diventera’ mai ,nemmeno sotto tortura, e nemmeno un esperto di flash… cosa che era molto probabilmente tra i suoi sogni iniziali, e basta leggere il blog dall’inizio….
Come vedi sto ritornando a Julius, ma e’ impriscindibile, se si vuole “analizzare” (io pero’ non l’ho mai fatto non ritenendo la cosa in se cosi importante ) l’utenza di questo blog, e detto tra noi… e’ molto meno omogenea di quanto immagini… anche se non traspare dai commenti del post in questione…
Detto cio’ con un sorriso… ci tengo a precisare che assolutamente non sono il nonno di Julius e nemmeno un suo parente, amico, conoscente, allievo o amenita’ del genere, sono solo , e deve bastare, uno che sul web e con il web ci vive e bene (ma non e’ il caso di dimostrare) da tanti anni, davvero tanti … almeno 12 (intesa come partita iva) ..
Ciao e auguroni.
@ Neck:
dato che sono le 2:32 di domenica mattina, non me la sento di rispondere a tutto il tuo post, ma tenderei a precisare una cosa.
Il tuo discorso sull’invidia è molto preciso ed incisivo, ma di sicuro non si addice a me (soprattutto in questo caso), fidati….lo ripeto per l’ultima volta, io mi riferivo solamente a quegli utenti che commentano come se avessero scoperto l’acqua calda leggendo queste righe, non voglio ne ho mai voluto mettere in dubbio le capacità di julius o la sua persona.
e poi, non è w3 come hai scritto tu, ma w3c ;)
Credo che a molti di noi non interessino questo tipo di interventi.
se uno apprezza l’articolo è libero di fare i complimenti, se uno non apprezza può esprime il suo dissenso con educazione, è assurdo criticare i complimenti che fanno gli altri…. tanto più se chi critica è lui stesso un autore di blog…:(((((((
Premesso che:
spesso rincorriamo le cose inutili lasciandoci sfuggire quelle necessarie.
domando perchè alcune persone continuano a denigrare o sminuire certi argomenti e luoghi, per poi trovarsi sempre li per parlarne?
come se dicessi che l’acqua non mi piace perche trasparente e insipida e mentre lo dico ne sorseggio un po.
cercare su Wikipedia: COERENZA.
PS
Pro Julius
fantastica la discussione i miei complimenti ai partecipanti….naturalmente avete tutti ragioni ma non ve ne siete resi conto.
conoscere lo standard w3c penso sia giusto per quanto inutile visto che poi i siti di un “certo spessore” qualitativo tecnico ecc ecc a volte se ne fregano tanto funziona lo stesso.
Di certo non credo si “nasca imparati, ho capito quello che dice brookie, forse poteva evitare di usare il termine “pecoroni”,per identificare la gente che in gregge osanna (a suo dire) qulasiasi post di Julius, ma c’è anche da dire che che dire chi non conosce queste tecniche non è un webdesigner è un pò esagerato …. io le conosco perchè ho avuto la fortuna di averle studiate per i fatti miei, non sempre le uso, dire che non si è webdesigner per questo mi sembra ridicolo.
Io ho trovato molte cose utili nei post di julius e non sono cose che non sapevo, ma semplicemente le ha rinfrescate.
Anche io rimango un pò stupito quando leggo di applusi a post che parlano di come affrontare un cliente…..però deduco che gli applausi siano dei neofiti di questo lavoro……voglio sperare che uno che lo fà da 3 anni non abbia bisogno di quel post….forse di un consiglio ma non l’intera guida “10 punti per portare a casa il cliente”.Suvvia siamo elastici
giuseppe ha scritto: