de.hideout-lastation.com
Paradies Für Designer Und Entwickler


CSS Shorthand vs. Longhand - Wann man welche verwendet

Shorthand und Longhand - eine ist prägnant und die andere präzise. Einer entstand aus dem Mangel der Kürze, während der andere fest steht, um Klarheit zu bewahren. Wie auch immer, sie haben sozusagen ihre Absichten, Vor- und Nachteile.

Dieser Beitrag beleuchtet sowohl CSS-Kurzschrift-Notationen als auch Langhand-Notationen und stellt fest, welches für welche Situation am besten ist .

Was ist Shorthand-Eigenschaft?

Shorthand-Eigenschaft ist eine Eigenschaft, die die Werte für andere Gruppen von CSS-Eigenschaften übernimmt. Zum Beispiel können wir einen Wert für border-width, border-style und Rahmenfarbe allein mit der border zuweisen.

Grundsätzlich gilt,

 Umrandung: 1px durchgehend blau; 

ist das gleiche wie:

 Rahmenbreite: 1px; Rand-Stil: fest; Randfarbe: blau; 

Damit müssen wir nicht einzelne Eigenschaftswerte separat deklarieren (was redundant, zeit- und platzaufwendig ist). Außerdem werden die ausgelassenen Eigenschaften in der Deklaration zurückgesetzt, was ausgenutzt werden kann.

Wie funktioniert es?

Wie bereits erwähnt, schreiben wir eine Menge anderer Eigenschaftswerte in Kurzform, die Reihenfolge spielt keine Rolle, wenn alle Eigenschaftswerte in der Kurzschrift von einer anderen Art wie in der Grenze sind . Bei Eigenschaften mit ähnlichen Werten wie der Marge spielt die Reihenfolge eine Rolle . Im Zweifelsfall im Uhrzeigersinn!

Was nun, wenn wir in der Deklaration eine Eigenschaft oder zwei vermissen? Im obigen Beispiel haben wir den Randstil ignoriert.

 Grenze: 1px blau; 

Wir werden die Grenzen nicht mehr sehen können, nicht weil die Kurzschrift-Eigenschaft nicht funktioniert hat, sondern weil der border-style den wir weggelassen haben, den Standardwert none . So wurde diese Kurzschrift-Eigenschaft gerendert.

 Grenze: 1px keine blau; 

Lassen Sie uns jetzt die 1px für die 1px fallen und behalten Sie die anderen beiden:

 Grenze: durchgehend blau; 

Wir können die Ränder nur mit einer dickeren Breite sehen, weil die Eigenschaft border-width den Standardwert medium .

 Grenze: mittel festes Blau; 

Dies schließt für uns, dass, wenn ein Eigenschaftswert in einer Kurzschrift-Deklaration weggelassen wird, diese Eigenschaft ihren Standardwert annimmt (selbst wenn sie irgendeinen vorher zugewiesenen Wert überschreiben muss).

Wenn es eine border-width: 1px; gibt border-width: 1px; für ein Element irgendwo vor der border: solid blue; die 1px medium (der Standardwert) sein, nicht 1px .

Erwähnenswert ist auch, dass wir Werte wie inherit, initial oder unset, die für alle CSS-Eigenschaften verfügbar sind, nicht in Kurzschreibweise verwenden können. Wenn wir diese verwenden, wird der Browser nicht genau wissen können, welche Eigenschaft dieser Wert in der Kurzschrift darstellen soll - die gesamte Deklaration wird gelöscht .

Das all Eigentum

Es gibt eine CSS-Kurzschrift-Eigenschaft, die den Wert für alle CSS-Eigenschaften festlegen kann. CSS-weite Werte inherit, initial und unset sind auf alle Eigenschaften anwendbar und daher sind dies die einzigen Werte, die von der all Eigenschaft akzeptiert werden.

 div {alle: initial} 

Dadurch wird das div Element ALLE CSS-Eigenschaftswerte, die es hatte, abbrechen und den Standardwert in jedem von ihnen zurücksetzen.

⚠ Warnung

Lassen Sie uns nicht die all Eigenschaft missbrauchen. Die Notwendigkeit dafür kann nur in sehr seltenen Fällen auftreten, wenn wir keinen vorherigen CSS-Code eines Elements, auf das wir diese Eigenschaft anwenden möchten, anfassen können.

