'Eigenschaft: 0' oder 'Eigenschaft: 0px' in CSS?

82

Ich habe gesehen, dass diese Notation häufig verwendet wird, und ich habe mich gefragt, ob es einen bemerkenswerten Unterschied zwischen diesen beiden Notationen gibt.

element#id
{
  property: 0;
}

und

element#id
{
  property: 0px;
}

Ich benutze die property: 0px;ganze Zeit, da ich finde, dass es sauberer aussieht, aber ich bin mir nicht sicher, ob der Browser 0pxanders interpretiert als 0.

Weiß jemand, welches besser oder richtig ist?

css properties zero Mixer
quelle
1
Gute Frage und früher als dieses wahrscheinliche Duplikat: stackoverflow.com/q/5359222/292060 , aber diese hat eine bessere Antwort und zitiert die Spezifikation.
Goodeye
1
Unabhängig davon, was Sie verwenden, stellen Sie sicher, dass Sie während des gesamten Projekts konsistent bleiben.
PBwebD

Antworten:

55

Einheit Identifikatoren sind optional , aber es gibt keine vorgemerkten Leistungssteigerung (obwohl Sie sind zwei Zeichen zu speichern).

CSS2 - Aus W3C CSS 2.1 Spezifikation für Syntax und Basisdatentypen :

Das Format eines Längenwerts (in dieser Spezifikation mit <Länge> bezeichnet) ist eine <Nummer> (mit oder ohne Dezimalpunkt), unmittelbar gefolgt von einer Einheitenkennung (z. B. px, em usw.). Nach einer Länge von Null ist die Einheitenkennung optional.

(Hervorhebung von mir)

CSS3 - Aus dem W3C-Modul für CSS-Werte und -Einheiten Stufe 3 (derzeit in der Kandidatenempfehlung zum Zeitpunkt dieses Schreibens)

Für Nulllängen ist die Einheitenkennung optional (dh kann syntaktisch als 0 dargestellt werden).

Chris Bier
quelle
1
Zweifel, dass Sie wirklich 2 Bytes sparen, wenn die GZIP-Komprimierung aktiv ist. Für mich ist es eine Frage dessen, womit Sie sich wohl fühlen. Einige CSS-Linters mögen 0px jedoch möglicherweise nicht.
Manuel Arwed Schmidt
34

Während das Gerät optional ist, wenn der Wert ist 0 , lasse ich es normalerweise in, da ich die Werte dann mit den Entwicklertools von Chrome optimieren kann, indem ich auf den Wert klicke und die Aufwärts- / Abwärtspfeiltasten drücke. Ohne eine Einheit ist das nicht wirklich möglich.

Außerdem 0entfernen CSS-Minifier die Einheiten sowieso von den Werten, sodass es am Ende nicht wirklich wichtig ist.

Mixer
quelle
+1 für die Beobachtung, dass Minifahrer davon wissen und dass es Funktionalität gibt, wenn sie eingeschlossen werden.
Graham P Heath
9
Die Entwicklertools von Chrome sind standardmäßig px, wenn Sie die Aufwärts- / Abwärtspfeiltasten auf einer 0 ohne Kennung drücken. Wenn Sie in den Entwicklertools von Chrome auf 0 klicken, bleibt der px erhalten.
PBwebD
1
@ testing123: Ich glaube nicht, dass es zu dem Zeitpunkt war, als ich diese Antwort schrieb, aber das ist gut zu wissen.
Blender
Gibt es Probleme mit der Ausführungszeit von 0 und 0px, wenn sie an mehreren Stellen in der Anwendung verwendet werden?
Kurkula
15

Sie sind gleich. Der Browser interpretiert beide als 0, gehen Sie also zu dem, was für Sie besser lesbar ist.

