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


Laquelle des deux méthodes est conforme aux normes du W3C? Est-ce qu'ils se comportent tous les deux comme prévu dans les navigateurs?

frontière: aucune;
  frontière: 0;


444
2018-05-27 16:25


origine


Réponses:


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, alors je vous recommande d'utiliser ce que vous préférez, puis de l'exécuter via un "compresseur". Il n'y a pas de guerre sainte qui vaille la peine de se battre ici.

Tout cela dit, si vous écrivez à la main tous vos CSS de production, je maintiens que malgré les commentaires grondants, cela ne fait pas de mal d’être conscient de la bande passante. En utilisant border:0  volonté enregistrer une quantité infinitésimale de bande passante. En soi, cela compte pour très peu mais si vous faire tous les octets, vous rendrez votre site plus rapide.

Les spécifications CSS2 sont ici. Ceux-ci sont étendus dans CSS3 mais pas d'une manière pertinente à 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, de style et de couleur.
Ici, 0 définit la largeur, none le style. Ils ont le même résultat de rendu: rien ne s'affiche.


364
2018-05-27 16:27



Ils sont équivalents effet, indiquant des raccourcis différents:

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

Et l'autre..

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

Les deux fonctionnent, choisissez-en un et allez-y :)


135
2018-05-27 16:28



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

Par exemple. Si vous définissez "border: none;" puis plus tard, deux styles différents qui remplacent la largeur et le style de la bordure, l'un fera quelque chose et l'autre ne le fera pas.

Dans l'exemple suivant à la fois sur IE et Firefox, les deux premiers tests div sortent sans bordure. Les deux autres sont cependant différents avec le premier div dans le second bloc étant uni et le second div dans le second bloc ayant une bordure pointillée de largeur moyenne.

Donc, bien qu'ils soient tous deux valables, vous devrez peut-être garder un œil sur vos styles s'ils font beaucoup de cascade et comme je 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>

36
2018-06-01 09:33



(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 les propriétés shortand

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, alors les bordures ne seront pas affichées, soit à cause de la largeur nulle, soit à cause de hidden/none style. Donc, au premier coup d'oeil, ces trois règles semblent équivalentes. Cependant, ils se comportent de différentes façons lorsqu'ils sont combinés avec d'autres règles.

Bordures dans un contexte de table dans le modèle de bordure réductible

Quand une table est rendue en utilisant border-collapse: collapse, chaque bordure rendue est partagée entre plusieurs éléments (les bordures intérieures sont partagées entre les cellules voisines, les bordures externes sont partagées entre les cellules et la table elle-même, mais aussi les lignes, groupes de lignes, colonnes et groupes de colonnes partagent des bordures). La spécification définit certains règles pour la résolution des conflits frontaliers:

  1. Frontières avec le border-style de hidden ont priorité sur toutes les autres frontières en conflit. [...]

  2. Bordures avec un style de none avoir la priorité la plus basse. [...]

  3. Si aucun des styles n'est hidden et au moins l'un d'entre eux n'est pas none, alors les frontières étroites sont écartées au profit des 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 plus haute priorité et rendra la frontière commune cachée, peu importe quoi.

À l'autre bout des priorités, border: none (ou border-style: none) ont la priorité la plus basse, suivies de la bordure de largeur nulle (parce que c'est la frontière la plus étroite). Cela signifie qu'un valeur calculée de border-style: none et un valeur calculée de border-width: 0 sont essentiellement les mêmes.

Règles en cascade et héritage

Depuis none et 0 affecter différentes propriétés (border-style et border-width), ils se comporteront différemment quand règle plus spécifique définit juste le style ou juste la largeur. Voir Chris répond à titre d'exemple.

Démonstration en direct!

Vous voulez voir tous ces cas en une seule page? Ouvrez le démo en direct!


29
2017-07-18 21:51



En utilisant

border: none;

ne fonctionne pas dans certaines versions d'IE. IE9 est bien, mais dans les versions précédentes, il affiche la bordure même lorsque le style est "aucun". Je l'ai constaté lors de l'utilisation d'une feuille de style d'impression où je ne voulais pas de bordures sur les zones de saisie.

border: 0;

semble fonctionner correctement dans tous les navigateurs.


21
2018-04-06 13:45



Vous pouvez simplement utiliser les deux selon la spécification aimablement fournie par Oli.

J'utilise toujours border:0 none;.

Bien qu'il n'y ait aucun mal à les spécifier séparément et certains navigateurs analyseront le CSS plus rapidement si vous utilisez les appels de propriété CSS1 hérités.

Bien que border:0; sera normalement par défaut le style de la bordure à none, J'ai cependant remarqué que certains navigateurs appliquaient leur style de bordure par défaut qui peut étrangement écraser border:0;.


11
2018-04-21 18:43



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 de vos méthodes semble bien.


6
2018-05-27 16:26



Alors que les résultats seront probablement les mêmes (pas de frontière), le 0 et aucun abordent techniquement des choses différentes.

0 adresse la largeur de la bordure et aucun n'adresse le style de bordure. Evidemment une bordure de 0 largeur est inexistante donc n'aura donc pas de style.

Cependant, si plus tard dans votre feuille de style vous avez l'intention de surcharger cela, vous vous adresserez naturellement à l'un ou à l'autre. Si je voulais maintenant une bordure de 3px, ce serait la bordure prioritaire: 0 en ce qui concerne la largeur. Si je voulais maintenant une bordure en pointillés, ce serait directement la bordure supérieure: aucune en ce qui concerne le style.


2
2017-10-04 21:20



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 div, 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 none et le troisième avec une bordure qui ne peut être "désactivée" qu'en définissant sa largeur. couleur à transparent. Alors essayons l'effet de:

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

        border-style: solide! important;     border-color: rouge! important;           border-width: 2px! important;     border-color: 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 dans Firefox et Chrome:

border: 0; Semble définir la largeur de la bordure à 0 et border-style à none, mais ne changez pas de couleur de bordure;

border: none; Semble ne changer que le style de bordure none)

border: transparent; Semble changer la couleur de la bordure transparent et border-style à none;


2
2018-03-13 14:13



NOUS DEVRIONS UTILISER BORDER 0

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

Merci


0
2018-06-28 01:45