wake-up-neo.com

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

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

grenze: keine;
Grenze: 0;

481
John Himmelman

Beide sind gültig. Es ist Ihre Wahl.

Ich bevorzuge border:0, weil es kürzer ist; Ich finde das einfacher zu lesen. Vielleicht finden Sie none besser lesbar. Wir leben in einer Welt sehr leistungsfähiger CSS-Postprozessoren. Ich empfehle Ihnen, das zu verwenden, was Sie bevorzugen, und es dann durch einen "Kompressor" laufen zu lassen. Hier gibt es keinen heiligen Krieg, den es zu kämpfen lohnt.

Alles in allem, wenn Sie Ihr gesamtes Produktions-CSS von Hand schreiben, behaupte ich - trotz des Murrens in den Kommentaren - es schadet nicht, auf Bandbreite zu achten. Verwenden Sie border:0will, um unendlich viel Bandbreite zu sparen. Allein das zählt für wenig, aber wenn Sie jedes Byte zählen lassen, werden Sie Ihre Website schneller machen.

Die CSS2-Spezifikationen sind hier . Diese werden in CSS3 erweitert, sind aber in keiner Weise relevant.

'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 eine beliebige Kombination aus Breite, Stil und Farbe verwenden.
Hier legt 0 die Breite fest, none den Stil. Sie haben das gleiche Rendering-Ergebnis: Es wird nichts angezeigt.

397
Oli

Sie sind in effect gleichwertig, zeigt auf verschiedene Tastenkombinationen :

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

Und der andere..

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

Beide arbeiten, wählen Sie einfach eine aus und gehen Sie mit :)

139
Nick Craver

Wie andere schon gesagt haben, sind beide gültig und werden den Trick tun. Ich bin nicht zu 100% überzeugt, dass sie identisch sind. Wenn Sie eine Art Kaskadierung haben, können sie theoretisch zu unterschiedlichen Ergebnissen führen, da sie andere Werte effektiv überschreiben.

Zum Beispiel. Wenn Sie "border: none;" und später haben zwei verschiedene Stile, die die Breite und den Rand des Rahmens überschreiben, dann wird einer etwas tun und der andere nicht.

Im folgenden Beispiel werden sowohl bei IE als auch bei Firefox die ersten beiden Test-Divs ohne Rand ausgegeben. Die zweiten beiden unterscheiden sich jedoch, wobei das erste div im zweiten Block eben ist und das zweite div im zweiten Block eine gestrichelte Umrandung mit mittlerer Breite aufweist.

Obwohl beide gültig sind, müssen Sie möglicherweise Ihre Stile im Auge behalten, wenn sie viel kaskadieren und 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>
40
Chris

(Hinweis: Diese Antwort wurde am 2014-08-01 aktualisiert, um sie detaillierter und genauer zu machen und um ein Live-Demo ) hinzuzufügen.

Erweitern der Shortand-Eigenschaften

Gemäß W3C CSS2.1-Spezifikation ("Ausgelassene Werte werden auf ihre Anfangswerte gesetzt"), die folgenden Eigenschaften sind 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, werden die Ränder nicht angezeigt, entweder aufgrund der Breite von null oder wegen der hiddennone-Form. Auf den ersten Blick sehen diese drei Regeln also gleich aus. Sie verhalten sich jedoch unterschiedlich, wenn sie mit anderen Regeln kombiniert werden.

Rahmen in einem Tabellenkontext in einem zusammenfallenden Rahmenmodell

Wenn eine Tabelle mit border-collapse: collapse gerendert wird, wird jeder gerenderte Rahmen von mehreren Elementen gemeinsam genutzt (innere Rahmen werden als benachbarte Zellen gemeinsam genutzt, äußere Rahmen werden von Zellen und der Tabelle selbst gemeinsam genutzt), aber auch Zeilen, Zeilengruppen, Spalten und Spaltengruppen Grenzen). Die Spezifikation definiert einige Regeln für die Lösung von Grenzkonflikten :

  1. Grenzen mit dem border-style von hidden haben Vorrang vor allen anderen in Konflikt stehenden Grenzen. […]

  2. Rahmen mit einem Stil von none haben die niedrigste Priorität. […]

  3. Wenn keiner der Stile hidden ist und mindestens einer von ihnen nicht none ist, werden enge Ränder zugunsten breiterer Rahmen verworfen. […]

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

In einem Tabellenkontext hat also border: hidden (oder border-style: hidden) die höchste Priorität und macht den gemeinsamen Rand auf jeden Fall verborgen.

Am anderen Ende der Prioritäten haben border: none (oder border-style: none) die niedrigste Priorität, gefolgt von der Zero-Width-Grenze (da es sich um die engste Grenze handelt). Dies bedeutet, dass ein _/berechneter Wert von border-style: none und ein berechneter Wert von border-width: 0 im Wesentlichen gleich sind.

Kaskadenregeln und Vererbung

Da none und 0 verschiedene Eigenschaften beeinflussen (border-style und border-width), verhalten sie sich unterschiedlich, wenn speziellere Regel nur den Stil oder nur die Breite definiert. Siehe Chris answer für ein Beispiel.

Live-Demo !

Möchten Sie alle diese Fälle auf einer einzigen Seite sehen? Öffnen Sie die LIVE-DEMO!

30

Verwenden 

border: none;

