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

543

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

Grenze: keine;
Rand: 0;

css border John Himmelman
quelle

74

Ich mag diese Art von übersehenen Fragen.

Christopher Altman

453

Beide sind gültig. Es ist deine Wahl.

Ich bevorzuge, border:0weil es kürzer ist; Ich finde das leichter zu lesen. Möglicherweise finden Sie nonebesser lesbar. Wir leben in einer Welt sehr leistungsfähiger CSS-Postprozessoren. Ich würde Ihnen daher empfehlen, alles zu verwenden, was Sie bevorzugen, und es dann über einen "Kompressor" laufen zu lassen. Hier gibt es keinen heiligen Krieg, der es wert ist, geführt zu werden.

Abgesehen davon, wenn Sie Ihr gesamtes Produktions-CSS von Hand schreiben, schadet es - trotz des Murrens in den Kommentaren - nicht, bandbreitenbewusst zu sein. Durch border:0 die Verwendung wird eine infinitesimale Menge an Bandbreite gespart. Das allein zählt nur sehr wenig, aber wenn Sie jedes Byte zählen lassen , wird Ihre Website schneller.

Die CSS2-Spezifikationen finden Sie hier . Diese werden in CSS3 erweitert, sind jedoch 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 0legt die Breite noneden Stil fest. Sie haben das gleiche Rendering-Ergebnis: Es wird nichts angezeigt.

Oli
quelle

117

"Wenn Sie viel Verkehr haben, werden Sie den Unterschied bemerken!" - Das bezweifle ich sehr. Selbst bei einer Million Besuchern pro Stunde beträgt der Unterschied nur 3 MB. Dies setzt voraus, dass keiner dieser Besucher das CSS zwischengespeichert hat, und setzt außerdem voraus, dass die Komprimierung 0-Vorteile bietet, beides sehr unwahrscheinliche Aussagen. In Wirklichkeit wäre es wahrscheinlich ein Unterschied von ein paar hundert KB pro Tag, was für eine große Site im Grunde genommen 0 ist. Nicht, dass ich border:nonees irgendwie besser finde , aber dies als Argumentation zu verwenden, ist falsch.

BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Es war mehr Sarkasmus als alles andere ... ... oder Übertreibung ... oder ein bisschen von beidem. Sie haben Recht, dies wird wahrscheinlich nie einen Laufzeiteffekt auf irgendetwas haben, es sei denn, Sie verwenden es millionenfach und lassen alle im Internet gleichzeitig auf Ihr CSS zugreifen.

Oli

6

Vielleicht lohnt es sich, der Beschreibung hinzuzufügen, dass die Aussage sarkasmusistisch war? :)

timofey.com

7

Der Vollständigkeit halber wollte ich noch einen Aspekt hinzufügen. Das Übertragen von 1 MB Daten erfordert die Energiemenge, die in einem herkömmlichen Holzkohlebrikett enthalten ist. Sehen Sie sich diesen TED-Vortrag von Jay Walkers an: player.vimeo.com/video/22399003 .

Zensursula

11

Bin ich der einzige hier, der eine zusätzliche Nanosekunde anfeuert?

Leathan

155

Sie sind in ihrer Wirkung gleichwertig und verweisen auf verschiedene Verknüpfungen :

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

Und der andere..

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

Beide funktionieren, wählen Sie einfach eine aus und machen Sie mit :)

Nick Craver
quelle

5

Beachten Sie auch, dass "Nach einer Länge von Null ist die Einheitenkennung optional" , also border: 0;gültig ist.

Ishmael

59

@ Dubs ernsthaft?, Gefällt dir, wenn Leute auf w3schools verlinken?

Ajax333221

29

@ ajax333221 - Seien Sie dort vorsichtig mit einer Schwarz-Weiß-Haltung gegenüber w3schools (oder einer anderen Website). In diesem Fall ist die Beschreibung in Ordnung, obwohl ich sie im Allgemeinen hasse, ist ihre Erklärung in Bezug auf diese Frage korrekt und ziemlich prägnant. Es steht Ihnen frei, sie im Allgemeinen zu hassen, und ich auch, aber gehen Sie nicht davon aus, dass 0% des dortigen Inhalts nützlich sind. Einige davon sind bis zu einem gewissen Grad nützlich, selbst einige Dinge auf Yahoo-Antworten sind nützlich.

