CSS Shorthand vs. Longhand - Wanneer te gebruiken Welke

Shorthand en Longhand - de ene is bondig en de ander precies. Eén kwam voort uit de behoefte aan beknoptheid, terwijl de ander standvastig blijft om duidelijkheid te bewaren. Hoe dan ook, ze hebben hun doelen, voor- en nadelen, om zo te zeggen.

Dit bericht zal enig licht werpen op zowel CSS-steno-notaties als op lange-notaties, terwijl het afloopt welke het beste is om te gebruiken voor welke situatie .

Wat is een steno-eigenschap?

De eigenschap Shorthand is een eigenschap die de waarden voor andere CSS-eigenschappenreeksen gebruikt. We kunnen bijvoorbeeld alleen een waarde toekennen voor border-width, border-style en border-color met behulp van de eigenschap border .

Eigenlijk,

 rand: 1px effen blauw; 

is hetzelfde als:

 grensbreedte: 1px; randstijl: stevig; randkleur: blauw; 

Hiermee hoeven we de afzonderlijke eigenschapswaarden niet afzonderlijk te declareren (wat overbodig is, tijd- en plaatsrovend). Het herstelt ook de overbodige eigenschappen in de aangifte, iets waarvan kan worden geprofiteerd.

Hoe werkt het?

Zoals eerder vermeld, schrijven we een reeks andere eigenschapswaarden in steno, de volgorde doet er niet toe of alle eigenschapswaarden in de verkorte vorm van een ander soort zijn zoals in de rand . Voor eigenschappen met vergelijkbare soorten waarden zoals marge, maakt orde wel uit . Bij twijfel, onthoud met de klok mee!

Wat als we een of twee huizen missen in de verklaring? Laten we in het bovenstaande voorbeeld stellen dat we border-style hebben genegeerd.

 rand: 1px blauw; 

We zullen de grenzen niet meer kunnen zien, niet omdat de steno-eigenschap niet werkte, maar omdat de border-style die we weglieten, de standaardwaarde none . Dit is hoe die steno-eigenschap is weergegeven.

 rand: 1px geen blauw; 

Laten we nu de 1px voor de border-width neerzetten en de andere twee houden:

 rand: effen blauw; 

We zullen de randen kunnen zien, alleen met een dikkere breedte en dat komt omdat de eigenschap border-width de standaardwaarde medium .

 rand: medium stevig blauw; 

Hiermee is het voor ons geconcludeerd dat wanneer een eigenschapswaarde wordt weggelaten in een steno-declaratie, die eigenschap de standaardwaarde aanneemt (zelfs als deze een eerdere waarde moet overschrijven die daaraan is toegewezen).

Als er een border-width: 1px; voor een element ergens vóór border: solid blue; voor hetzelfde, de randbreedte wordt medium (de standaardwaarde), niet 1 1px .

Een ander ding dat de moeite van het vermelden waard is, is dat we geen waarden zoals inherit, initial of unset, die beschikbaar zijn voor alle CSS-eigenschappen, in steno-notatie. Als we die gebruiken, kan de browser niet precies weten welke eigenschap die waarde in de afkorting zou moeten vertegenwoordigen - de volledige aangifte wordt verwijderd .

De all eigendom

Er is één CSS-verkorte eigenschap die de waarde voor alle CSS-eigenschappen kan instellen . CSS-brede waarden inherit, initial en unset zijn van toepassing op alle eigenschappen en daarom zijn dit de enige waarden die worden geaccepteerd door de eigenschap all .

 div {all: initial} 

Dit zorgt ervoor dat het div element ALLE CSS-eigenschapswaarden deactiveert en de standaardwaarde in elk van deze waarden reset.

⚠ Waarschuwing

Laten we het all eigendom niet misbruiken. De noodzaak hiervoor kan zich alleen voordoen in zeer zeldzame omstandigheden, wanneer we geen eerdere CSS-code kunnen aanraken van een element waarop we deze eigenschap willen toepassen.

Opmerking: CSS-eigenschapskleur krijgt een hexadecimale waarde met een verkorte notatie als de twee getallen van de hexwaarde in elk kleurkanaal hetzelfde zijn. Bijvoorbeeld background: #445599; is hetzelfde als background: #459; .

Wat is een eigendom uit de lange termijn?

De afzonderlijke eigenschappen die kunnen worden opgenomen in een afkortingseigenschap worden eigenschappen met lange hand genoemd. Enkele voorbeelden zijn; background-image, margin-left, animation-duration, etc.

Waarom zouden we het gebruiken?

Hoewel steno-alternatieven handig zijn, hebben ze wel een nadeel. Weet je nog dat we in het begin zagen hoe steno's die overbodige eigenschappen overschrijven, hun standaardwaarden overschrijven? Dit kan een probleem zijn als de reset niet gewenst is.

Neem bijvoorbeeld de eigenschap font verkorte naam. Laten we het gebruiken in het h4 element (dat een standaardlettertype font-weight:bold browser heeft font-weight:bold )

 lettertype: 20px "koerier nieuw"; 

In de bovenstaande afkortingcode is er geen waarde voor de eigenschap font-weight en daarom wordt het font-weight:bold (standaardstijl van browser) overschreven door de standaardwaarde font-weight:normal waardoor het h4 element zijn vetgedrukte stijl verliest, wat misschien niet is bedoeld.

Dus, voor het bovenstaande voorbeeld zijn eenvoudige twee eigenschappen voor de lange hand, font-size en font-family perfect.

Ook is het niet erg handig om een ​​steno te gebruiken voor het toewijzen van slechts één of twee eigenschapswaarden . Waarom zou u de browser extra werk geven om elke afzonderlijke eigenschap (inclusief de links) te interpreteren in de steno, wanneer er slechts één nodig is om te werken?

Tijdens de ontwikkelingsfase kunnen sommige ontwikkelaars (vooral beginners) het gebruik van lange notenschrift een stuk gemakkelijker vinden om mee te werken dan steno voor een betere leesbaarheid en duidelijkheid .

Tegenwoordig met de mogelijkheid van snelle codering (met behulp van tools zoals Emmet) en minificatie, is een hoge betrouwbaarheid op steno niet nodig, maar tegelijkertijd is het een logische manier om margin:0; te typen margin:0; . De context waarin we onze CSS-notaties prefereren, varieert en we hoeven alleen maar uit te zoeken welke notatie het beste werkt voor ons en wanneer.

"Howdy" aanpassen in WordPress Admin Bar [Quick Tip]

Elke WordPress-gebruiker moet bekend zijn met het "Howdy" -bericht dat in de beheerdersbalk wordt weergegeven wanneer ze zijn aangemeld. Het probleem met "Howdy" is dat het een informeel woord is en erg onprofessioneel klinkt. Misschien heeft uw klant om de een of andere reden toegang tot uw WordPress-dashboard

(Technische en ontwerptips)

Freebie: 15 Valentijnsdagpatronen

Als je de hint nog niet hebt gekregen, is Valentijnsdag deze zaterdag. Of het nu voor zaken is of voor uw eigen persoonlijk gebruik, de kans is groot dat u waarschijnlijk behoefte hebt aan een aantal op Valentijnsdag geïnspireerde middelen. Nou, je hebt geluk.We werken samen met onze vrienden bij Freepik om de Valentijnsdag in stijl te vieren.

(Technische en ontwerptips)