CSS Shorthand vs. Longhand - Milloin käyttää

Shorthand ja Longhand - yksi on tiivis ja toinen tarkka. Yksi tuli olemaan pois halusta lyhyt, kun taas toinen seisoo lujasti säilyttää selkeys. Joko niin, heillä on tarkoituksensa, hyvät ja huonot puolensa niin sanotusti.

Tämä viesti heijastaa jonkin verran valoa sekä CSS: n lyhytnäkemerkinnöistä että pitkäkestoisista merkinnöistä ja päättelee, mikä on parasta käyttää missä tilanteessa.

Mikä on lyhytominaisuus?

Shorthand-ominaisuus on ominaisuus, joka ottaa arvot muille CSS-ominaisuuksien sarjoille. Voimme esimerkiksi määrittää arvon border-width, border-style ja reunuksen väri käyttämällä reunus omaisuutta yksin.

Pohjimmiltaan,

 raja: 1kpl kiinteä sininen; 

on sama kuin:

 raja-leveys: 1px; raja-tyyli: kiinteä; raja-väri: sininen;

Tämän vuoksi meidän ei tarvitse ilmoittaa yksittäisiä kiinteistöarvoja erikseen (mikä on tarpeeton, aikaa ja tilaa vievää). Se palauttaa myös ilmoituksen vasemmanpuoleiset ominaisuudet, mikä voidaan hyödyntää.

Kuinka se toimii?

Kuten aikaisemmin mainittiin, kirjoitamme joukon muita kiinteistöarvoja lyhenteessä, järjestys ei ole väliä, jos kaikki lyhytnimikkeen omaisuuden arvot ovat erilaisia kuten sisään reunus. Kiinteistöjen kanssa samanlaiset arvot kuten marginaali, järjestys ei ole väliä. Jos olet epävarma, muista myötäpäivään!

Entä jos me jäämme pois omaisuudesta tai kahdesta ilmoituksesta? Yllä olevassa esimerkissä sanotaan, että jätimme huomiotta border-style.

 raja: 1px sininen; 

Emme voi enää nähdä rajoja, ei siksi, että lyhytominaisuus ei toiminut vaan koska border-style jonka olemme jättäneet pois, saimme oletusarvon ei mitään. Näin lyhytominaisuus on saatu.

 raja: 1px ei sinistä; 

Mennään nyt 1px varten border-width ja pidä kaksi muuta:

 raja: kiinteä sininen;

Voimme nähdä rajat, vain paksumman leveyden ja siksi, että border-width omaisuus sai oletusarvon keskikokoinen.

 raja: keskivahva sininen; 

Tämä päättelee sen meille kun kiinteistön arvo on jätetty pois pikailmoituksessa, että omaisuus ottaa sen oletusarvon (vaikka sen on ohitettava aikaisempi arvo samalle).

Jos on raja-leveys: 1px; elementti jonnekin ennen raja: kiinteä sininen; sama, reunan leveys tulee olemaan keskikokoinen (oletusarvo), ei 1px.

Toinen mainitsemisen arvoinen asia on se emme voi käyttää sellaisia ​​arvoja periä, alkukirjain tai unset, jotka ovat käytettävissä kaikissa CSS-ominaisuuksissa, lyhyellä merkinnällä. Jos käytämme niitä, selain ei voi tietää tarkasti, mitä ominaisuutta arvolla on tarkoitus kuvata lyhenteessä - koko ilmoitus poistetaan.

kaikki omaisuus

On olemassa yksi CSS-lyhytominaisuus määritä kaikkien CSS-ominaisuuksien arvo. CSS-laajuiset arvot periä, alkukirjain ja unset ovat sovellettavissa kaikkiin ominaisuuksiin ja näin ollen nämä ovat ainoat hyväksymät arvot kaikki omaisuus.

 div all: first

Tämä tekee div elementti ditch KAIKKI CSS-ominaisuuden arvot ja palauta oletusarvo kussakin.

⚠ Varoitus

Älkäämme väärin kaikki omaisuutta. Sen tarve voi ilmetä vain hyvin harvoissa olosuhteissa, kun emme voi koskettaa mitään elementin aiempaa CSS-koodia, jota haluamme soveltaa tätä ominaisuutta.

Huomautus: CSS-ominaisuus väri- ottaa heksadesimaalisen arvon lyhytaikaisella merkinnällä, jos kussakin värikanavassa olevat kaksi heksamäärää ovat samat. Esimerkiksi, tausta: # 445599; on sama kuin tausta: # 459;.

Mikä on pitkäikäinen omaisuus?

yksittäisiä ominaisuuksia joita voidaan sisällyttää lyhytominaisuuteen, kutsutaan pitkäkestoisiksi ominaisuuksiksi. Jotkut esimerkit ovat; taustakuva, margin-left, animaatio-kesto, jne.

Miksi meidän pitäisi käyttää sitä?

Vaikka lyhyet vaihtoehdot ovat käteviä, niillä on haitta. Muista, että alussa näimme, kuinka lyhytnimi ohittaa kaikki jäljellä olevat ominaisuudet oletusarvoillaan? Tämä voi olla ongelma, jos palautusta ei haluta.

Ota kirjasinlaji esimerkiksi lyhytominaisuus. Käytetään sitä h4 elementti (jolla on oletusselain fontti-paino: lihavoitu)

 fontti: 20px "kuriiri uusi"; 

Yllä olevassa lyhytnumerokoodissa ei ole mitään arvoa fontti-paino omaisuus, siis fontti-paino: lihavoituoletusarvo ohittaa (selaimen oletustyyli) fontti-paino: normaali aiheuttaa h4 elementti menettää lihavoidun tyylinsä, jota ei ehkä ole tarkoitettu.

Niinpä edellä esitetyssä esimerkissä yksinkertaiset kaksi pitkäaikaisia ​​ominaisuuksia, Fonttikoko ja font-family ovat täydellisiä.

Myös käyttämällä lyhennettä vain yhden tai kahden ominaisuusarvon määrittäminen ei ole kovin hyödyllinen. Miksi antaa selaimelle ylimääräistä työtä tulkita jokaista yksittäistä ominaisuutta (mukaan lukien vasemmalle jääneet), kun vain yksi tarvitaan työhön?

Jotkin kehittäjät (varsinkin aloittelijat) saattavat löytää tuotannon sivuun, mutta heillä on paljon helpompaa työskennellä kuin pikakuvakkeella. parempi luettavuus ja selkeys.

johtopäätös

Nopea koodausmahdollisuus (Emmetin kaltaisten työkalujen avulla) ja minimointi ovat nykyään erittäin luotettavia, mutta samalla on loogista kirjoittaa. margin: 0;. Konteksti, jossa pidämme mieluummin CSS-merkintöjä, vaihtelee meidän täytyy vain selvittää, mikä merkintä toimii parhaiten meille ja milloin.