Nick Craver

4

Falsch! Wie in meiner Antwort beschrieben und in der Live-Demo demonstriert , border: 0ist NICHT die Abkürzung für border-width: 0. Stattdessen legt die Kurzversion immer alle drei Eigenschaften fest : border-color, border-styleund border-width.

Denilson Sá Maia

3

@ DenilsonSá Ich sagte, sie hätten die gleiche Wirkung wie die allererste Zeile der Antwort, denn wenn der Rand eine Breite von 0 hat, spielen die anderen 2 hier keine Rolle. Abgesehen davon war CSS 2.1, das das Verhalten hier verdeutlichte, der letzte Aufruf 7 Monate nach dieser Antwort und wurde über ein Jahr danach als Empfehlung veröffentlicht. Wenn Sie hier alte Antworten klären möchten, tun Sie dies bitte! Das Bearbeiten für Updates wird aktiv empfohlen.

Nick Craver

42

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

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

Im folgenden Beispiel für IE und Firefox werden die ersten beiden Test-Divs ohne Rand angezeigt. Die zweiten beiden unterscheiden sich jedoch, wobei der erste Teil im zweiten Block einfach ist und der zweite Teil im zweiten Block einen gestrichelten Rand mittlerer Breite aufweist.

Obwohl beide gültig sind, müssen Sie möglicherweise 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>

Chris
quelle

1

Um die Ränder von Datepickern in Sencha Touch 2 zu entfernen, musste ich border: nonestattdessen verwenden border: 0.

Kris Khaira

39

(Hinweis: Diese Antwort wurde am 01.08.2014 aktualisiert, um sie detaillierter und genauer zu gestalten und eine Live-Demo hinzuzufügen. )

Erweitern der Shortand-Eigenschaften

Gemäß der W3C CSS2.1-Spezifikation ( „Ausgelassene Werte werden auf ihre Anfangswerte gesetzt“ ) sind die folgenden Eigenschaften äquivalent:

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 weder wegen der Breite Null noch wegen hidden/ nonestyle angezeigt . Auf den ersten Blick sehen diese drei Regeln also gleich aus. In Kombination mit anderen Regeln verhalten sie sich jedoch unterschiedlich.

Rahmen in einem Tabellenkontext beim Reduzieren des Rahmenmodells

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

Grenzen mit dem border-stylevon haben hiddenVorrang vor allen anderen widersprüchlichen Grenzen. […]

Rahmen mit einem Stil von nonehaben die niedrigste Priorität. […]

Wenn keiner der Stile vorhanden ist hiddenund mindestens einer nicht none, werden schmale Ränder zugunsten breiterer verworfen. […]

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

In einem Tabellenkontext hat border: hidden(oder border-style: hidden) also die höchste Priorität und macht den gemeinsamen Rand verborgen, egal was passiert.

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

Kaskadierende Regeln und Vererbung

Da noneund sich 0auf verschiedene Eigenschaften ( border-styleund border-width) auswirken , verhalten sie sich unterschiedlich, wenn eine spezifischere Regel nur den Stil oder nur die Breite definiert. Siehe Chris Antwort für ein Beispiel.

Live-Demo !

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

Denilson Sá Maia
quelle

21

Verwenden von

border: none;

funktioniert in einigen Versionen von IE nicht. IE9 ist in Ordnung, aber in früheren Versionen wird der Rahmen angezeigt, auch wenn der Stil "keine" ist. Ich habe dies erlebt, als ich ein Druck-Stylesheet verwendet habe, bei dem ich keine Rahmen für die Eingabefelder haben wollte.

border: 0;

scheint in allen Browsern gut zu funktionieren.

Kieran
quelle

12

Sie können einfach beide gemäß der von Oli freundlicherweise angegebenen Spezifikation verwenden.

Ich benutze immer border:0 none;.

Es schadet jedoch nicht, sie separat anzugeben, und einige Browser analysieren das CSS schneller, wenn Sie die alten CSS1-Eigenschaftsaufrufe verwenden.

