Haruskah saya menggunakan 'border: none' atau 'border: 0'?

544

Manakah dari dua metode yang sesuai dengan standar W3C? Apakah keduanya berperilaku seperti yang diharapkan di seluruh browser?

perbatasan: tidak ada;
perbatasan: 0;

css border John Himmelman
sumber

74

Saya suka jenis pertanyaan yang diabaikan ini.

Christopher Altman

454

Keduanya valid. Itu pilihanmu.

Saya lebih suka border:0karena lebih pendek; Saya menemukan itu lebih mudah dibaca. Anda mungkin menemukan nonelebih banyak terbaca. Kita hidup di dunia pasca-prosesor CSS yang sangat berkemampuan, jadi saya sarankan Anda menggunakan apa pun yang Anda suka dan kemudian jalankan melalui "kompresor". Tidak ada perang suci yang layak diperjuangkan di sini.

Itu semua mengatakan, jika Anda menulis semua CSS produksi Anda dengan tangan, saya mempertahankan — terlepas dari mengomel di komentar — tidak ada salahnya menjadi sadar bandwidth. Menggunakan border:0 akan menghemat jumlah bandwidth yang sangat kecil. Sendiri yang dihitung sangat sedikit tetapi jika Anda membuat setiap byte byte , Anda akan membuat situs web Anda lebih cepat.

Spesifikasi CSS2 ada di sini . Ini diperluas dalam CSS3 tetapi tidak dengan cara apa pun yang relevan dengan ini.

'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

Anda dapat menggunakan kombinasi lebar, gaya dan warna.
Di sini, 0tentukan lebar, nonegaya. Mereka memiliki hasil render yang sama: tidak ada yang ditampilkan.

Oli
sumber

117

"Jika kamu memiliki banyak lalu lintas, kamu akan melihat perbedaannya!" - Saya sangat meragukannya. Bahkan dengan satu juta pengunjung per jam, perbedaannya hanya 3MB. Dan itu dengan asumsi tidak ada pengunjung yang memiliki cache CSS, dan juga menganggap kompresi memberikan manfaat 0, keduanya pernyataan yang sangat tidak mungkin. Pada kenyataannya, itu mungkin perbedaan beberapa ratus KB sehari, yang pada dasarnya adalah 0 untuk situs besar. Bukannya saya pikir border:noneentah bagaimana lebih baik, tetapi menggunakan ini sebagai alasan Anda salah.

BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Itu lebih sarkasme daripada yang lain .. ... Atau hiperbola ... Atau sedikit dari keduanya. Anda benar, ini kemungkinan tidak akan pernah memiliki efek runtime pada apa pun kecuali jika Anda menggunakannya jutaan kali dan membuat semua orang di internet mengakses CSS Anda sekaligus.

Oli

6

Mungkin perlu menambahkan deskripsi bahwa pernyataan itu sarkasme-istic? :)

timofey.com

7

Hanya untuk kelengkapan saya ingin menambahkan aspek lain. Mentransfer 1MB data membutuhkan jumlah energi yang terkandung dalam briket arang biasa. Lihat ceramah TED tentang Jay Walkers ini: player.vimeo.com/video/22399003 .

Zensursula

11

Apakah saya satu-satunya di sini yang bersorak ekstra nanodetik?

Leathan

155

Efeknya setara , menunjuk ke berbagai pintasan :

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

Dan lainnya..

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

Keduanya bekerja, pilih saja dan ikuti saja :)

Nick Craver
sumber

5

Perhatikan juga bahwa "Setelah panjang nol, pengidentifikasi unit adalah opsional" , jadi border: 0;valid.

Ismael

59

@Tubuh serius ?, Anda suka ketika orang terhubung ke w3schools?

ajax333221

29

@ ajax333221 - Hati-hati di sana dengan sikap hitam dan putih terhadap w3schools (atau situs web apa pun ). Dalam hal ini deskripsi baik-baik saja, sementara saya membenci mereka secara umum, penjelasan mereka yang berkaitan dengan pertanyaan ini adalah benar dan cukup ringkas. Anda bebas untuk membenci mereka secara umum, dan saya lakukan, tetapi jangan berasumsi bahwa 0% dari konten di sana berguna, beberapa di antaranya, bahkan beberapa hal pada jawaban yahoo berguna, sampai taraf tertentu.

Nick Craver

4

Salah! Seperti dijelaskan dalam jawaban saya dan diperlihatkan dalam demo langsung , border: 0BUKAN jalan pintas untuk border-width: 0. Sebaliknya, versi pendek selalu set ketiga sifat: border-color, border-styledan border-width.

Denilson Sá Maia

3

