Dovrei usare 'border: none' o 'border: 0'?

544

Quale dei due metodi è conforme agli standard W3C? Si comportano entrambi come previsto tra i browser?

bordo: nessuno;
bordo: 0;

css border

— John Himmelman
fonte

74

Mi piace questo tipo di domande trascurate.

— Christopher Altman,

454

Entrambi sono validi È la vostra scelta.

Preferisco border:0perché è più corto; Lo trovo più facile da leggere. Potresti trovare nonepiù leggibile. Viviamo in un mondo di post-processori CSS molto capaci, quindi ti consiglio di usare quello che preferisci e poi eseguirlo attraverso un "compressore". Non c'è guerra santa degna di essere combattuta qui.

Detto questo, se stai scrivendo a mano tutto il tuo CSS di produzione, sostengo - nonostante il brontolio nei commenti - non fa male essere consapevoli della larghezza di banda. L'uso border:0 consente di risparmiare una quantità infinitesimale di larghezza di banda. Di per sé conta poco, ma se fai ogni byte conta , renderai il tuo sito più veloce.

Le specifiche CSS2 sono qui . Questi sono estesi in CSS3 ma non sono in alcun modo rilevanti per questo.

'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

Puoi usare qualsiasi combinazione di larghezza, stile e colore.
Qui, 0imposta la larghezza, nonelo stile. Hanno lo stesso risultato di rendering: non viene mostrato nulla.

— oli
fonte

117

"Se hai molto traffico, noterai la differenza!" - Ne dubito fortemente. Anche con un milione di visitatori l'ora, la differenza è di soli 3 MB. E questo presuppone che nessuno di quei visitatori abbia il CSS nella cache, e presume anche che la compressione offra 0 benefici, entrambe affermazioni molto improbabili. In realtà, probabilmente ci sarebbero alcune centinaia di KB di differenza al giorno, che è sostanzialmente 0 per un sito di grandi dimensioni. Non che penso border:nonesia in qualche modo migliore, ma usare questo come ragionamento è errato.

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Era più sarcasmo di ogni altra cosa ... ... O iperbole ... O un po 'di entrambi. Hai ragione, questo probabilmente non avrà mai un effetto di runtime su nulla se non lo usi miliardi di volte e fai in modo che tutti su Internet accedano al tuo CSS contemporaneamente.

— Oli,

6

Forse vale la pena aggiungere alla descrizione che l'affermazione era sarcasmo-istica? :)

— timofey.com il

7

Solo per completezza volevo aggiungere un altro aspetto. Il trasferimento di 1 MB di dati richiede la quantità di energia contenuta in una bricchetta di carbone comune. Guarda questo discorso TED su Jay Walkers: player.vimeo.com/video/22399003 .

— Zensursula,

11

Sono l'unico qui che fa il tifo per un ulteriore nanosecondo?

— Leathan,

155

Sono equivalenti in effetti , indicando diverse scorciatoie :

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

E l'altro..

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

Entrambi funzionano, scegline uno e prosegui :)

— Nick Craver
fonte

5

Si noti inoltre che "Dopo una lunghezza zero, l'identificatore dell'unità è facoltativo" , quindi border: 0;è valido.

— Ismaele,

59

@Dubs sul serio ?, ti piace quando le persone si collegano a w3schools?

— ajax333221,

29

@ ajax333221 - Fai attenzione lì con un atteggiamento in bianco e nero nei confronti dei w3schools (o di qualsiasi sito Web). In questo caso la descrizione va bene, mentre io li odio in generale, la loro spiegazione per quanto riguarda questa domanda è corretta e abbastanza succinta. Sei libero di odiarli in generale, e io sì, ma non dare per scontato che lo 0% del contenuto sia utile, in parte lo è, anche alcune cose sulle risposte di yahoo sono utili, in una certa misura.

— Nick Craver

4

Sbagliato! Come descritto nella mia risposta e dimostrato nella demo live , border: 0NON è la scorciatoia per border-width: 0. Invece, la versione corta imposta sempre tutte le tre proprietà: border-color, border-stylee border-width.

— Denilson Sá Maia,

3

