CSS kratica vs Longhand - kada koristiti koji

Kratki i dugi - jedan je koncizan, a drugi precizan. Jedan je došao do postojanja iz želje za sažetošću, dok je drugi čvrsto spreman očuvati jasnoću. U svakom slučaju, imaju svoju svrhu, za i protiv, da tako kažemo.

Ovaj post će zasvijetliti i na CSS stenografskim oznakama i na dugoročnim notacijama, a zaključak koji je najbolje koristiti za koju situaciju.

Što je skraćeno vlasništvo?

Skraćeno vlasništvo je svojstvo koje uzima vrijednosti za druge skupove svojstava CSS-a. Na primjer, možemo dodijeliti vrijednost za border-width, border-style i border-color koristiti granica samo vlasništvo.

U osnovi,

 obrub: 1px plavi; 

isti je kao:

 granica-širina: 1px; granični stil: čvrst; rubna boja: plava;

S tim, ne moramo zasebno deklarirati pojedinačne vrijednosti imovine (što je suvišno, troši vrijeme i prostor). Također vraća izostavljena svojstva u deklaraciji, nešto što se može iskoristiti.

Kako radi?

Kao što smo već spomenuli, zapisujemo skup vrijednosti drugih svojstava u skraćenom redoslijedu, redoslijedom nije važno jesu li sve vrijednosti svojstava u skraćenom obliku su drugačije vrste kao u granica. Za nekretnine s slične vrijednosti kao margina, red je važan. Kada ste u nedoumici, sjetite se u smjeru kazaljke na satu!

Što ako propustimo nekretninu ili dvije u izjavi? U gornjem primjeru, recimo da smo ignorirali border-style.

 granica: 1px plava; 

Više nećemo moći vidjeti granice, ne zato što skraćeno vlasništvo nije funkcioniralo, nego zato što border-style što smo izostavili, dobili smo zadanu vrijednost nijedan. Tako je to skraćeno vlasništvo doneseno.

 granica: 1px plava; 

Sada ćemo ispustiti 1 piksel za border-width i zadrži ostala dva:

 rub: čvrsto plavo;

Moći ćemo vidjeti granice, samo s debljom širinom i to je zbog toga border-width svojstvo je dobilo zadanu vrijednost srednji.

 granica: srednje čvrsta plava; 

To za nas to zaključuje kada je vrijednost imovine izostavljena u skraćenici, to svojstvo poprima svoju zadanu vrijednost (čak i ako mora nadjačati bilo koju prethodnu vrijednost dodijeljenu za istu).

Ako ima granica-širina: 1px; za element negdje prije rub: čvrsto plavo; za istu će biti i granica srednji (zadana vrijednost), ne 1 piksel.

Još jedna stvar koja je vrijedna spomena je to ne možemo koristiti vrijednosti poput nasljediti, početni ili postavi, koji su dostupni za sva svojstva CSS-a, u skraćenoj notaciji. Ako ih koristimo, preglednik neće moći točno znati koje je to svojstvo u skraćenici - cijela deklaracija bit će odbačena.

svi svojstvo

Postoji jedno CSS skraćeno svojstvo koje može postavite vrijednost za sva svojstva CSS-a. CSS-vrijednosti nasljediti, početni i postavi se primjenjuju na sva svojstva i stoga su to jedine vrijednosti koje prihvaća svi svojstvo.

 div all: početno

To će učiniti div element koji odbacuje SVE vrijednosti CSS svojstava koje je imao, i resetira zadanu vrijednost u svakom od njih.

. Upozorenje

Nemojmo zloupotrijebiti svi nekretnine. Potreba za njom može nastati samo u vrlo rijetkim slučajevima, kada ne možemo dotaknuti prethodni CSS kod elementa koji želimo primijeniti na ovo svojstvo.

Bilješka: CSS svojstvo boja uzima heksadecimalnu vrijednost sa skraćenicom ako su dva broja hex vrijednosti u svakom kanalu boje isti. Na primjer, pozadina: # 445599; ista je kao pozadina: # 459;.

Što je dugotrajna imovina?

pojedinačna svojstva koje se mogu uključiti u skraćeno svojstvo nazivaju se dugotrajna svojstva. Neki primjeri su: pozadinska slika, margin-left, animacije-trajanje, itd.

Zašto bismo ga koristili?

Iako su skraćene alternative praktične, one imaju nedostatak. Sjetite se na početku da smo vidjeli kako stenogram nadjačava sva izostavljena svojstva s njihovim zadanim vrijednostima? To može biti problem ako resetiranje nije poželjno.

Uzmi krstionica skraćeno svojstvo, na primjer. Iskoristimo ga u H4 element (koji ima zadani stil preglednika font-weight: podebljano)

 font: 20px "kurirski novi"; 

U gornjem skraćenom kodu nema vrijednosti za font-weight imovine, otuda i font-weight: podebljano(zadani stil preglednika) bit će poništen zadanom vrijednošću font-weight: normalna uzrokujući. \ t H4 izgubiti svoj hrabar stil, koji možda nije namijenjen.

Dakle, za gornji primjer jednostavna dva dugotrajna svojstva, veličina fonta i font-family su savršeni.

Također, za skraćivanje dodjeljivanje samo jedne ili dvije vrijednosti svojstava nije vrlo korisno. Zašto dati pregledniku dodatni rad za interpretiranje svake pojedine nekretnine (uključujući one koje su izostavljene) u skraćenom obliku, kada je potreban samo jedan za rad?

Osim toga, tijekom razvoja, neki razvojni programeri (osobito početnici) mogu s dugoročnim zapisima lakše raditi nego sa skraćivanjem bolja čitljivost i jasnoća.

Zaključak

Danas s mogućnošću brzog kodiranja (uz pomoć alata kao što je Emmet) i minification, visoka pouzdanost na stenografiji nije potrebna, ali je u isto vrijeme mnogo logično upisati margin: 0;. Kontekst u kojem preferiramo CSS oznake razlikovat će se i sve što trebamo učiniti je shvatiti što će notacija najbolje funkcionirati za nas i kada.