Skrajšano CSS in Longhand - kdaj uporabljati

Stenografija in Longhand - ena je jedrnata in druga natančna. Eden je prišel iz obstoja hrepenenja po kratko, drugi pa je trdno prepričan, da ohrani jasnost. Kakorkoli, imajo svoje namene, prednosti in slabosti, tako rekoč.

Ta objava bo osvetlila tako stenografske zapise CSS kot tudi dolgoročne zapiske, pri čemer je zaključek, ki ga je najbolje uporabiti, za katero situacijo.

Kaj je kratica za nepremičnine?

Stenska lastnina je lastnost, ki vzame vrednosti za druge sklope lastnosti CSS. Na primer, lahko dodelite vrednost za meja-širina, mejni slog in obrobne barve uporabljati meje samo premoženje.

V bistvu,

 obroba: 1px polno modra; 

je enako kot:

 meja-širina: 1px; mejni slog: trdna; obrobna barva: modra;

S tem ni potrebno ločeno razglasiti vrednosti posameznih nepremičnin (ki so odvečne, časovno in prostorsko). Prav tako ponastavi izpisane lastnosti v deklaraciji, kar je mogoče izkoristiti.

Kako deluje?

Kot smo že omenili, zapišemo niz drugih vrednosti lastnosti v stenografiji, saj ni pomembno, ali so vse vrednosti lastnosti v kratkem druge vrste kot v meje. Za lastnosti z podobne vrednote kot marža, red je pomemben. Če ste v dvomih, se spomnite v smeri urinega kazalca!

Kaj pa, če v deklaraciji izpustimo lastnino ali dve? V zgornjem primeru smo rekli, da smo prezrli mejni slog.

 meja: 1px modra; 

Meja ne bomo mogli več videti, ne zato, ker stenografska lastnina ni delovala, ampak zato, ker mejni slog ki smo jih izpustili, dobil privzeto vrednost nobena. Tako je dobil to skrajšano lastnino.

 meja: 1px nobena modra; 

Zdaj pa spustimo 1px za meja-širina in ostala dva:

 obroba: modra;

Videli bomo meje, samo z debelejšo širino in to je zato meja-širina Lastnost je dobila privzeto vrednost medij.

 meja: srednje trdna modra; 

To je za nas to zaključilo ko je vrednost lastnosti izpuščena v zapisniku, ta lastnost prevzame privzeto vrednost (tudi če mora preglasiti katero koli prejšnjo vrednost, dodeljeno za isto).

Če obstaja meja-širina: 1px; za element nekje prej obroba: modra; za isto bo tudi širina meje medij (privzeta vrednost), ne 1px.

Druga pomembna stvar je to ne moremo uporabiti vrednosti, kot je podedovati, začetno ali unset, ki so na voljo za vse lastnosti CSS, v kratkem zapisu. Če jih uporabimo, brskalnik ne bo mogel natančno vedeti, katera lastnost naj ta vrednost predstavlja v kratkem - celotna deklaracija bo umaknjena.

The vse nepremičnine

Na voljo je eno skrajšano lastnost CSS nastavite vrednost za vse lastnosti CSS. Vrednosti za vse CSS podedovati, začetno in unset veljajo za vse lastnosti, zato so to edine vrednosti, ki jih sprejme vse nepremičnine.

 div all: začetno

To bo naredilo div Element izloči VSE vrednosti CSS lastnosti, ki jih je imel, in ponastavi privzeto vrednost v vsakem od njih.

. Opozorilo

Ne zlorabi vse nepremičnine. Potreba po tem se lahko pojavi le v zelo redkih primerih, ko se ne moremo dotakniti nobene prejšnje kode CSS elementa, ki ga želimo uporabiti za to lastnost..

Opomba: Lastnost CSS barve prevzame heksadecimalno vrednost s skrajšanim zapisom, če sta dve številki hex vrednosti v vsakem barvnem kanalu enaki. Na primer, ozadje: # 445599; enako kot ozadje: # 459;.

Kaj je lastnina dolgih rok?

The posamezne lastnosti ki jih je mogoče vključiti v okrajšano lastnost, se imenujejo lastnosti longhand. Nekateri primeri so: slika ozadja, rob-levo, trajanje animacije, itd.

Zakaj bi ga uporabljali?

Čeprav so skrajšane alternative priročne, imajo slabši položaj. Ne pozabite, da smo na začetku videli, kako stenografija preglasi vse izpuščene lastnosti s privzetimi vrednostmi? To je lahko težava, če ponastavitev ni zaželena.

Vzemite pisave na primer skrajšati lastnost. Uporabimo ga v h4 element (ki ima privzeti slog brskalnika font-weight: krepko)

 pisava: 20px "kurirska nova"; 

V zgornji skrajšani kodi ni vrednosti za font-weight lastnine, od tod font-weight: krepko(privzeti slog brskalnika) bo nadomestila privzeta vrednost font-weight: normalna povzroča. \ t h4 element, ki izgubi svoj krepki slog, ki morda ni bil namenjen.

Torej, za zgornji primer preprosta dva longhand lastnosti, velikost pisave in družina pisav so popolni.

Tudi z uporabo kratice za dodeljevanje samo ene ali dveh vrednosti lastnosti ni zelo uporabno. Zakaj naj brskalnik dodatno delo razlaga tako, da bo vsaka posamezna lastnost (vključno z levo) interpretirana v okrajšavah, ko je za delo potrebno le eno?

Razveljavitev proizvodnje, v fazi razvoja, lahko nekateri razvijalci (zlasti začetniki) uporabijo dolgoročno zapisovanje, s katerim je veliko lažje delati, kot pa kratice za boljša berljivost in jasnost.

Zaključek

Danes z možnostjo hitrega kodiranja (s pomočjo orodij, kot je Emmet) in minifikacije, visoka stopnja zanesljivosti na stenografiji ni potrebna, vendar je hkrati logično, da vnesete margin: 0;. Kontekst, v katerem imamo raje naše zapise CSS, se bo razlikoval in vse kar moramo storiti je, da ugotovimo, kaj bo zapis najboljši za nas in kdaj.