@ DenilsonSá Ho detto che avevano lo stesso effetto della prima riga della risposta, perché se il bordo ha una larghezza 0, gli altri 2 non contano qui. A parte questo, CSS 2.1 che ha chiarito il comportamento qui è stato chiamato l'ultima volta 7 mesi dopo questa risposta e spinto come una raccomandazione oltre un anno dopo. Se vuoi chiarire le vecchie risposte qui, per favore fallo! La modifica per gli aggiornamenti è attivamente incoraggiata.

— Nick Craver

42

Come altri hanno già detto, entrambi sono validi e faranno il trucco. Non sono convinto al 100% che siano identici però. Se hai in corso uno stile a cascata, in teoria potrebbero produrre risultati diversi dal momento che stanno effettivamente scavalcando valori diversi.

Per esempio. Se si imposta "border: none;" e poi in seguito hanno due stili diversi che sovrascrivono la larghezza e lo stile del bordo, quindi uno farà qualcosa e l'altro no.

Nell'esempio seguente sia su IE che su firefox i primi due test div non hanno bordi. I secondi due tuttavia sono diversi con il primo div nel secondo blocco che è semplice e il secondo div nel secondo blocco con un bordo tratteggiato di larghezza media.

Quindi, sebbene siano entrambi validi, potrebbe essere necessario tenere d'occhio i tuoi stili se fanno molto a cascata e simili come penso.

<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
fonte

1

Per rimuovere i bordi dei datepicker in Sencha Touch 2, ho dovuto usare border: noneinvece di border: 0.

— Kris Khaira,

39

(nota: questa risposta è stata aggiornata il 01-08-2014 per renderla più dettagliata, più accurata e per aggiungere una demo dal vivo )

Espansione delle proprietà shortand

Secondo la specifica CSS2.1 del W3C ( "I valori omessi sono impostati sui loro valori iniziali" ), le seguenti proprietà sono equivalenti:

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>

Se queste regole sono le più specifiche applicate ai bordi di un elemento, i bordi non verranno mostrati, a causa della larghezza zero o a causa di hidden/none style. Quindi, a prima vista, queste tre regole sembrano equivalenti. Tuttavia, si comportano in modi diversi se combinati con altre regole.

Bordi in un contesto di tabella nel modello di bordo compresso

Quando viene eseguito il rendering di una tabella utilizzando border-collapse: collapse, ogni bordo renderizzato viene condiviso tra più elementi (i bordi interni vengono condivisi tra celle adiacenti; i bordi esterni vengono condivisi tra le celle e la tabella stessa; ma anche righe, gruppi di righe, colonne e gruppi di colonne condividono i bordi ). La specifica definisce alcune regole per la risoluzione dei conflitti di frontiera :

I bordi con il border-styledi hiddenhanno la precedenza su tutti gli altri confini in conflitto. [...]

I bordi con uno stile nonehanno la priorità più bassa. [...]

Se nessuno degli stili lo è hiddene almeno uno di essi non lo è none, i bordi stretti vengono scartati a favore di quelli più ampi. [...]

Se gli stili del bordo differiscono solo per il colore, […]

Quindi, in un contesto di tabella, border: hidden(o border-style: hidden) avrà la massima priorità e renderà nascosto il bordo condiviso, qualunque cosa accada.

All'altra estremità delle priorità, border: none(o border-style: none) hanno la priorità più bassa, seguita dal bordo a larghezza zero (perché è il bordo più stretto). Ciò significa che un valore calcolato di border-style: nonee un valore calcolato di border-width: 0sono essenzialmente gli stessi.

Regole a cascata ed ereditarietà

Poiché nonee 0influenzano proprietà diverse ( border-stylee border-width), si comporteranno in modo diverso quando una regola più specifica definisce solo lo stile o solo la larghezza. Vedi la risposta di Chris per un esempio.

Demo live !

Vuoi vedere tutti questi casi in un'unica pagina? Apri la demo live !

— Denilson Sá Maia
fonte

21

utilizzando

border: none;

non funziona in alcune versioni di IE. IE9 va bene, ma nelle versioni precedenti mostra il bordo anche quando lo stile è "nessuno". L'ho sperimentato durante l'utilizzo di un foglio di stile di stampa in cui non volevo bordi sulle caselle di input.

border: 0;

sembra funzionare bene in tutti i browser.

— Kieran
fonte

12

Puoi semplicemente utilizzare entrambi secondo le specifiche gentilmente fornite da Oli.

Lo uso sempre border:0 none;.

