CSS Shorthand vs. Longhand - When to Use Which

Stenografia e Longhand: uno è conciso e l'altro preciso. Uno è venuto fuori per mancanza per brevità, mentre l'altro è fermo per preservare la chiarezza. In ogni caso, hanno i loro scopi, pro e contro, per così dire.

Questo post farà luce su entrambe le notazioni abbreviazioni CSS e notazioni a mano lunga, mentre si conclude che è meglio usare per quale situazione .

Qual è la proprietà di stenografia?

La proprietà stenografia è una proprietà che prende i valori per altri set di proprietà CSS. Ad esempio, possiamo assegnare un valore per border-width, border-style e border-color usando solo la proprietà border .

Fondamentalmente,

 bordo: 1px blu fisso; 

equivale a:

 larghezza del bordo: 1px; border-style: solido; border-color: blu; 

Con questo, non è necessario dichiarare valori di proprietà individuali separatamente (che è ridondante, che richiede tempo e spazio). Inoltre, ripristina le proprietà lasciate fuori nella dichiarazione, qualcosa che può essere sfruttato.

Come funziona?

Come accennato in precedenza, scriviamo una serie di altri valori di proprietà in stenografia, l'ordine non ha importanza se tutti i valori di proprietà nella stenografia sono di un tipo diverso come nel bordo . Per le proprietà con tipi simili di valori come il margine, l' ordine conta . In caso di dubbio, ricordati in senso orario!

Ora, cosa succede se perdiamo una proprietà o due nella dichiarazione? Nell'esempio sopra, diciamo che abbiamo ignorato lo border-style .

 bordo: 1px blu; 

Non saremo più in grado di vedere i bordi, non perché la proprietà di stenografia non ha funzionato, ma perché lo border-style che abbiamo tralasciato, ha ottenuto il valore predefinito none . Ecco come è stata resa la proprietà stenografica.

 bordo: 1px nessuno blu; 

Ora lasciamo 1px per border-width e manteniamo gli altri due:

 bordo: blu solido; 

Saremo in grado di vedere i bordi, solo con una larghezza più spessa e questo perché la proprietà border-width ha il valore di default medium .

 bordo: blu medio solido; 

Questo conclude per noi che quando un valore di una proprietà viene lasciato fuori in una dichiarazione abbreviata, quella proprietà assume il suo valore predefinito (anche se deve sovrascrivere qualsiasi valore precedentemente assegnato per lo stesso).

Se c'è border-width: 1px; per un elemento da qualche parte prima del border: solid blue; per lo stesso, la larghezza del bordo sarà medium (il valore predefinito), non 1px .

Un'altra cosa che vale la pena ricordare è che non possiamo usare valori come inherit, initial o unset, che sono disponibili per tutte le proprietà CSS, in notazione stenografica. Se li usiamo, il browser non sarà in grado di sapere esattamente quale proprietà dovrebbe rappresentare il valore nella stenografia - l'intera dichiarazione verrà eliminata .

all proprietà

C'è una proprietà abbreviata CSS che può impostare il valore per tutte le proprietà CSS . I valori CSS-wide inherit, initial e unset sono applicabili a tutte le proprietà e quindi questi sono gli unici valori accettati dalla proprietà all .

 div {tutto: iniziale} 

Questo farà sì che l'elemento div metta TUTTI i valori delle proprietà CSS che aveva, e resetta il valore predefinito in ognuno di essi.

⚠ Avviso

Non abusiamo di all proprietà. La necessità di ciò può sorgere solo in circostanze molto rare, quando non siamo in grado di toccare alcun codice CSS precedente di un elemento a cui desideriamo applicare questa proprietà.

Nota: il color proprietà CSS prende il valore esadecimale con la notazione abbreviata se i due numeri di valore esadecimale in ogni canale di colore sono gli stessi. Ad esempio, background: #445599; è uguale a background: #459; .

Qual è la proprietà di longhand?

Le singole proprietà che possono essere incluse in una proprietà abbreviata sono chiamate proprietà longhand. Alcuni esempi sono; background-image, margin-left, animation-duration, ecc.

Perché dovremmo usarlo?

Anche se le alternative di stenografia sono a portata di mano, hanno uno svantaggio. Ricorda all'inizio che abbiamo visto come la stenografia ha la precedenza su tutte le proprietà escluse con i loro valori predefiniti? Questo può essere un problema se il reset non è desiderato.

Prendi la proprietà di stenografia dei font, per esempio. h4 nell'elemento h4 (che ha un font-weight:bold style per browser predefinito font-weight:bold )

 font: 20px "corriere nuovo"; 

Nel codice di stenografia sopra riportato, non esiste un valore per la proprietà font-weight, quindi il font-weight:bold (stile predefinito del browser) verrà sostituito dal valore predefinito font-weight:normal sì che l'elemento h4 perda lo stile grassetto, che potrebbe non essere stato previsto.

Quindi, per l'esempio sopra, due semplici proprietà a mano lunga, font-size e font-family sono perfette.

Inoltre, l'uso di una scorciatoia per assegnare solo uno o due valori di proprietà non è molto utile . Perché dare al browser un lavoro extra per interpretare ogni singola proprietà (comprese quelle lasciate fuori) nella stenografia, quando è necessario solo uno per funzionare?

Produzione a parte, durante la fase di sviluppo, alcuni sviluppatori (in particolare i principianti) possono trovare che usare la notazione a mano lunga è molto più facile da lavorare rispetto alla stenografia per una migliore leggibilità e chiarezza .

Oggigiorno con la possibilità di codificare velocemente (con l'aiuto di strumenti come Emmet) e minification, non è necessaria un'alta affidabilità sulla stenografia, ma allo stesso tempo è molto logico digitare margin:0; . Il contesto in cui preferiamo le nostre notazioni CSS varierà e tutto ciò che dobbiamo fare è capire quale notazione funzionerà meglio per noi e quando.

Il nuovo reCAPTCHA di Google è ora invisibile

Molti di voi potrebbero avere familiarità con reCAPTCHA, il sistema che estrae i bot online chiedendo agli utenti di spuntare una casella di spunta per verificare l'utente come umano. Bene, quel sistema sta per ricevere un aggiornamento presto, visto che Google sta cercando di rendere reCAPTCHA invisibile .

(Consigli tecnici e di design)

DevTools Showdown: Edge F12 vs Firefox vs Chrome

Gli strumenti di sviluppo di Microsoft Edge, il nuovo browser predefinito di Windows 10, hanno ottenuto un design moderno e alcune nuove funzionalità rispetto al suo predecessore, gli F12 Dev Tools di Internet Explorer 11.La questione se gli strumenti di sviluppo di Microsoft Edge siano all'altezza dei loro concorrenti popolari - gli strumenti di sviluppo in altri browser moderni come Mozilla Firefox e Google Chrome - si pone naturalmente nella mente di molti sviluppatori.

(Consigli tecnici e di design)