web-dev-qa-db-fra.com

Devrais-je utiliser 'border: none' ou 'border: 0'?

Laquelle des deux méthodes est conforme aux normes W3C? Est-ce que les deux se comportent comme prévu sur les navigateurs?

bordure: aucune;
bordure: 0;

cssborder
481
John Himmelman

Les deux sont valables. C'est ton choix.

Je préfère border:0 parce que c'est plus court; Je trouve cela plus facile à lire. Vous pouvez trouver none plus lisible. Nous vivons dans un monde de post-processeurs CSS très performants, je vous recommande donc d'utiliser ce que vous préférez, puis de le faire passer par un "compresseur". Il n'y a pas de guerre sainte qui vaille la peine d'être combattue ici.

Cela dit, si vous écrivez à la main tous vos fichiers CSS de production, je maintiens - malgré les grognements dans les commentaires - que la conscience de la bande passante ne fait pas de mal. Utiliser border:0will enregistre une quantité infinitésimale de bande passante. En soi, cela compte pour très peu, mais si vous comptez chaque octet, vous rendrez votre site plus rapide.

Les spécifications CSS2 sont ici . Celles-ci sont étendues dans CSS3 mais ne présentent aucun intérêt pour cela.

'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

Vous pouvez utiliser n'importe quelle combinaison de largeur, style et couleur.
Ici, 0 définit la largeur, none le style. Ils ont le même résultat de rendu: rien n'est affiché.

397
Oli

Ils sont équivalents dans effect, pointant vers différents raccourcis :

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

Et l'autre..

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

Les deux fonctionnent, il suffit de choisir un et aller avec elle :)

139
Nick Craver

Comme d'autres l'ont dit, les deux sont valables et feront l'affaire. Je ne suis pas à 100% convaincu qu'ils sont identiques cependant. Si vous avez des cascades de style en cours, ils pourraient théoriquement produire des résultats différents car ils sont en train de remplacer des valeurs différentes.

Par exemple. Si vous définissez "border: none;" et ensuite, deux styles différents remplaçant la largeur et le style de la bordure, l’un fera quelque chose et l’autre ne le fera pas.

Dans l'exemple suivant sur IE et sur Firefox, les deux premiers tests divs sortent sans bordure. Les deux deuxièmes sont cependant différents, la première div du deuxième bloc étant simple et la deuxième du deuxième bloc ayant une bordure pointillée de largeur moyenne.

Donc, bien qu'ils soient tous les deux valables, vous devrez peut-être garder un œil sur vos styles s'ils font beaucoup de cascades et autres, comme je le pense.

<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

(note: cette réponse a été mise à jour le 2014-08-01 pour la rendre plus détaillée, plus précise et pour ajouter un démo en direct )

Élargir le shortand propriétés

Selon Spécification W3C CSS2.1 («Les valeurs omises sont définies sur leurs valeurs initiales»), les propriétés suivantes sont équivalentes:

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>

Si ces règles sont les plus spécifiques appliquées aux bordures d'un élément, elles ne seront pas affichées, soit à cause de la largeur nulle, soit à cause du style hiddennone. Ainsi, au premier regard, ces trois règles semblent équivalentes. Cependant, ils se comportent différemment lorsqu'ils sont combinés avec d'autres règles.

Bordures dans un contexte de tableau dans le modèle de bordure en train de se réduire

Lorsqu'un tableau est rendu à l'aide de border-collapse: collapse, chaque bordure rendue est partagée entre plusieurs éléments (les bordures internes sont partagées par des cellules voisines; les bordures externes sont partagées par les cellules et le tableau lui-même; mais également les lignes, les groupes de lignes et les groupes de colonnes les frontières). La spécification définit certaines règles de résolution des conflits de frontières :

  1. Les bordures avec le border-style de hidden prévalent sur toutes les autres frontières en conflit. […]

  2. Les bordures avec un style none ont la priorité la plus basse. […]

  3. Si aucun des styles n'est hidden et qu'au moins un d'entre eux n'est pas none, les bordures étroites sont supprimées au profit de styles plus larges. […]

  4. Si les styles de bordure ne diffèrent que par la couleur, […]

Ainsi, dans un contexte de table, border: hidden (ou border-style: hidden) aura la priorité la plus élevée et rendra la bordure partagée masquée, quoi qu'il en soit.

