CSS Shorthand vs. Longhand - Mikor kell használni

Rövid és hosszúkás - egy tömör és a másik pontos. Az egyik a létezésből jött létre a rövidségért, a másik pedig a világosság megőrzése érdekében. Akárhogy is, a céljuk, előnyei és hátrányai így szólnak.

Ez a hozzászólás fényt fog mutatni mind a CSS rövidített jegyzetekre, mind a hosszúszárú jelölésekre, ugyanakkor arra a következtetésre jut, hogy melyik a legjobb, hogy melyik helyzetben.

Mi az a rövidítés tulajdon?

Rövid tulajdonság egy olyan tulajdonság, amely a CSS tulajdonságok más csoportjainak értékeit veszi figyelembe. Például értéket rendelhetünk border-width, border-style és border-color használni a határ egyedül.

Alapvetően,

 határ: 1px kék; 

ugyanaz mint:

 határszélesség: 1px; határstílus: szilárd; szegélyszín: kék;

Ezzel nem kell külön-külön deklarálni az egyes ingatlanértékeket (ami felesleges, idő- és helyigényes). Azt is visszaállítja a nyilatkozatban a balra hagyott tulajdonságokat, amit ki lehet használni.

Hogyan működik?

Mint korábban már említettük, más tulajdonság értékeket írunk rövid szövegben, a sorrend nem számít, hogy az összes tulajdonság értéke a rövidítésben másfajta mint-ban-ben határ. A tulajdonságokkal együtt hasonló értékeket mint a margó, a sorrend nem számít. Kétség esetén emlékezzen az óramutató járásával megegyező irányba!

Most mi van, ha hiányzik egy vagy két ingatlan a nyilatkozatban? A fenti példában mondjuk figyelmen kívül border-style.

 határ: 1px kék; 

A határokat már nem fogjuk látni, nem azért, mert a rövidített tulajdonság nem működött, hanem azért, mert a border-style amit kihagyottunk, megkapta az alapértelmezett értéket egyik sem. Így kapta meg a sztrájktörvényt.

 határ: 1px nincs kék; 

Most dobjuk el a 1 képpont mert border-width és tartsd a másik kettőt:

 határ: szilárd kék;

Láthatjuk a határokat, csak vastagabb szélességgel, és ez azért van, mert a border-width az ingatlan alapértelmezett értéket kapott közepes.

 határ: közepes szilárd kék; 

Ez arra következtet, hogy nekünk ha egy tulajdonság értéke kihagyott egy rövidített nyilatkozatban, hogy a tulajdonság az alapértelmezett értékét veszi át (még akkor is, ha felülbírálnia kell az előzőhez rendelt korábbi értékeket).

Ha van határszélesség: 1px; egy elemre valahol korábban határ: szilárd kék; ugyanez a határ szélessége lesz közepes (az alapértelmezett érték), nem 1 képpont.

Egy másik dolog, amit érdemes megemlíteni nem használhatjuk az ilyen értékeket örököl, a kezdeti vagy hatástalanított, amelyek a CSS összes tulajdonságához rendelkezésre állnak, rövidített jelöléssel. Ha ezeket használjuk, a böngésző nem tudja pontosan, hogy melyik tulajdonságot képviseli az érték a rövidítésben - a teljes nyilatkozatot el kell hagyni.

A minden ingatlan

Van egy CSS rövidített tulajdonság állítsa be az összes CSS tulajdonság értékét. CSS-szintű értékek örököl, a kezdeti és hatástalanított az összes tulajdonsághoz alkalmazhatók, és ezért ezek az egyetlen érték, amelyet a minden ingatlan.

 div all: first

Ez az div elem az összes CSS tulajdonság értékét árasztja, és állítsa vissza az alapértelmezett értéket.

⚠ Figyelmeztetés

Ne használjuk vissza minden ingatlan. Ennek szükségessége csak nagyon ritka körülmények között fordulhat elő, amikor nem tudunk megérinteni egy olyan elem korábbi CSS kódját, amelyre ezt a tulajdonságot alkalmazni kívánjuk.

Jegyzet: CSS tulajdonság szín Ha hexadecimális értéket vesz fel a rövidített jelöléssel, ha minden színcsatornában a két hexa-szám azonos. Például, háttér: # 445599; ugyanaz, mint háttér: # 459;.

Mi a longhand tulajdon?

A egyedi tulajdonságok a rövidtávú tulajdonságok közé sorolható neveket longhand tulajdonságoknak nevezik. Néhány példa erre; háttérkép, margin-left, animáció időtartamú, stb..

Miért kellene ezt használni?

Bár a rövidtávú alternatívák hasznosak, hátrányuk van. Emlékezzünk az elején, hogy láttuk, hogy a rövidítés felülbírálja a kihagyott tulajdonságokat az alapértelmezett értékekkel? Ez problémát okozhat, ha a visszaállítás nem kívánatos.

Vegyük a betűtípus pl. Használjuk a h4 elem (amely alapértelmezett böngészőstílust tartalmaz font-weight: bold)

 betűtípus: 20px "courier new"; 

A fenti rövidített kódban nincs érték az font-weight tulajdon, tehát a font-weight: bold(böngésző alapértelmezett stílusa) felülbírálja az alapértelmezett értéket font-weight: normal okozza a h4 elveszteni a merész stílusát, amely esetleg nem szándékozott.

Tehát a fenti példa esetében egyszerű két hosszú tulajdonságú tulajdonság, betűméret és betűtípus család Tökéletesek.

Szintén rövidítéssel csak egy vagy két tulajdonságérték hozzárendelése nem nagyon hasznos. Miért adjon a böngészőnek extra munkát, hogy minden egyes tulajdonságot (beleértve a bal oldaliakat is) értelmezze a rövidített szövegben, amikor csak egyre van szükség a munkához?

A fejlesztés során a fejlesztők (különösen a kezdők) gyártása félreérthetõ, a hosszútávú jelölések használatával sokkal könnyebben kezelhetõ, mint a rövidítés jobb olvashatóság és egyértelműség.

Következtetés

Napjainkban a gyors kódolás lehetőségével (az Emmet eszközei segítségével) és a bányászatban nem szükséges nagy megbízhatóság a rövidítésnél, de ugyanakkor sok logikus a gépelés. margin: 0;. Az a kontextus, amelyben a CSS-jelöléseinket preferáljuk, változik és mindössze annyit kell tennünk, hogy kitaláljuk, mi a legjobban a számunkra és mikor.