no.hideout-lastation.com
Paradis For Designere Og Utviklere


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 .

Konklusjon

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.

Hvordan se hvert bilde noen likte på Facebook

Hvordan se hvert bilde noen likte på Facebook

La oss være ærlige, hvis du bruker Facebook, bruker du sannsynligvis det til å stalke eller spionere på vennene dine, din favoritt idol, din forelskelse (ahem, vi vet), din eks, sjefen din osv. Hvis du har en stor venneliste, Det kan være vanskelig å holde rede på hva alle andre har gjort hittil. Det e

(Tekniske og design tips)

Lag vakre graderingsoverganger med Granim.js

Lag vakre graderingsoverganger med Granim.js

Webdesign er full av skjønnhet og behagelig grensesnittdesign. Noen funksjoner er funksjonelle, mens andre er bare for show. Gradient overganger er bare for show, men de pakker ganske bra!Med Granim.js kan du bygge egendefinerte fargegradientoverganger som ser jevnt ut og mesher pent sammen med et hvilket som helst nettsted.

(Tekniske og design tips)