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.

10 mobile apper som tjener deg ekte penger og belønninger

De fleste apper krever at du bruker penger, men visste du at det er apps som kan bidra til å tjene penger i stedet? Det er riktig, gjør noen enkle oppgaver som å fullføre undersøkelser og tilbud eller til og med bare ved hjelp av en app, kan du gjøre noen få dollar.Gitt, at du ikke vil kunne leve ut av dem. Det k

(Tekniske og design tips)

10 tilfeldige fakta om Valentinsdag du sikkert ikke visste

Valentinsdag kommer snart, og obligatorisk utveksling av roser, sjokolade, middag og datoritualer begynner i midten av februar. I mellomtiden får jeg en utfordring til å skrive om 10 interessante ting jeg ikke visste om Valentinsdag.Den dårlige nyheten er at jeg ikke kan skrive om vanlige ting som hvordan Valentinsdag fikk navnet sitt eller hva fargen eller antall roser i en bukett symboliserer. D

(Tekniske og design tips)