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

544

Laquelle des deux méthodes est conforme aux normes du W3C? Se comportent-ils tous les deux comme prévu dans les navigateurs?

frontière: aucune;
bordure: 0;

css border

— John Himmelman
source

74

J'aime ce type de questions oubliées.

— Christopher Altman

454

Les deux sont valables. C'est ton choix.

Je préfère border:0parce que c'est plus court; Je trouve cela plus facile à lire. Vous pouvez trouvernone plus lisible. Nous vivons dans un monde de post-processeurs CSS très performants, donc je vous recommande 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 mérite d'être combattue ici.

Cela dit, si vous écrivez à la main tous vos CSS de production, je maintiens - malgré les grognements dans les commentaires - que la sensibilité de la bande passante ne fait pas de mal. L' utilisation border:0 va enregistrer une quantité infinitésimale de bande passante. À lui seul, cela ne compte que pour très peu, mais si vous comptez chaque octet , vous rendrez votre site Web plus rapide.

Les spécifications CSS2 sont ici . Celles-ci sont étendues dans CSS3 mais ne sont d'aucune manière pertinentes 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, de style et de couleur.
Ici, 0définit la largeur, nonele style. Ils ont le même résultat de rendu: rien n'est affiché.

— Oli
source

117

"Si vous avez beaucoup de trafic, vous remarquerez la différence!" - J'en doute vraiment. Même avec un million de visiteurs par heure, la différence n'est que de 3 Mo. Et cela suppose qu'aucun de ces visiteurs n'a le CSS mis en cache, et suppose également que la compression fournit 0 avantage, deux déclarations très improbables. En réalité, il y aurait probablement une différence de quelques centaines de Ko par jour, ce qui correspond à 0 pour un grand site. Non pas que je pense que border:nonec'est mieux, mais utiliser cela comme raisonnement est défectueux.

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft C'était plus du sarcasme qu'autre chose ..… Ou une hyperbole… Ou un peu des deux. Vous avez raison, cela n'aura probablement aucun effet d'exécution sur quoi que ce soit à moins que vous ne l'utilisiez des millions de fois et que tout le monde sur Internet accède à votre CSS à la fois.

— Oli

6

Peut-être qu'il vaut la peine d'ajouter à la description que la déclaration était sarcasmique? :)

— timofey.com

7

Juste pour être complet, je voulais ajouter un autre aspect. Le transfert de 1 Mo de données nécessite la quantité d'énergie contenue dans une briquette de charbon de bois commune. Voir cette présentation TED de Jay Walkers: player.vimeo.com/video/22399003 .

— Zensursula

11

Suis-je le seul ici à applaudir à une nanoseconde supplémentaire?

— Leathan

155

Ils sont équivalents en effet , 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, choisissez-en un et allez-y :)

— Nick Craver
source

5

Notez également que "Après une longueur nulle, l'identifiant d'unité est facultatif" , border: 0;est donc valide.

— Ismaël

59

@Dubs sérieux?, Vous aimez quand les gens se connectent à w3schools?

— ajax333221

29

@ ajax333221 - Soyez prudent là-bas avec une attitude en noir et blanc envers w3schools (ou tout site Web). Dans ce cas, la description est correcte, bien que je les déteste en général, leur explication en ce qui concerne cette question est correcte et assez succincte. Vous êtes libre de les détester en général, et je le fais, mais ne présumez pas que 0% du contenu y est utile, certains le sont, même certaines choses sur yahoo les réponses sont utiles, dans une certaine mesure.

— Nick Craver

4

Faux! Comme décrit dans ma réponse et démontré dans la démo en direct , ce border: 0n'est PAS le raccourci pour border-width: 0. Au lieu de cela, la version courte définit toujours les trois propriétés: border-color, border-styleet border-width.

— Denilson Sá Maia

3

@ DenilsonSá J'ai dit qu'ils étaient les mêmes en effet que la première ligne de la réponse, parce que si la frontière a une largeur 0, l'autre 2 ne comptent pas ici. Soit dit en passant, CSS 2.1 qui a clarifié le comportement ici a été le dernier appel 7 mois après cette réponse, et a poussé comme une recommandation plus d'un an après. Si vous souhaitez clarifier les anciennes réponses ici, veuillez le faire! La modification des mises à jour est vivement encouragée.

— Nick Craver

42

Comme d'autres l'ont dit, les deux sont valides et feront l'affaire. Je ne suis cependant pas convaincu à 100% qu'ils sont identiques. Si vous avez un style en cascade, 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;" et puis plus tard avoir deux styles différents qui remplacent la largeur et le style de la bordure, alors l'un fera quelque chose et l'autre pas.

Dans l'exemple suivant sur IE et Firefox, les deux premières divisions de test sortent sans bordure. Les deux seconds sont cependant différents, le premier div du deuxième bloc étant uni et le deuxième div du deuxième bloc ayant une bordure en pointillés de largeur moyenne.