@ DenilsonSá Saya mengatakan mereka sama efeknya dengan baris pertama dari jawaban, karena jika perbatasan memiliki lebar 0, 2 lainnya tidak masalah di sini. Sebagai tambahan, CSS 2.1 yang mengklarifikasi perilaku di sini adalah panggilan terakhir 7 bulan setelah jawaban ini, dan didorong sebagai rekomendasi selama setahun setelah itu. Jika Anda ingin memperjelas jawaban lama di sini, silakan lakukan! Pengeditan untuk pembaruan dianjurkan secara aktif.

Nick Craver

42

Seperti yang orang lain katakan keduanya valid dan akan melakukan trik. Saya tidak 100% yakin bahwa mereka identik. Jika Anda memiliki cascading gaya yang terjadi maka secara teori mereka dapat menghasilkan hasil yang berbeda karena mereka secara efektif mengesampingkan nilai yang berbeda.

Sebagai contoh. Jika Anda mengatur "perbatasan: tidak ada;" dan kemudian memiliki dua gaya berbeda yang mengesampingkan lebar perbatasan dan gaya maka satu akan melakukan sesuatu dan yang lain tidak.

Dalam contoh berikut pada IE dan firefox, dua test div pertama keluar tanpa batas. Namun kedua yang kedua berbeda dengan div pertama di blok kedua menjadi polos dan div kedua di blok kedua memiliki batas putus-putus lebar menengah.

Jadi, meskipun keduanya valid, Anda mungkin perlu mengawasi gaya Anda jika mereka melakukan banyak hal dan seperti yang saya kira.

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

1

Untuk menghapus batas datepicker di Sencha Touch 2, saya harus menggunakan border: nonebukan border: 0.

Kris Khaira

39

(catatan: jawaban ini telah diperbarui pada 2014-08-01 untuk membuatnya lebih detail, lebih akurat, dan untuk menambahkan demo langsung )

Memperluas properti shortand

Menurut spesifikasi W3C CSS2.1 ( "Nilai yang dihilangkan diatur ke nilai awal mereka" ), properti berikut ini setara:

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>

Jika aturan ini adalah yang paling spesifik yang diterapkan pada batas elemen, maka batas tidak akan ditampilkan, baik karena lebar nol, atau karena hidden/ nonestyle. Jadi, pada tampilan pertama, ketiga aturan ini terlihat setara. Namun, mereka berperilaku berbeda ketika dikombinasikan dengan aturan lain.

Perbatasan dalam konteks tabel dalam model collapsing border

Ketika tabel diberikan menggunakan border-collapse: collapse, maka setiap batas yang diberikan dibagi antara beberapa elemen (batas dalam dibagi bersama sebagai sel tetangga; batas luar dibagi antara sel dan tabel itu sendiri; tetapi juga baris, grup baris, kolom dan grup kolom berbagi perbatasan) ). Spesifikasi menentukan beberapa aturan untuk resolusi konflik perbatasan :

Perbatasan dengan border-styleof hiddendidahulukan dari semua perbatasan yang saling bertentangan. [...]

Perbatasan dengan gaya nonememiliki prioritas terendah. [...]

Jika tidak ada gaya hiddendan setidaknya salah satu gaya tidak none, maka batas sempit dibuang untuk yang lebih luas. [...]

Jika gaya perbatasan hanya berbeda dalam warna, [...]

Jadi, dalam konteks tabel, border: hidden(atau border-style: hidden) akan memiliki prioritas tertinggi dan akan membuat perbatasan bersama disembunyikan, apa pun yang terjadi.

Di ujung lain dari prioritas, border: none(atau border-style: none) memiliki prioritas terendah, diikuti oleh batas lebar nol (karena itu adalah perbatasan tersempit). Ini berarti bahwa nilai dihitung dari border-style: nonedan nilai dihitung dari border-width: 0dasarnya sama.

Aturan Cascading dan warisan

Karena nonedan 0mempengaruhi properti yang berbeda ( border-styledan border-width), mereka akan berperilaku berbeda ketika aturan yang lebih spesifik hanya menentukan gaya atau hanya lebar. Lihat Chris menjawab sebagai contoh.

Demo langsung !

Ingin melihat semua kasing ini dalam satu halaman? Buka demo langsung !

Denilson Sa Maia
sumber

21

Menggunakan

border: none;

tidak berfungsi di beberapa versi IE. IE9 baik-baik saja tetapi dalam versi sebelumnya ini menampilkan perbatasan bahkan ketika gayanya "tidak ada". Saya mengalami ini ketika menggunakan lembar gaya cetak di mana saya tidak ingin berbatasan dengan kotak input.

border: 0;

tampaknya berfungsi dengan baik di semua browser.

