Recentemente, ho deciso che avevo bisogno di un aggiornamento in tutte le varie proprietà stenografiche dei CSS. Il modo migliore per imparare qualcosa è insegnarlo, quindi ecco il mio tentativo esattamente.
Oggi impareremo come usare la stenografia CSS per sfondi, margini e padding, bordi, caratteri, list-styles e transizioni.
sfondo
Le immagini di sfondo CSS sono uno dei luoghi più comuni in cui vedo la stenografia CSS implementata. Ci potrebbe essere un po 'più di funzionalità qui però di cui la gente ne approfitta. Iniziamo con un tipico esempio del modo normale di dichiarare uno sfondo.
Sfondo: la lunga strada
Stenografia di base
Da qui, molti di noi sanno come prendere queste tre proprietà e gettarle tutte all'interno della proprietà di sfondo. Controlla quanto spazio risparmia.
Attaccamento e posizione
Altre due proprietà che non vedi nella stenografia come spesso sono la posizione e l'allegato. Proprio come un ripasso, diamo un'occhiata a cosa sono questi due.
Background-attachment si riferisce a se l'immagine di sfondo scorrerà o meno con la pagina o meno. Il valore predefinito è scorrere, il che significa che perderà di vista l'immagine mentre scorri la pagina proprio come fai con il resto del contenuto. Se lo cambi a fisso, lo sfondo rimarrà esattamente dove è, mentre il resto del contenuto scorre sopra di esso.
Background-position si riferisce a dove l'immagine è posizionata all'interno dell'elemento. Puoi usare qualcosa di generico, come sinistra in alto, in basso a destra o al centro centro, o qualcosa di più specifico come una percentuale o un valore di pixel.
Ecco la versione lunga con questi due gettati in.
Prendi nota dell'ordine qui perché useremo lo stesso ordine nella versione abbreviata:
- colore di sfondo
- immagine di sfondo
- background-repeat
- background-attachment
- background-position
Stenografia di sfondo con tutti e cinque i valori
Qui li buttiamo tutti nel rispetto dell'ordine che abbiamo appena delineato. Sentiti libero di abbandonare qualcuno di loro per tornare ai valori predefiniti.
Margine e imbottitura
Un altro posto che hai senza dubbio visto una stenografia è nei margini e nel padding. Qui funziona esattamente allo stesso modo per entrambi, quindi fornirò degli esempi di margine e potrai applicarlo da solo al padding.
Margine: la lunga strada
Qui abbiamo il modo normale per impostare i tuoi margini. Ho impostato ognuno a un valore arbitrario, le parti importanti da prendere in considerazione sono l'ordine e il fatto che sono tutti diversi. Entrambe influenzeranno la stenografia.
Stenografia del margine
Dichiarare i margini in stenografia è una tecnica piuttosto versatile che consente di risparmiare molto spazio, indipendentemente da come lo si fa. Fondamentalmente, ti basta buttare tutti i tuoi valori direttamente in fila nella proprietà del margine.
L'ordine qui è molto importante. Per ricordare come funziona, pensa a un orologio. Inizia in alto e ruota in senso orario, colpendo ogni bordo. Il primo è margin-top, quindi margin-right, margin-bottom e margin-left.
Dichiarare tutte le proprietà del margine per essere uguali è ancora più semplice. Se immetti un solo valore, verrà applicato a ogni proprietà. Il codice seguente genererà un margine di 10px su ogni lato.
Ora, diciamo che in realtà hai solo due valori diversi con cui vuoi lavorare, il che significa che i margini superiore e inferiore avranno un valore e quelli sinistro e destro ne avranno un altro. Per impostazione predefinita, quando si dichiara il margine superiore della stenografia, la parte inferiore corrisponderà e quando si dichiara il margine destro stenografico il lato sinistro corrisponderà.
Ciò vale anche quando dichiari anche tre valori. Quindi il codice seguente imposterà manualmente il margine superiore, destro e inferiore mentre la sinistra verrà automaticamente afferrata da destra.
Border: The Long Way
Border ha tre proprietà principali: larghezza, stile e colore. Questi sono scritti singolarmente come segue:
È possibile fondere un po 'l'ordine di queste proprietà quando si passa alla versione abbreviata, ma è meglio tenerlo in questo ordine standard per garantire la completa compatibilità.
Stenografia di confine
Ecco la versione abbreviata di queste tre proprietà del bordo.
Un'altra cosa che puoi fare con i bordi è dichiarare ogni lato del confine in modo diverso. Qui possiamo vedere la formattazione del bordo abbreviato ancora al lavoro, solo in ognuno individualmente.
In alternativa, puoi scegliere come target una delle tre proprietà del bordo e applicarle in senso orario proprio come fece con la stenografia del margine. Si noti come la seconda dichiarazione di larghezza sovrascrive la prima.
Quanto segue ci darà un bordo rosso fisso che è 2px in alto, 4px a destra, 8 px in basso e 16px a sinistra.
Allo stesso modo, questo ci darà un bordo solido 5px che è blu in alto e in basso e rosso a sinistra ea destra.
Descrivi la stenografia
Non voglio passare troppo tempo sulla proprietà del profilo semplicemente perché il supporto non è eccezionale e probabilmente non lo utilizzi quasi mai. Il vantaggio è che, a differenza del bordo, i contorni non influiscono sul layout. Se ti ritrovi a utilizzare outline, la sintassi è molto simile a quella dei bordi.
Quanto segue rappresenta i valori per outline-width, outline-style e outline-color in questo ordine.
Font: The Long Way
Ci sono un sacco di diverse proprietà dei font che puoi modificare per modificare l'aspetto della tua tipografia. Di conseguenza, il tuo foglio di stile può riempire rapidamente blocchi di stili come quello qui sotto.
Stenografia dei font
La stenografia dei font è un battitore molto pesante per quanto riguarda lo spazio risparmiato. Possiamo prendere tutte le informazioni di cui sopra e inserirle in una riga breve e sorprendentemente facile da leggere.
La maggior parte delle volte, ciò che avrai sarà probabilmente molto più breve semplicemente perché non avrai bisogno di tutte queste opzioni di stile. Puoi mollare lo stile, la variante e il peso del font e dichiarare semplicemente una dimensione, altezza e famiglia di font veloci.
Liste: la lunga strada
La stenografia delle liste è davvero interessante perché raramente vedo qualcuno che scherza con queste proprietà. Se sei un maestro di lista, potresti utilizzare le tre proprietà di stile elenco di seguito.
Elenco Stenografia
Questo è abbastanza prevedibile, basta lanciare queste tre proprietà in stile lista? e sei a posto.
Transizioni CSS3: la lunga strada
Le transizioni CSS3 sono ovviamente ancora piuttosto nuove e quindi il supporto è diverso tra i vari browser. Qui useremo transizione ma probabilmente lo spezzeresti -webkit-transizione, -moz-transizione, e -o-transizione anche.
Ecco le proprietà di base elencate una alla volta:
Stenografia di transizione CSS
Questa è una proprietà in cui si vede quasi sempre la stenografia usata al posto della versione lunga. Se hai mai fatto transizioni CSS probabilmente hai più familiarità con la sintassi di seguito.
E, naturalmente, come accennato in precedenza, poiché i browser non sono ancora abbastanza uniformi su questo devi includere quei brutti prefissi di venditore. Ecco un tipico esempio del codice che useresti per una transizione con la massima compatibilità (IE è ancora lasciato fuori).
Conclusione
La stenografia CSS è uno strumento fantastico per risparmiare tempo e spazio. Se si ha familiarità con la sintassi, si potrebbe sostenere che la stenografia è in realtà più leggibile rispetto alla versione lunga. Tuttavia, per i neofiti, è molto più semplice leggere le proprietà etichettate, quindi tieni a mente quale sia il tuo obiettivo e il tuo pubblico per un determinato progetto. Se stai scrivendo un tutorial, potresti voler elencare i singoli valori o almeno spiegare la tua stenografia, in produzione sebbene la stenografia funzioni perfettamente.
Lascia un commento qui sotto e facci sapere quali proprietà generalmente usi la stenografia e se hai imparato qualcosa dagli esempi sopra.