Sebastian Patane Masuelli
quelle
Gibt es eine "richtige" oder standardkonforme Wahl? Ich weiß, dass Sie nicht schreiben können border: 3 solid, da es keine Einheiten gibt, aber gibt es Webstandards für Null?
Blender
1
Wie ich in meiner Antwort erwähne, liegt es daran, dass sie alle identisch sind: Null mal alles ist immer noch Null, egal ob Sie mit der Größe eines Pixels, eines Em, eines Ex oder eines Prozentsatzes multiplizieren.
AgentConundrum
Sie sind sich nicht sicher, was Sie unter Webstandards verstehen, aber "margin: 10px 0 0 10px" funktioniert einwandfrei, ebenso wie "border: 0", was bedeutet, dass Sie Null als Äquivalent zu "none" verwenden können.
Tom
1
@blender Überprüfen Sie meine Antwort unten auf die Webstandards mit einem Link zur Dokumentation.
Chris Bier
3
-1 für eine Antwort mit streitbarem Inhalt ohne Verweis, Links oder Begründung. Bitte stützen Sie Ihre Meinung entweder mit Daten oder geben Sie klar an, dass es sich nur um Ihre Meinung handelt, nicht um sachliche Informationen.
11

Null von irgendetwas ist Null. 0px= 0%= 0em= 0pt=0

Die meisten Leute lassen das Gerät aus, weil es einfach unnötige Unordnung ist.

Futter
quelle
1
Eine Ausnahme bilden Zeiteinheiten: 0ist keine gültige Alternative zu 0s/0ms
Henrik Christensen
5

Soweit mir bekannt ist, gibt es seitdem keinen Unterschied zwischen ihnen 0px = 0em = 0ex = 0% = 0 . Es liegt ganz bei Ihnen als Entwickler, zu entscheiden, was Ihnen am besten gefällt (es sei denn, Sie haben Corporate-Coding-Standards, die Sie natürlich befolgen müssen).

Von den meisten Codebeispielen, die ich gesehen habe, verwenden die meisten Leute die Unitless-Version. Für mich sieht es einfach sauberer aus. Wenn Sie eine erhebliche Datenmenge übertragen (z. B. wenn Sie Google sind), können diese beiden Bytes eine große Bandbreite ergeben, insbesondere da Sie sie in Ihrem Stylesheet wahrscheinlich mehrmals wiederholen.

AgentConundrum
quelle
6
Wenn Sie eine erhebliche Datenmenge übertragen (z. B. wenn Sie Google sind), sollten Sie Minifizierungstools verwenden, die dies für Sie tun: p
John Kurlak
4

Null Pixel ist gleich Null Zoll und Null Meter und so weiter. 0ist alles, was du brauchst.

meder omuraliev
quelle
Für einen Moment wollte ich Ihren Beitrag ablehnen, weil ich dachte, Ihre Aussage, dass 0 Pixel gleich 0 Zoll sind, und so weiter, war falsch. :) Weil ich dachte, wie kann das sein? Sie sind verschiedene Einheiten.
Web_Designer
2

Ich persönlich finde 0sauberer als 0px. Das sind zwei zusätzliche Zeichen, die sich summieren können. Warum zusätzliche Bytes hinzufügen, wenn Sie dies nicht benötigen? Ich habe gesehen, padding: 0px 0px 0px 0pxwas leicht als padding: 0viel zu oft ausgedrückt werden kann.

Amir Raminfar
quelle
1

Sie können beides verwenden - mein bester Rat ist, sich nicht zu viele Sorgen zu machen, sondern dies auf die eine oder andere Weise konsequent zu tun. Ich persönlich bevorzuge es aus den folgenden Gründen, '0px' anzugeben:

  • Durch die Verwendung von 0px werden die Dinge mit allen anderen von Ihnen angegebenen 'px'-Größen konsistenter
  • Es ist auch ausführlicher und macht sehr deutlich, dass Sie eine Länge von Null anstelle eines Flags zum Ausschalten festlegen
  • Es ist etwas einfacher, einen '0px'-Wert zu optimieren, um ihn bei Bedarf zu einem anderen Wert zu machen
Chris Halcrow
quelle
0

Wie die anderen sagen, spielt es keine Rolle, ob es 0 ist, obwohl ich die Messungen zu allen meinen Werten hinzufüge, damit jeder andere, der meine CSS-Dateien betrachtet, beurteilen kann, mit welchen Messungen er wahrscheinlich anderswo umgehen wird.

danjah
quelle