Hinweis: Die CSS-Eigenschaftsfarbe nimmt einen hexadezimalen Wert mit einer Kurzschreibweise an, wenn die zwei Zahlen des Hexadezimalwerts in jedem Farbkanal gleich sind. Zum Beispiel background: #445599; ist gleich wie der background: #459; .

Was ist Eigentum an einer Immobilie?

Die einzelnen Eigenschaften, die in einer Kurzschrift-Eigenschaft enthalten sein können, werden als Langhandeigenschaften bezeichnet. Einige Beispiele sind; background-image, margin-left, animation-duration usw.

Warum sollten wir es benutzen?

Obwohl Kurzschreibaltern praktisch sind, haben sie einen Nachteil. Denken Sie daran, dass wir am Anfang gesehen haben, wie die Kurzschrift alle ausgelassenen Eigenschaften mit ihren Standardwerten überschreibt? Dies kann ein Problem darstellen, wenn das Zurücksetzen nicht erwünscht ist.

Nehmen Sie zum Beispiel die font Kurzschrift-Eigenschaft. Lassen Sie uns es im h4 Element verwenden (das einen Standard-Browser-Stil font-weight:bold )

 Schriftart: 20px "Kurier neu"; 

In der obigen Kurzschrift ist kein Wert für die font-weight Eigenschaft vorhanden, daher wird font-weight:bold (Standard-Browserstil) durch den Standardwert font-weight:normal überschrieben, wodurch das h4 Element seinen fett formatierten Stil verliert, was nicht beabsichtigt war.

Also, für das obige Beispiel sind zwei Longhand-Eigenschaften, font-size und font-family perfekt.

Außerdem ist die Verwendung von Kurzschrift zum Zuweisen von nur einem oder zwei Eigenschaftswerten nicht sehr nützlich . Warum sollte der Browser zusätzliche Arbeit leisten, um jede einzelne Eigenschaft (einschließlich der weggelassenen) in der Kurzschrift zu interpretieren, wenn nur eine benötigt wird?

Produktion beiseite, während der Entwicklungsphase, einige Entwickler (besonders Anfänger) finden, dass die Verwendung der Langschreibweise viel einfacher zu arbeiten ist als Kurzschrift für bessere Lesbarkeit und Klarheit .

Fazit

Heutzutage mit der Möglichkeit der schnellen Kodierung (mit Hilfe von Tools wie Emmet) und Minification, ist eine hohe Zuverlässigkeit auf Kurzschrift nicht erforderlich, aber gleichzeitig ist es sehr logisch, margin:0; . Der Kontext, in dem wir unsere CSS-Notationen bevorzugen, wird variieren und wir müssen nur herausfinden, welche Notation für uns am besten funktioniert und wann.

Android Exploit "Cloak & Dagger" kann dein Passwort & mehr stehlen

Android Exploit "Cloak & Dagger" kann dein Passwort & mehr stehlen

Android-Nutzer möchten möglicherweise die Apps im Auge behalten, die sie auf ihre Geräte herunterladen, da die Forscher eine Reihe von Sicherheitslücken im Betriebssystem entdeckt haben, die auf zwei bestimmten Android-Berechtigungen basieren .Der Angriff wurde vom Forschungsteam, das die Sicherheitsanfälligkeit entdeckt hat, als Cloak & Dagger bezeichnet. Der

(Tech- und Design-Tipps)

40 schöne Weihnachtskarten garantieren Ihnen ein Lächeln

40 schöne Weihnachtskarten garantieren Ihnen ein Lächeln

Man könnte die Weihnachtszeit als eine Zeit für Shopping, Schenkungen und Pausen betrachten, aber es ist auch die Zeit des Jahres, wenn wir mit den Freunden Schluss machen, uns wieder mit Freunden und Familie treffen und auf unsere Errungenschaften des Jahres zurückblicken .Es ist auch die perfekte Zeit, um unsere Dankbarkeit und Dankbarkeit an die Leute zu senden , die uns das ganze Jahr über unterstützt haben, und eine Möglichkeit, dies zu tun, ist ihnen eine eigene Weihnachtskarte zu schicken. Um I

(Tech- und Design-Tipps)