funktioniert nicht in einigen Versionen von IE . IE9 ist in Ordnung, aber in früheren Versionen wird der Rahmen angezeigt, auch wenn der Stil "none" ..__ ist. Ich habe dies erlebt, wenn ich ein Druck-Stylesheet verwende, wo ich es nicht wollte Grenzen an den Eingabefeldern.

border: 0;

scheint in allen Browsern gut zu funktionieren.

21
Kieran

Sie können beides einfach gemäß der von Oli zur Verfügung gestellten Spezifikation verwenden.

Ich benutze immer border:0 none;.

Es ist jedoch kein Nachteil, wenn Sie diese separat angeben, und einige Browser werden das CSS schneller analysieren, wenn Sie die älteren CSS1-Eigenschaftsaufrufe verwenden.

Obwohl border:0; normalerweise den Rahmenstil standardmäßig auf none setzt, habe ich jedoch festgestellt, dass einige Browser ihren Standardrahmenstil erzwingen, der border:0; seltsam überschreiben kann.

11
Xenni82

Ich benutze:

border: 0;

Von 8.5.4 in CSS 2.1 :

'Rand'

Wert: [<Randbreite> || <border-style> || <'border-top-color'>] | erben

Jede Ihrer Methoden sieht also gut aus.

6
cletus

Um genau den Unterschied zwischen border: 0 und border: none zu sehen, können wir einige Experimente machen.

Experiment:

Lassen Sie uns drei Divs erstellen, erstens, deren Rand nur deaktiviert werden kann, indem Sie die Breite auf Null setzen, das zweite, das nur deaktiviert werden kann, indem Sie den Stil auf Keine festlegen, und ein Drittel mit einem Rand, der nur durch die Einstellung "deaktiviert" werden kann Farbe zu transparent. Dann können wir die Wirkung von versuchen:

  • border: 0;
  • border: none;
  • border: transparent

    Rahmenstil: fest! wichtig; Randfarbe: rot! wichtig; Rahmenbreite: 2px! wichtig; Randfarbe: rot! wichtig; Rahmenbreite: 2px! wichtig; Rahmenstil: fest! wichtig;

var container = document.querySelector('#container');
var btnSetZero = document.querySelector('#setZero');
var btnSetNone = document.querySelector('#setNone');
var btnSetTransparent = document.querySelector('#setTransparent');
var btnReset = document.querySelector('#reset');
btnSetZero.addEventListener('click', () => {
	container.className = "border-zero";
});

btnSetNone.addEventListener('click', () => {
	container.className = "border-none";
});

btnSetTransparent.addEventListener('click', () => {
	container.className = "border-transparent";
});

btnReset.addEventListener('click', () => {
	container.className = "";
});
div div {
  border: 2px solid red;
  margin: 2px;
  font-family: monospace;
  white-space: nowrap;
  width: 250px;
}

div.border-zero div {
  border: 0;
}
div.border-none div {
  border: none;
}
div.border-transparent div {
  border: transparent;
}
<div id="container">
  <div style="border-style: solid!important; border-color: red!important;">
    border-style: solid!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-color: red!important;">
    border-width: 2px!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-style: solid!important;">
    border-width: 2px!important;<br>
    border-style: solid!important;
  </div>
</div>

<button id="setZero">border: 0;</button>
<button id="setNone">border: none;</button>
<button id="setTransparent">border: transparent;</button>
<button id="reset">reset</button>

Meine Ergebnisse waren in Firefox und Chrom gleich:

border: 0; Scheint die Umrandungsbreite auf 0 und den Umrandungsstil auf none festzulegen, aber die Umrandungsfarbe nicht zu ändern.

border: none; Scheint nur den Rahmenstil (in none) zu ändern.

border: transparent; Scheint die Umrandungsfarbe in transparent und den Umrandungsstil in none zu ändern.

3
Agesly Danzig

Während die Ergebnisse höchstwahrscheinlich gleich sind (kein Rahmen), sind die 0 und keine technisch verschiedene Dinge.

0 bezieht sich auf die Randbreite und keine auf den Randstil. Offensichtlich ist ein Rahmen mit der Breite 0 nicht vorhanden, daher wird kein Stil verwendet.

Wenn Sie dies später in Ihrem Stylesheet jedoch überschreiben möchten, werden Sie natürlich das eine oder das andere gezielt ansprechen. Wenn ich jetzt einen 3px-Rand wollte, wäre das direkt der Rand: 0 in Bezug auf die Breite. Wenn ich jetzt eine gepunktete Grenze haben wollte, wäre dies direkt die Grenze: keine in Bezug auf das Styling.

2
Carly

WE SOLLTE GRENZE 0

Nach meiner Meinung und Erfahrung würde ich vorschlagen, verwenden Sie bitte Border: 0; .__ Es gibt einen guten und sehr guten Grund, denn wann immer wir border verwenden: keine, ich verstehe, dass es funktioniert, aber denken Sie daran, dass wir eine Grenze verwenden, 1px, 2px, 3px usw. is ... px/em/rem recht, also müssen wir border verwenden: 0; zum Entfernen des Grenzwerts, da wir wissen, wann wir Hintergrund verwenden: none; es bedeutet, dass wir den Hintergrund entfernen, der nicht ein anderer Wert ist.

Vielen Dank

0
Vinod Kumar