Obwohl border:0;normalerweise der Rahmenstil standardmäßig verwendet wird none, habe ich jedoch festgestellt, dass einige Browser ihren Standardrahmenstil erzwingen, der seltsamerweise überschrieben werden kann border:0;.

Xenni82
quelle

"Einige Browser analysieren das CSS schneller" → Es gibt keinen merklichen Unterschied in der CSS-Analysezeit. Tatsächlich ist die CSS-Analysezeit für 99,999999999999% der Fälle nicht relevant. Die CSS-Renderzeit ist viel wichtiger (und auch völlig unabhängig von dieser Frage).

Denilson Sá Maia

1

Einige Browser? Was meinst du? Scheint wie ein Traum oder so.

Rootical V.

7

Ich benutze:

border: 0;

Ab 8.5.4 in CSS 2.1 :

'Rand'

Wert: [<Breitenbreite> || <Bordstil> || <'border-top-color'>] | erben

Jede Ihrer Methoden sieht also gut aus.

Cletus
quelle

1

Null gepunktet sieht genauso aus wie Null fest

Christopher Altman

1

Wahr. Aber siehe auch Chris 'Antwort

Antony Hatchkins

5

Nun, um zu sehen , genau den Unterschied zwischen border: 0und border: nonewir können einige Experimente machen.

Experiment:

Erstellen wir drei Divs, einen, dessen Rand nur durch Setzen der Breite auf Null deaktiviert werden kann, den zweiten, der nur durch Setzen des Stils auf "Null" deaktiviert werden kann, und einen dritten mit einem Rand, der nur durch Setzen des "Rahmens" deaktiviert werden kann Farbe zu transparent. Dann versuchen wir den Effekt von:

border: 0;
border: none;
border: transparent

Randstil: solide! wichtig; Randfarbe: rot! wichtig; Randbreite: 2px! wichtig; Randfarbe: rot! wichtig; Randbreite: 2px! wichtig; Randstil: solide! wichtig;

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Meine Ergebnisse waren sowohl bei Firefox als auch bei Chrom gleich:

border: 0;Scheint die Rahmenbreite auf 0und den Rahmenstil auf zu setzen none, aber die Rahmenfarbe nicht zu ändern;

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

border: transparent;Scheint die Rahmenfarbe in transparentund den Rahmenstil in zu ändern none;

Alter Danzig
quelle

2

Während die Ergebnisse höchstwahrscheinlich gleich sind (kein Rand), sprechen die 0 und keine technisch unterschiedliche Dinge an.

0 adressiert die Randbreite und keine adressiert den Randstil. Offensichtlich ist ein Rand mit einer Breite von 0 nicht vorhanden und hat daher keinen Stil.

Wenn Sie dies jedoch später in Ihrem Stylesheet überschreiben möchten, würden Sie sich natürlich speziell mit dem einen oder anderen befassen. Wenn ich jetzt einen 3px-Rand wollte, würde dieser den Rand direkt überschreiben: 0 in Bezug auf die Breite. Wenn ich jetzt einen gepunkteten Rand haben wollte, würde dieser den Rand direkt überschreiben: keinen in Bezug auf das Styling.

Carly
quelle

2

Einfachster Weg, um Rand mit CSS zu entfernen

border: 0;

Liebe Kumar
quelle

-1

WIR SOLLTEN GRENZE 0 VERWENDEN

Nach meiner Meinung und Erfahrung würde ich vorschlagen, bitte Border: 0 zu verwenden; Es gibt einen gültigen und sehr guten Grund, denn wenn wir einen Rand verwenden: Keiner, ich verstehe, dass es funktioniert, aber denken Sie daran, dass wir einen Rand verwenden, 1px, 2px, 3px usw. Ich meine, wir geben den Wert an, den unser Rand ist ... px / em / rem richtig, also müssen wir border verwenden: 0; zum Entfernen des Randwerts, weil, wie wir wissen, wenn wir Hintergrund verwenden: keine; Es bedeutet, dass wir den Hintergrund entfernen, wenn es sich nicht um einen anderen Wert handelt.

Vielen Dank

Vinod Kumar
quelle

-3

In meinem Punkt,

border:none funktioniert aber nicht gültig w3c standard

so besser können wir verwenden border:0;

anglimasS
quelle

6

Es ist nichts ungültig border: none.

Quentin