Kieran
sumber

12

Anda dapat menggunakan keduanya sesuai spesifikasi yang disediakan oleh Oli.

Saya selalu menggunakan border:0 none;.

Meskipun tidak ada salahnya menentukan mereka secara terpisah dan beberapa browser akan mengurai CSS lebih cepat jika Anda menggunakan panggilan properti warisan CSS1.

Meskipun border:0;biasanya akan default gaya perbatasan none, namun saya perhatikan beberapa browser menegakkan gaya perbatasan default mereka yang anehnya dapat ditimpa border:0;.

Xenni82
sumber

"beberapa browser akan mem-parsing CSS lebih cepat" → tidak ada perbedaan nyata dalam waktu penguraian CSS. Dan, sungguh, waktu parsing CSS tidak relevan dengan 99,999999999999% kasus. Waktu rendering CSS jauh lebih penting (dan juga sama sekali tidak terkait dengan pertanyaan ini).

Denilson Sá Maia

1

Beberapa browser? Apa maksudmu? Sepertinya mimpi atau semacamnya.

Rootical V.

7

Saya menggunakan:

border: 0;

Dari 8.5.4 di CSS 2.1 :

'berbatasan'

Nilai: [<border-width> || <border-style> || <'border-top-color'>] | mewarisi

Jadi salah satu metode Anda terlihat baik-baik saja.

cletus
sumber

1

Nol bertitik tampak sama dengan nol padatan

Christopher Altman

1

Benar. Tapi, lihat juga jawaban Chris

Antony Hatchkins

5

Nah, untuk secara tepat melihat perbedaan antara border: 0dan border: nonekita dapat membuat beberapa percobaan.

Percobaan:

Mari kita buat tiga div, yang pertama perbatasannya hanya bisa dinonaktifkan dengan mengatur lebarnya ke nol, yang kedua hanya bisa dinonaktifkan dengan mengatur gayanya menjadi tidak ada, dan yang ketiga dengan perbatasan yang hanya bisa "dinonaktifkan" dengan mengatur nya warna untuk transparan. Kemudian mari kita coba efek dari:

border: 0;
border: none;
border: transparent

gaya perbatasan: solid! penting; warna perbatasan: merah! penting; lebar-perbatasan: 2px! penting; warna perbatasan: merah! penting; lebar-perbatasan: 2px! penting; gaya perbatasan: solid! penting;

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Hasil saya sama di firefox dan chrome:

border: 0;Tampaknya mengatur lebar batas ke 0dan gaya tepi menjadi none, tetapi tidak mengubah warna batas;

border: none;Tampaknya hanya mengubah gaya perbatasan (menjadi none);

border: transparent;Tampaknya mengubah warna transparentbatas menjadi dan gaya perbatasan menjadi none;

Agesly Danzig
sumber

2

Sementara hasilnya kemungkinan besar akan sama (tanpa batas), 0 dan tidak ada yang secara teknis menangani hal-hal yang berbeda.

0 alamat lebar perbatasan dan tidak ada alamat gaya perbatasan. Jelas batas 0 lebar tidak ada sehingga tidak memiliki gaya.

Namun, jika nanti dalam stylesheet Anda, Anda bermaksud untuk menimpanya, Anda secara alami akan membahas satu atau yang lain. Jika saya sekarang menginginkan batas 3px, itu akan menjadi batas utama langsung: 0 dalam hal lebar. Jika sekarang saya ingin perbatasan bertitik, itu akan menjadi perbatasan langsung: tidak ada dalam hal styling.

Carly
sumber

2

Cara termudah untuk menghapus perbatasan dengan css

border: 0;

Cinta Kumar
sumber

-1

KITA HARUS MENGGUNAKAN BORDER 0

Menurut pendapat dan pengalaman saya, saya sarankan gunakan Border: 0; Ada alasan yang valid dan sangat bagus karena setiap kali kita menggunakan perbatasan: tidak ada, saya memahaminya berfungsi tetapi berpikir tentang kita menggunakan perbatasan, 1px, 2px, 3px dll. Maksud saya kita memberikan nilai batas kita adalah ... px / em / rem kanan jadi kita perlu menggunakan border: 0; untuk menghapus nilai perbatasan karena seperti yang kita tahu ketika kita menggunakan latar belakang: tidak ada; itu berarti kita menghapus latar belakang beberapa latar belakang yang bukan nilai yang merupakan sesuatu yang lain.

Terima kasih

Vinod Kumar
sumber

-3

Menurut saya,

border:none berfungsi tetapi tidak berlaku standar w3c

jadi lebih baik bisa kita gunakan border:0;

anglimas
sumber

6

Tidak ada yang salah tentang border: none.

Quentin