de.hideout-lastation.com
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.
Ein Rocking CSS3 Suchfeld erstellen
Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen. CSS3 ist die Stylesheet-Sprache der nächsten Generation. Es bietet viele neue und aufregende Funktionen wie Schatten, Animationen, Übergänge, Rand-Radius usw. O
Android App Data & Cache - Wie man sie verwaltet
Hat Ihnen jemals jemand geraten, die Daten Ihrer App zu bereinigen und auf Ihrem Android-Smartphone zwischenzuspeichern, um Probleme zu beheben, Speicherplatz zu gewinnen oder die Leistung Ihres Telefons zu erhöhen? Haben Sie sich jemals gefragt, was diese beiden Arten von Daten sind, oder welche Konsequenzen können sich daraus ergeben, dass diese Daten gelöscht oder aufbewahrt werden ?Nu
