CSS Shorthand vs. Longhand - kedy používať ktoré

Shorthand a Longhand - jedna je stručná a druhá presná. Jeden vznikol z chcieť pre stručnosť, zatiaľ čo druhý stojí pevne, aby zachoval jasnosť. Či tak alebo onak, oni majú svoje ciele, klady a zápory, aby som tak povedal.

Tento príspevok zažiari svetlo na notách ako CSS, ale aj na dlhých notách, zatiaľ čo sa dá vyvodiť, čo je najlepšie použiť v ktorej situácii.

Čo je vlastnosť Shorthand?

Špeciálna nehnuteľnosť je vlastnosť, ktorá nadobúda hodnoty pre iné množiny vlastností CSS. Napríklad môžeme priradiť hodnotu pre border-width, border-style a border-color pomocou hraničné majetok sám.

v podstate,

 okraj: 1px modrá; 

je to isté ako:

 šírka hranice: 1px; hraničný štýl: pevný; hraničná farba: modrá;

Týmto nemusíme samostatne deklarovať jednotlivé hodnoty vlastníctva (čo je redundantné, časovo náročné a priestorovo náročné). Tiež obnoví deklarované vlastnosti v deklarácii, čo je možné využiť.

Ako to funguje?

Ako sme už uviedli, napíšeme sériu ďalších hodnôt vlastností v skratke, poradie nezáleží na tom, či všetky hodnoty vlastností v skratke sú iného druhu ako v hraničné. Pre nehnuteľnosti s podobné druhy hodnôt ako marža, objednávka má vec. Ak máte pochybnosti, nezabudnite v smere hodinových ručičiek!

Teraz, čo keby sme v vyhlásení stratili vlastnosť alebo dve? Vo vyššie uvedenom príklade povedzme, že sme ignorovali border-style.

 okraj: 1px modrá; 

Už nebudeme môcť vidieť hranice, nie preto, že vlastnosť skratky nefungovala, ale preto, že border-style ktoré sme vynechali, dostali predvolenú hodnotu nikto. Takto sa vykresľuje táto vlastnosť steny.

 hranica: 1px žiadna modrá; 

Teraz poďme 1px pre border-width a ponechajte ostatné dve:

 hranica: modrá;

Budeme môcť vidieť hranice, len s hrubšou šírkou, a to preto, že border-width vlastnosť má predvolenú hodnotu stredná.

 okraj: stredne tuhá modrá; 

Pre nás to končí keď je hodnota nehnuteľnosti vynechaná v skrátenej deklarácii, táto vlastnosť nadobúda svoju predvolenú hodnotu (aj keď musí prekonať predchádzajúcu hodnotu priradenú pre rovnakú hodnotu).

Ak existuje šírka hranice: 1px; pre prvok niekde predtým hranica: modrá; pre to isté bude šírka hranice stredná (predvolená hodnota), nie 1px.

Ďalšou vecou, ​​ktorú stojí za zmienku, je to nemôžeme použiť hodnoty ako zdediť, počiatočné alebo unset, ktoré sú k dispozícii pre všetky vlastnosti CSS, v skratke. Ak ich použijeme, prehliadač nebude schopný presne vedieť, ktorý vlastnosť má táto hodnota predstavovať v skratke - celé vyhlásenie sa zruší.

všetko vlastnosť

Existuje jedna vlastnosť skratky CSS, ktorá môže nastavte hodnotu pre všetky vlastnosti CSS. CSS-values zdediť, počiatočné a unset sa vzťahujú na všetky vlastnosti a preto sú to jediné hodnoty akceptované všetko vlastnosť.

 div všetko: počiatočné

Toto urobí div prvok prúd všetkých hodnôt vlastností CSS, ktoré mal, a obnoviť predvolenú hodnotu v každom z nich.

⚠ Upozornenie

Nepoužívajte nesprávne použitie všetko vlastnosť. Potreba môže vzniknúť len vo veľmi zriedkavých prípadoch, keď sa nedokážeme dotknúť žiadneho predchádzajúceho kódu CSS prvku, ktorý by sme chceli použiť túto vlastnosť.

Poznámka: Vlastnosť CSS farba má šestnástkovú hodnotu so skratkou, ak sú dve čísla hexadecimálnej hodnoty v každom farebnom kanáli rovnaké. Napríklad, pozadie: # 445599; je rovnaká ako pozadie: # 459;.

Čo je dlhodobé vlastníctvo?

jednotlivé vlastnosti ktoré sa môžu zahrnúť do vlastností skratky, sa nazývajú dlhé ruky. Niektoré príklady sú; background-image, margin-left, animácie-trvanie, atď.

Prečo by sme ju mali používať?

Napriek tomu, že alternatívy skratky sú užitočné, majú nevýhodu. Pamätajte si, že na začiatku sme videli, ako skratka prepisuje akékoľvek vynechané vlastnosti s ich predvolenými hodnotami? To môže byť problém, ak sa nevyžaduje reset.

Vezmite si font napr. Použme to v h4 element (ktorý má predvolený štýl prehliadača font-weight: tučné)

 písmo: 20px "courier new"; 

Vo vyššie uvedenom skrátenom kóde nie je pre font-weight majetok, a preto font-weight: tučné(predvolený štýl prehliadača) bude predvolená hodnota predvolená font-weight: normálne spôsobuje h4 prvok, ktorý stratil svoj odvážny štýl, čo možno nebolo zamýšľané.

Takže, pre vyššie uvedený príklad jednoduché dva dlhé ruky vlastnosti, veľkosť písma a font-family sú dokonalé.

Tiež pomocou skratky pre priradenie iba jednej alebo dvoch hodnôt vlastností nie je veľmi užitočné. Prečo je potrebné, aby prehliadač pracoval na interpretácii každého jednotlivého vlastníctva (vrátane tých, ktoré boli vynechané) v skratke, keď je potrebná len jedna?

Produkcia bokom, v priebehu vývojovej fázy, môžu niektorí vývojári (najmä začiatočníci) nájsť pomocou dlhotrvajúcej notácie oveľa ľahšie pracovať ako stenografiou lepšiu čitateľnosť a zrozumiteľnosť.

záver

V dnešnej dobe s možnosťou rýchleho kódovania (s pomocou nástrojov ako je Emmet) a minifikácie nie je potrebná vysoká spoľahlivosť na skratku, ale zároveň je logické písať margin: 0;. Kontext, v ktorom uprednostňujeme naše CSS notácie, sa bude líšiť a všetko, čo musíme urobiť, je zistiť, aký zápis bude najlepšie pre nás a kedy.