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.
Sind Ready-Made-Websites Webdesign zu töten?
In den meisten Fällen würden Sie jemanden treffen, der mit dem Kommen und Gehen von Webdesign nicht so vertraut ist und Ihnen sagt: " Ich kann das Gleiche tun wie Sie, indem Sie Squarespace verwenden ".Auf die Sie mit Ekel oder Wut reagieren könnten.Ich meine, es ist nicht überraschend. Da
Verwandle deine Doodles mit Pix2Pix in schreckliche Bilder
Was bekommst du, wenn du künstliche Doodles mischt und gemeinsam lernst ? Nun, der niederländische Sender NPO hat eine Antwort darauf, etwas namens Pix2Pix, eine kleine Webanwendung, die mit Hilfe der maschinellen Lerntechnologie Ihre Kritzeleien in ziemlich furchterregende Bilder verwandelt .Mit Hilfe der Open-Source-Machine-Learning-Plattform von Google namens Tensorflow nutzt Pix2Pix ein System namens generative adversarial network (GAN), um aus dem eingereichten Doodle ein korrektes Bild zu erstellen .