À l'autre extrémité des priorités, border: none (ou border-style: none) a la priorité la plus basse, suivi de la bordure de largeur zéro (car il s'agit de la bordure la plus étroite). Cela signifie qu'une _/valeur calculée de border-style: none et une valeur calculée de border-width: 0 sont essentiellement les mêmes.

Règles en cascade et héritage

Étant donné que none et 0 affectent différentes propriétés (border-style et border-width), leur comportement sera différent lorsqu'un règle plus spécifique définit uniquement le style ou uniquement la largeur. Voir Chris answer pour un exemple.

Démo en direct !

Vous voulez voir tous ces cas sur une seule page? Ouvrez la démo live!

30
Denilson Sá Maia

En utilisant 

border: none;

ne fonctionne pas dans certaines versions d'IE . IE9 convient, mais dans les versions précédentes, la bordure était affichée même lorsque le style était "aucun" ..____. bordures sur les champs de saisie.

border: 0;

semble fonctionner correctement dans tous les navigateurs.

21
Kieran

Vous pouvez simplement utiliser les deux, conformément à la spécification aimablement fournie par Oli.

J'utilise toujours border:0 none;.

Bien qu'il ne soit pas nuisible de les spécifier séparément et que certains navigateurs analyseront le CSS plus rapidement si vous utilisez les appels de propriété hérités CSS1.

Bien que border:0; attribue normalement le style de bordure à none, j’ai cependant remarqué que certains navigateurs appliquent leur style de bordure par défaut, ce qui peut étrangement écraser border:0;.

11
Xenni82

J'utilise:

border: 0;

De 8.5.4 en CSS 2.1 :

'frontière'

Valeur: [<border-width> || <style de bordure> || <'border-top-color'>] | hériter

Donc, l'une ou l'autre de vos méthodes a l'air bien.

6
cletus

Eh bien, pour voir précisément la différence entre border: 0 et border: none, nous pouvons faire quelques expériences.

Expérience:

Permet de créer trois divs, le premier dont la bordure ne peut être désactivée qu'en définissant sa largeur à zéro, le second qui ne peut être désactivé qu'en définissant son style sur aucun, et le troisième avec une bordure qui ne peut être "désactivée" qu'en définissant son couleur à transparent. Essayons ensuite l'effet de:

  • border: 0;
  • border: none;

  • border: transparent

    style de bordure: solide! important; couleur de bordure: rouge! important; border-width: 2px! important; couleur de bordure: rouge! important; border-width: 2px! important; style de bordure: solide! important; 

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>

Mes résultats étaient les mêmes pour Firefox et Chrome:

border: 0; Semble régler la largeur de la bordure sur 0 et le style de la bordure sur none, mais pas changer la couleur de la bordure;

border: none; semble changer uniquement le style de la bordure (en none);

border: transparent; Semble changer la couleur de la bordure en transparent et son style en none;

3
Agesly Danzig

Bien que les résultats soient vraisemblablement les mêmes (pas de bordure), les 0 et les 0 ne traitent techniquement pas des choses différentes.

0 adresse la largeur de la bordure et aucune adresse style de bordure. Évidemment, une bordure de 0 largeur est inexistante et n'aura donc pas de style.

Cependant, si plus tard dans votre feuille de style vous avez l’intention de remplacer cela, vous vous intéresserez naturellement à l’un ou l’autre. Si je voulais maintenant une bordure de 3 pixels, ce serait directement la bordure: 0 en ce qui concerne la largeur. Si je voulais maintenant une bordure en pointillé, ce serait une bordure qui prime: aucune en ce qui concerne le style.

2
Carly

WE DEVRAIT UTILISER LA FRONTIÈRE 0

Selon mon opinion et mon expérience, je suggérerais de bien vouloir utiliser Border: 0; Il y a une raison valable et très bonne car chaque fois que nous utilisons une frontière: aucune, je comprends que cela fonctionne, mais pensez à utiliser une bordure, 1px, 2px, 3px, etc. Je veux dire que nous donnons la valeur à notre frontière is ... px/em/rem right, nous devons donc utiliser border: 0; pour supprimer la valeur de la frontière, car comme nous le savons lorsque nous utilisons l’arrière-plan: none; cela signifie que nous supprimons l'arrière-plan d'un arrière-plan qui n'est pas une valeur, mais qui est autre chose.

Merci

0
Vinod Kumar