Soll ich "border: none" oder "border: 0'?

Question

Welche der beiden Methoden entspricht den W3C-Standards? Verhalten sich beide in allen Browsern wie erwartet?

Rahmen: keiner;
Grenze: 0;

Answer 1

Beide sind gültig. Sie haben die Wahl.

Ich bevorzuge border:0 weil er kürzer ist; ich finde das einfacher zu lesen. Sie finden vielleicht none besser lesbar. Wir leben in einer Welt, in der es sehr leistungsfähige CSS-Postprozessoren gibt, daher empfehle ich Ihnen, das zu verwenden, was Sie bevorzugen, und es dann durch einen "Kompressor" laufen zu lassen. Es gibt keinen heiligen Krieg, der es wert ist, hier zu kämpfen, aber WebpackLESSPostCSSPurgeCSS ist ein guter 2020 Stack.

Wenn Sie Ihr gesamtes Produktions-CSS von Hand schreiben, behaupte ich - trotz des Gezeters in den Kommentaren -, dass Es kann nicht schaden, sich der Bandbreite bewusst zu sein. . Verwendung von border:0 wird eine unbedeutende Menge an Bandbreite einsparen, aber wenn Sie jedes Byte zählen lassen machen Sie Ihre Website schneller.

---

Die CSS2-Spezifikationen sind hier . Diese werden in CSS3 erweitert, sind aber in keiner Weise relevant für dieses Thema.

'border'
    Value:      [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
    Initial:    see individual properties
    Applies to:     all elements
    Inherited:      no
    Percentages:    N/A
    Media:      visual
    Computed value:     see individual properties 

Sie können jede beliebige Kombination von Breite, Stil und Farbe verwenden.
Hier, 0 legt die Breite fest, none der Stil. Sie haben das gleiche Ergebnis: Es wird nichts angezeigt.

Answer 2

Sie sind gleichwertig in Wirkung , die auf verschiedene Abkürzungen verweisen :

border: 0;
//short for..
border-width: 0;

Und das andere

border: none;
//short for...
border-style: none;

Beides geht, such dir einfach eins aus und nimm es :)

Answer 3

(Hinweis: Diese Antwort wurde am 01.08.2014 aktualisiert, um sie ausführlicher und genauer zu machen und einen Live-Demo )

Ausweitung der Shortand-Eigenschaften

Selon W3C CSS2.1-Spezifikation ( "Ausgelassene Werte werden auf ihre ursprünglichen Werte gesetzt" ), sind die folgenden Eigenschaften gleichwertig:

border: hidden;    border-style: hidden;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: none;      border-style: none;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: 0;         border-style: none;
                   border-width: 0;
                   border-color: <the same as 'color' property>

Wenn diese Regeln die spezifischsten sind, die auf die Ränder eines Elements angewendet werden, dann werden die Ränder nicht angezeigt, entweder wegen der Null-Breite oder wegen der hidden / none Stil. Auf den ersten Blick sehen diese drei Regeln also gleichwertig aus. Sie verhalten sich jedoch unterschiedlich, wenn sie mit anderen Regeln kombiniert werden.

Ränder in einem Tabellenkontext in einem kollabierenden Randmodell

Wenn eine Tabelle mit border-collapse: collapse dann wird jeder gerenderte Rand von mehreren Elementen gemeinsam genutzt (innere Ränder werden von benachbarten Zellen gemeinsam genutzt; äußere Ränder werden von Zellen und der Tabelle selbst gemeinsam genutzt; aber auch Zeilen, Zeilengruppen, Spalten und Spaltengruppen nutzen gemeinsame Ränder). Die Spezifikation definiert einige Regeln für die Lösung von Grenzkonflikten :

1. Grenzen mit dem border-style de hidden haben Vorrang vor allen anderen kollidierenden Grenzen. [ ]

2. Bordüren mit einem Stil von none haben die niedrigste Priorität. [ ]

3. Wenn keiner der Stile hidden und mindestens einer von ihnen ist nicht none dann werden schmale Grenzen zugunsten breiterer Grenzen verworfen. [ ]

4. Wenn sich die Rahmenstile nur in der Farbe unterscheiden, [ ]

Also, in einem Tabellenkontext, border: hidden (oder border-style: hidden ) hat die höchste Priorität und sorgt dafür, dass der gemeinsame Rahmen auf jeden Fall ausgeblendet wird.

Am anderen Ende der Prioritäten, border: none (oder border-style: none ) haben die niedrigste Priorität, gefolgt vom Rand mit der Breite Null (weil es der schmalste Rand ist). Dies bedeutet, dass ein berechneter Wert de border-style: none und eine berechneter Wert de border-width: 0 sind im Wesentlichen identisch.

Kaskadenregeln und Vererbung

Desde none y 0 verschiedene Eigenschaften beeinflussen ( border-style y border-width ), werden sie sich anders verhalten, wenn ein genauere Regelung definiert nur den Stil oder nur die Breite. Siehe Antwort von Chris für ein Beispiel.

Live-Demo !

Sie möchten alle diese Fälle auf einer einzigen Seite sehen? Öffnen Sie die Live-Demo !

Answer 4

Wie andere bereits gesagt haben, sind beide gültig und werden den Zweck erfüllen. Ich bin allerdings nicht zu 100 % überzeugt, dass sie identisch sind. Wenn Sie einige Stil Kaskadierung gehen, dann könnten sie in der Theorie unterschiedliche Ergebnisse produzieren, da sie effektiv verschiedene Werte überschreiben.

Zum Beispiel. Wenn Sie "border: none;" einstellen und dann später zwei verschiedene Stile haben, die die Breite und den Stil des Rahmens außer Kraft setzen, wird einer etwas tun und der andere nicht.

Im folgenden Beispiel werden sowohl im IE als auch im Firefox die ersten beiden Test-Divs ohne Rahmen angezeigt. Die zweiten beiden sind jedoch anders, wobei das erste Div im zweiten Block einfarbig ist und das zweite Div im zweiten Block einen mittelbreiten gestrichelten Rahmen hat.

Obwohl sie beide gültig sind, müssen Sie Ihre Stile im Auge behalten, wenn sie viel kaskadieren und so, wie ich denke.

<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}

</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>

Answer 5

Verwendung von

border: none;

funktioniert in einigen Versionen des IE nicht. IE9 ist in Ordnung, aber in früheren Versionen wird der Rahmen angezeigt, auch wenn der Stil "none" ist. Ich habe diese Erfahrung gemacht, als ich ein Druck-Stylesheet verwendet habe, bei dem ich keine Ränder in den Eingabefeldern haben wollte.

border: 0;

scheint in allen Browsern gut zu funktionieren.