CSS Shorthand vs Longhand - Når skal du bruke det

Shorthand og Longhand - en er konsis og den andre presis. En kom til eksistens ut av ønsket om korthet, mens den andre står fast for å bevare klarhet. Uansett har de sine formål, fordeler og ulemper, så å si.

Dette innlegget vil skinne litt på både CSS shorthand noteringer og longhand notasjoner, mens konklusjonen som er best å bruke for hvilken situasjon .

Hva er Shorthand Property?

Shorthand-egenskapen er en egenskap som tar verdiene for andre sett med CSS-egenskaper. For eksempel kan vi tilordne en verdi for border-width, border-style og border-color ved hjelp av border alene.

I utgangspunktet,

 grense: 1px solid blå; 

er det samme som:

 kantbredde: 1px; border-style: solid; border-farge: blå; 

Med dette trenger vi ikke å deklarere individuelle eiendomsverdier separat (som er overflødig, tid- og plasskrevende). Den tilbakestiller også de utelatte egenskapene i erklæringen, noe som kan utnyttes.

Hvordan virker det?

Som tidligere nevnt, skriver vi et sett andre verdier i stenografi, ordren spiller ingen rolle om alle eiendomsverdiene i stenografi er av en annen type som i grensen . For eiendommer med lignende typer verdier som margin, betyr ordren ingen rolle . Når du er i tvil, husk med urviseren!

Nå, hva om vi savner en eiendom eller to i erklæringen? I eksemplet ovenfor, la oss si at vi ignorerte border-style .

 grense: 1px blå; 

Vi vil ikke kunne se grensene lenger, ikke fordi shorthandegenskapen ikke fungerte, men fordi border-style vi utelatt, fikk standardverdien none . Dette er hvordan den shorthand eiendommen ble gjengitt.

 grense: 1px ingen blå; 

La oss nå slippe 1px for 1px og holde de to andre:

 grense: solid blå; 

Vi kan se grensene, bare med tykkere bredder, og det er fordi egenskapen for kantbredde har standardverdien.

 grense: medium solid blå; 

Dette konkluderer med at når eiendomsverdien utelates i en kortskrivningsdeklarasjon, tar den egenskapen sin standardverdi (selv om den må overstyre en tidligere verdi som er tildelt for det samme).

Hvis det er border-width: 1px; for et element et sted før border: solid blue; For det samme vil grensebredden være medium (standardverdien), ikke 1px .

En annen ting som er verdt å nevne er at vi ikke kan bruke verdier som inherit, initial eller unset, som er tilgjengelige for alle CSS-egenskapene, i kortfattet notasjon. Hvis vi bruker disse, vil nettleseren ikke kunne vite nøyaktig hvilken egenskap den verdien skal representere i kortvisningen - hele erklæringen vil bli droppet .

Den all eiendommen

Det er en CSS shorthand egenskap som kan sette verdien for alle CSS egenskaper . CSS-brede verdier inherit, initial og unset gjelder for alle egenskapene, og derfor er disse de eneste verdiene som aksepteres av all eiendommen.

 div {all: initial} 

Dette vil gjøre div elementet avgrøft alle CSS-egenskapverdiene det hadde, og tilbakestille standardverdien i hver av dem.

⚠ Advarsel

La oss ikke misbruke all eiendommen. Behovet for det kan oppstå bare i svært sjeldne tilfeller når vi ikke kan røre noen tidligere CSS-koden til et element som vi ønsker å bruke denne egenskapen til.

Merk: CSS-egenskapsfarge tar heksadesimal verdi med kortblokknotasjon dersom de to tallene av hex-verdi i hver fargekanal er det samme. For eksempel background: #445599; er det samme som background: #459; .

Hva er longhand eiendom?

De enkelte egenskapene som kan inkluderes i en stenografi, kalles langhendige egenskaper. Noen eksempler er; background-image, margin-left, animation-duration, etc.

Hvorfor skal vi bruke den?

Selv om shorthand alternativer er hendige, har de en ulempe. Husk i begynnelsen så vi hvordan stenografi overstyrer eventuelle utelatte egenskaper med standardverdiene sine? Dette kan være et problem hvis tilbakestillingen ikke er ønsket.

Ta for eksempel font . La oss bruke den i h4 elementet (som har en standard nettleser stil font-weight:bold )

 font: 20px "courier new"; 

I den ovennevnte korthandskoden er det ingen verdi for font-weight, og derfor vil font-weight:bold (standardinnstillingene for nettleseren) overstyres av standardverdien font-weight:normal forårsaker at h4 elementet mister sin dristige stil, som kanskje ikke har vært ment.

Så, for eksempelet ovenfor er det enkelt to longhand-egenskaper, font-size og font-family perfekt.

Også ved bruk av stenografi for å tilordne bare en eller to eiendomsverdier er det ikke særlig nyttig . Hvorfor gi nettleseren ekstra arbeid for å tolke hver enkelt eiendom (inkludert de venstre utgående) i stenografi, når bare en er nødvendig for å jobbe?

Produksjon til side, under utviklingsstadiet, kan noen utviklere (spesielt nybegynnere) finne ved hjelp av longhand notering mye lettere å jobbe med enn kortskrift for bedre lesbarhet og klarhet .

I dag med mulighet for rask koding (ved hjelp av verktøy som Emmet) og minifisering, er det ikke nødvendig med høy pålitelighet på stenografi, men samtidig er det mye logisk å skrive margin:0; . Konteksten der vi foretrekker våre CSS-notater, vil variere, og alt vi trenger å gjøre er å finne ut hvilken notasjon som fungerer best for oss og når.

Collab on Code - En fri Cloud IDE for koding med flere personer

Arbeide i skyen har blitt normen for mange utviklere. Du har rikelig med sky IDEer å jobbe med, og de fleste av dem har funksjoner som rivaler desktop redaktører.Men få programmer har noen form for samarbeidsmodus der du kan redigere kode med andre.Collab on Code gjør dette til en realitet med deres gratis nettleserbaserte kodeditor. Al

(Tekniske og design tips)

Samsung stopper endelig Galaxy Note 7-produksjonen

Hvis du har holdt opp med nyhetene, ville du vite at Samsungs nyeste smarttelefon, Galaxy Note 7, har hatt et eksplosivt problem . Dette problemet skulle korrigeres av det koreanske selskapet som erstatter den eldre, defekte Note 7s med en "sikrere" versjon av telefonen. Dessverre gikk det ikke så bra som Samsung har planlagt da rapporter kommer i at erstatningen eksploderer også .S

(Tekniske og design tips)