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.

4 nye Gboard-funksjoner kommer til deg snart

Googles Gboard, en av de mest nyttige mobilnøkkelstøttene som er tilgjengelige, får en ny betaversjon. Som det er tilfellet med det meste av betaversjonen av applikasjoner, betyr dette at Gboard får noen kule nye funksjoner. Her er en liste over fem nye funksjoner som nå er tilgjengelige for beta-versjonen av Gboard 6.1 .1

(Tekniske og design tips)

13 Infographics Å Forstå Blogosfæren Bedre

Ikke for lenge siden viste vi de beste infografiene om sosiale medier som vi kunne finne på nettet. Denne gangen kommer vi til å vise deg hvordan infographics kan forbedre din kunnskap om den sammenkalt verden av blogger som vi kaller "blogosphere". Som populariteten til blogger øker, ønsker bloggere å vite hvordan de kan tegne flere folkemengder til deres innlegg eller hele nettstedet. Noe

(Tekniske og design tips)