Donc, bien qu'ils soient tous les deux valides, vous devrez peut-être garder un œil sur vos styles s'ils font beaucoup en 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>

— Chris
source

1

Pour supprimer les bordures de datepickers dans Sencha Touch 2, j'ai dû utiliser à la border: noneplace de border: 0.

— Kris Khaira

39

(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 une démo en direct )

Extension des propriétés shortand

Selon la 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/ nonestyle. Donc, à première vue, ces trois règles semblent équivalentes. Cependant, ils se comportent de différentes manières lorsqu'ils sont combinés avec d'autres règles.

Bordures dans un contexte de table dans le modèle de bordure repliable

Lorsqu'un tableau est rendu à l'aide de border-collapse: collapse, chaque bordure rendue est partagée entre plusieurs éléments (les bordures intérieures sont partagées entre en tant que cellules voisines; les bordures extérieures sont partagées entre les cellules et le tableau lui-même; mais aussi les lignes, les groupes de lignes, les colonnes et les groupes de colonnes partagent les bordures) ). La spécification définit certaines règles pour la résolution des conflits frontaliers :

Les frontières avec le border-stylede l' hiddenemportent sur toutes les autres frontières en conflit. […]

Les bordures avec un style noneont la priorité la plus basse. […]

Si aucun des styles ne l'est hiddenet qu'au moins l'un d'entre eux ne l'est pas none, les bordures étroites sont rejetées au profit de plus larges. […]

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

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

À l'autre extrémité des priorités, border: none(ou border-style: none) ont la priorité la plus faible, suivie de la bordure de largeur nulle (car c'est la bordure la plus étroite). Cela signifie qu'une valeur calculée de border-style: noneet une valeur calculée de border-width: 0sont essentiellement les mêmes.

Règles en cascade et héritage

Depuis noneet 0affecter des propriétés différentes ( border-styleet border-width), ils se comportent différemment quand une règle plus spécifique définit simplement le style ou juste la largeur. Voir la réponse de Chris pour un exemple.

Démo en direct !

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

— Denilson Sá Maia
source

21

En utilisant

border: none;

ne fonctionne pas dans certaines versions d'IE. IE9 est très bien, mais dans les versions précédentes, il affiche la bordure même lorsque le style est "aucun". J'ai vécu cela 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 bien fonctionner dans tous les navigateurs.

— Kieran
source

12

Vous pouvez simplement utiliser les deux selon les spécifications aimablement fournies 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;le style de bordure soit normalement défini par défaut none, j'ai cependant remarqué que certains navigateurs appliquent leur style de bordure par défaut, ce qui peut étrangement remplacer border:0;.

— Xenni82
source

"certains navigateurs analyseront le CSS plus rapidement" → il n'y a pas de différence notable dans le temps d'analyse CSS. Et, vraiment, le temps d'analyse CSS n'est pas pertinent pour 99,999999999999% des cas. Le temps de rendu CSS est beaucoup plus important (et aussi totalement indépendant de cette question).

— Denilson Sá Maia

1

Certains navigateurs? Que voulez-vous dire? On dirait un rêve ou quelque chose.

— Rootical V.

7

J'utilise:

border: 0;

De 8.5.4 en CSS 2.1 :

'frontière'

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

Donc, l'une ou l'autre de vos méthodes est parfaite.

— cletus
source

1

Zéro pointé ressemble à zéro solide

— Christopher Altman

1

Vrai. Mais, voir aussi la réponse de Chris

— Antony Hatchkins

5

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

Expérience:

Permet de créer trois divisions, la première dont la bordure ne peut être désactivée qu'en définissant sa largeur à zéro, la seconde qui ne peut être désactivée qu'en définissant son style sur none, et une 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 bordure: solide! important; couleur de la bordure: rouge! important; border-width: 2px! important; couleur de la bordure: rouge! important; border-width: 2px! important; style bordure: solide! important;

Afficher l'extrait de code

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>

Développer l'extrait

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

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

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

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

— Agesly Danzig
source

2

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

0 correspond à la largeur de la bordure et aucun au style de la bordure. Évidemment, une bordure de largeur 0 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 adresserez naturellement spécifiquement à l'un ou à l'autre. Si je voulais maintenant une bordure 3px, cela remplacerait directement la bordure: 0 en ce qui concerne la largeur. Si je voulais maintenant une bordure en pointillés, ce serait la bordure directement prioritaire: aucune en ce qui concerne le style.

— Carly
source

2

Le moyen le plus simple de supprimer la bordure avec CSS

border: 0;

— Love Kumar
source

-1

NOUS DEVONS UTILISER LA FRONTIÈRE 0

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

Merci

— Vinod Kumar
source

-3

Dans mon point,

border:none fonctionne mais pas la norme w3c valide

nous pouvons donc mieux utiliser border:0;

— anglimas
source

6

Il n'y a rien d'invalide border: none.

— Quentin