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 .

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.

Erste Schritte mit AngularJS

Hin und wieder taucht ein neues Werkzeug auf und genau wie es plötzlich auftauchte, versinkt es in Vergessenheit. Nicht AngularJS obwohl. Obwohl es seit der Gründung von Misko Hevery seit 2009 existiert, hat AngularJS in den letzten Monaten viel Aufmerksamkeit auf sich gezogen .Die Leute reden darüber, Entwickler haben es in ihre Werke integriert, und Autoren haben Bücher darüber geschrieben und viel Geld verdient. Als

(Tech- und Design-Tipps)

Erstellen, Kontrollieren und Anpassen eines besseren Modal-Fensters für Ihre Website mit Vex

Ein modales Fenster ist sehr nützlich, wenn Sie Benutzer mit Ihrer Site interagieren möchten. Gelegentlich wird ein modales Fenster als modale Box bezeichnet, da das Fenster zum Anzeigen des Dialogfelds verwendet wird . In einem früheren Artikel hatten wir Sie durch ein Tutorial geführt, wie Sie mit dem Bootstrap-Plugin modale Fenster erstellen können.In d

(Tech- und Design-Tipps)