Sebbene non ci sia nulla di male nel specificarli separatamente e alcuni browser analizzeranno il CSS più velocemente se si utilizzano le chiamate di proprietà CSS1 legacy.

Anche se border:0;normalmente lo stile del bordo viene automaticamente impostato su predefinito none, ho comunque notato alcuni browser che applicano il loro stile del bordo predefinito che può stranamente sovrascrivere border:0;.

— Xenni82
fonte

"alcuni browser analizzeranno il CSS più velocemente" → non vi è alcuna differenza evidente nel tempo di analisi CSS. E, in realtà, il tempo di analisi CSS non è rilevante per il 99.99999999999999% dei casi. Il tempo di rendering CSS è molto più importante (e anche totalmente estraneo a questa domanda).

— Denilson Sá Maia,

1

Alcuni browser? Cosa intendi? Sembra un sogno o qualcosa del genere.

— Rootical V.

7

Io uso:

border: 0;

Da 8.5.4 in CSS 2.1 :

'confine'

Valore: [<border-width> || <border-style> || <'border-top-color'>] | ereditare

Quindi uno dei tuoi metodi sembra a posto.

— Cletus
fonte

1

Zero punteggiato sembra uguale a zero solido

— Christopher Altman,

1

Vero. Ma vedi anche la risposta di Chris

— Antony Hatchkins,

5

Bene, per vedere esattamente la differenza tra border: 0e border: nonepossiamo fare alcuni esperimenti.

Sperimentare:

Consente di creare tre div, il primo il cui bordo può essere disabilitato solo impostando la sua larghezza su zero, il secondo che può essere disabilitato solo impostando il suo stile su nessuno e un terzo con un bordo che può essere "disabilitato" solo impostando il suo colore a trasparente. Quindi proviamo l'effetto di:

border: 0;
border: none;
border: transparent

stile bordo: solido! importante; colore del bordo: rosso! importante; bordo-larghezza: 2px! importante; colore del bordo: rosso! importante; bordo-larghezza: 2px! importante; stile bordo: solido! importante;

Mostra snippet di codice

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>

Espandi frammento

I miei risultati sono stati gli stessi in Firefox e Chrome:

border: 0;Sembra impostare la larghezza del 0bordo su e lo stile del bordo sunone , ma non cambiare il colore del bordo;

border: none; Sembra cambiare solo lo stile del bordo (in none );

border: transparent;Sembra cambiare il colore del transparentbordo in e lo stile del bordo in none;

— Agesly Danzig
fonte

2

Mentre i risultati saranno molto probabilmente gli stessi (nessun bordo), lo 0 e nessuno stanno affrontando tecnicamente cose diverse.

0 indirizzi larghezza bordo e nessuno indirizzo stile bordo. Ovviamente un bordo di larghezza 0 è inesistente, quindi non avrà stile.

Tuttavia, se in seguito nel tuo foglio di stile hai intenzione di sovrascriverlo, ti rivolgeresti naturalmente in modo specifico l'uno o l'altro. Se ora volessi un bordo di 3px, quello sarebbe il bordo di sovrascrittura diretta: 0 per quanto riguarda la larghezza. Se ora volessi un bordo tratteggiato, ciò significherebbe sovrascrivere direttamente il bordo: nessuno per quanto riguarda lo stile.

— Carly
fonte

2

Il modo più semplice per rimuovere il bordo con css

border: 0;

— Love Kumar
fonte

-1

DOVREBBE USARE IL CONFINE 0

Secondo la mia opinione ed esperienza, suggerirei di usare Border: 0; C'è un motivo valido e molto valido perché ogni volta che utilizziamo il bordo: nessuno, capisco che funzioni ma penso che stiamo usando un bordo, 1px, 2px, 3px ecc. Voglio dire, stiamo dando il valore che il nostro bordo è ... px / em / rem giusto quindi dobbiamo usare border: 0; per rimuovere il valore del bordo perché come sappiamo quando usiamo lo sfondo: none; significa che stiamo rimuovendo lo sfondo un po 'di sfondo che non è un valore che è qualcos'altro.

Grazie

— Vinod Kumar
fonte

-3

Nel mio punto,

border:none funziona ma non è valido lo standard w3c

così meglio che possiamo usare border:0;

— anglimasS
fonte

6

Non c'è nulla di invalido border: none.

— Quentin,