Tôi nên sử dụng 'đường viền: không' hoặc 'đường viền: 0'?

543

Phương pháp nào trong hai phương pháp phù hợp với tiêu chuẩn W3C? Cả hai có hành xử như mong đợi trên các trình duyệt?

biên giới: không có;
viền: 0;

css border

— John Himmelman
nguồn

74

Tôi thích những loại câu hỏi bỏ qua.

— Christopher Altman

453

Cả hai đều hợp lệ. Đó là lựa chọn của bạn.

Tôi thích border:0bởi vì nó ngắn hơn; Tôi thấy rằng dễ đọc hơn. Bạn có thể tìm thấy nonedễ đọc hơn. Chúng ta đang sống trong một thế giới của các bộ xử lý hậu kỳ CSS rất có khả năng vì vậy tôi khuyên bạn nên sử dụng bất cứ thứ gì bạn thích và sau đó chạy nó thông qua một "máy nén". Không có chiến tranh thần thánh nào đáng để chiến đấu ở đây.

Như đã nói, nếu bạn đang viết tay tất cả CSS sản xuất của mình, tôi vẫn duy trì sự càu nhàu trong các bình luận. Sử dụng border:0 sẽ tiết kiệm một lượng băng thông vô hạn. Bản thân nó chỉ tính rất ít nhưng nếu bạn thực hiện mỗi byte , bạn sẽ làm cho trang web của mình nhanh hơn.

Thông số kỹ thuật CSS2 có ở đây . Chúng được mở rộng trong CSS3 nhưng không liên quan đến điều này.

'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

Bạn có thể sử dụng bất kỳ sự kết hợp của chiều rộng, phong cách và màu sắc.
Ở đây, 0đặt chiều rộng, nonekiểu dáng. Chúng có cùng kết quả hiển thị: không có gì được hiển thị.

— Ôi
nguồn

117

"Nếu bạn có nhiều lưu lượng truy cập, bạn sẽ nhận thấy sự khác biệt!" - Tôi rất nghi ngờ rằng. Ngay cả với một triệu khách truy cập mỗi giờ, sự khác biệt chỉ là 3 MB. Và đó là giả sử không ai trong số những khách truy cập đó có bộ nhớ cache CSS và cũng cho rằng việc nén cung cấp lợi ích 0, cả hai câu lệnh rất khó xảy ra. Trên thực tế, có thể chênh lệch vài trăm KB mỗi ngày, về cơ bản là 0 đối với một trang web lớn. Không phải tôi nghĩ border:nonelà bằng cách nào đó tốt hơn, nhưng sử dụng điều này như lý luận của bạn là bị lỗi.

— BlueRaja - Daniel Pflughoeft

22

@ BlueRaja-DannyPflughoeft Đó là sự mỉa mai hơn bất cứ điều gì khác .. Mạnh hoặc cường điệu ... Hoặc một chút của cả hai. Bạn nói đúng, điều này có thể sẽ không bao giờ có hiệu ứng thời gian chạy đối với bất cứ điều gì trừ khi bạn sử dụng nó hàng nghìn lần và có tất cả mọi người trên internet truy cập CSS của bạn cùng một lúc.

— Oli

6

Có lẽ nó đáng để thêm vào mô tả rằng tuyên bố đó là châm biếm-istic? :)

— timofey.com

7

Chỉ để hoàn thiện tôi muốn thêm một khía cạnh khác. Truyền 1MB dữ liệu đòi hỏi lượng năng lượng có trong một than bánh than củi thông thường. Xem bài nói chuyện TED này của Jay Walkers: player.vimeo.com/video/22399003 .

— Zensursula

11

Tôi có phải là người duy nhất quay lại đây để cổ vũ thêm một nano giây không?

— Leathan

155

Chúng có hiệu lực tương đương , chỉ ra các phím tắt khác nhau :

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

Và điều khác..

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

Cả hai công việc, chỉ cần chọn một và đi với nó :)

— Nick Craver
nguồn

5

Cũng lưu ý rằng "Sau độ dài bằng không, số nhận dạng đơn vị là tùy chọn" , do đó, border: 0;là hợp lệ.

— Ishmael

59

@Dub nghiêm túc?, Bạn thích gì khi mọi người liên kết đến w3schools?

— ajax333221

29

@ ajax333221 - Hãy cẩn thận ở đó với thái độ trắng đen đối với w3schools (hoặc bất kỳ trang web nào ). Trong trường hợp này , mô tả là tốt, trong khi tôi nói chung họ ghét họ, thì lời giải thích của họ liên quan đến câu hỏi này là chính xác và khá ngắn gọn. Nói chung, bạn có thể ghét chúng và tôi cũng vậy, nhưng đừng cho rằng 0% nội dung có ích, một số nội dung, thậm chí một số điều trong câu trả lời của yahoo rất hữu ích, ở một mức độ nào đó.

— Nick Craver

4

Sai lầm! Như được mô tả trong câu trả lời của tôi và được thể hiện trong bản demo trực tiếp , border: 0KHÔNG phải là phím tắt cho border-width: 0. Thay vào đó, phiên bản ngắn luôn đặt cả ba đặc tính: border-color, border-stylevà border-width.

— Denilson Sá Maia

3

@ DenilsonSá Tôi nói rằng chúng có hiệu lực tương tự như dòng đầu tiên của câu trả lời, bởi vì nếu đường viền có độ rộng 0 thì 2 cái còn lại không quan trọng ở đây. Mặc dù vậy, CSS 2.1 đã làm rõ hành vi ở đây là cuộc gọi cuối cùng 7 tháng sau câu trả lời này và được đưa ra như một đề xuất trong hơn một năm sau đó. Nếu bạn muốn làm rõ câu trả lời cũ ở đây, xin vui lòng làm như vậy! Chỉnh sửa để cập nhật được khuyến khích tích cực.

— Nick Craver

42

Như những người khác đã nói cả hai đều hợp lệ và sẽ thực hiện các mẹo. Tôi không tin chắc 100% rằng chúng giống hệt nhau. Nếu bạn có một số tầng phong cách đang diễn ra thì về lý thuyết họ có thể tạo ra các kết quả khác nhau vì chúng có hiệu quả ghi đè các giá trị khác nhau.

Ví dụ. Nếu bạn đặt "đường viền: không có;" và sau đó có hai kiểu khác nhau ghi đè lên chiều rộng và kiểu thì đường viền sẽ làm một cái gì đó còn kiểu kia thì không.

Trong ví dụ sau trên cả IE và firefox, hai div thử nghiệm đầu tiên xuất hiện không có viền. Tuy nhiên, hai thứ hai khác nhau với div thứ nhất trong khối thứ hai là đơn giản và div thứ hai trong khối thứ hai có đường viền đứt có chiều rộng trung bình.

Vì vậy, mặc dù cả hai đều hợp lệ, bạn có thể cần để mắt đến phong cách của mình nếu chúng làm nhiều tầng và như tôi nghĩ.

<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
nguồn

1

Để loại bỏ các đường viền của máy quét ngày trong Sencha Touch 2, tôi phải sử dụng border: nonethay vì border: 0.

— Kris Khaira

39

(lưu ý: câu trả lời này đã được cập nhật vào ngày 2014-08-01 để làm cho nó chi tiết hơn, chính xác hơn và để thêm bản demo trực tiếp )

Mở rộng các thuộc tính shortand

Theo thông số kỹ thuật W3C CSS2.1 ( các giá trị Bỏ qua được đặt thành giá trị ban đầu của họ ), các thuộc tính sau là tương đương:

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>

Nếu các quy tắc này là các quy tắc cụ thể nhất được áp dụng cho các đường viền của một phần tử, thì các đường viền sẽ không được hiển thị, vì độ rộng bằng không hoặc do hidden/ nonekiểu. Vì vậy, ở cái nhìn đầu tiên, ba quy tắc này trông tương đương nhau. Tuy nhiên, họ hành xử theo những cách khác nhau khi kết hợp với các quy tắc khác.

Biên giới trong bối cảnh bảng trong mô hình biên giới sụp đổ

Khi một bảng được hiển thị bằng cách sử dụng border-collapse: collapse, thì mỗi đường viền được kết xuất được chia sẻ giữa nhiều phần tử (viền bên trong được chia sẻ giữa các ô lân cận; viền ngoài được chia sẻ giữa các ô và chính bảng đó, nhưng cũng có các hàng, nhóm hàng, cột và nhóm cột chia sẻ ). Thông số kỹ thuật xác định một số quy tắc để giải quyết xung đột biên giới :

Biên giới với border-stylecác hiddenưu tiên hơn tất cả các biên giới mâu thuẫn khác. [Càng]

Biên giới với một phong cách nonecó mức độ ưu tiên thấp nhất. [Càng]

Nếu không có kiểu nào trong số đó hiddenvà ít nhất một trong số chúng không có none, thì các đường viền hẹp sẽ bị loại bỏ theo hướng rộng hơn. [Càng]

Nếu các kiểu viền chỉ khác nhau về màu sắc, [thì]

Vì vậy, trong ngữ cảnh bảng, border: hidden(hoặc border-style: hidden) sẽ có mức ưu tiên cao nhất và sẽ làm cho đường viền chia sẻ bị ẩn đi, bất kể điều gì.

Ở đầu bên kia của các ưu tiên, border: none(hoặc border-style: none) có mức ưu tiên thấp nhất, theo sau là đường viền có độ rộng bằng không (vì đây là đường viền hẹp nhất). Điều này có nghĩa rằng một giá trị tính toán của border-style: nonevà một giá trị tính toán của border-width: 0cơ bản là giống nhau.

Quy tắc xếp tầng và kế thừa

Vì nonevà 0ảnh hưởng đến các thuộc tính khác nhau ( border-stylevà border-width), chúng sẽ hành xử khác nhau khi một quy tắc cụ thể hơn xác định chỉ kiểu hoặc chỉ chiều rộng. Xem Chris trả lời cho một ví dụ.

Bản demo trực tiếp !

Bạn muốn xem tất cả các trường hợp trong một trang duy nhất? Mở bản demo trực tiếp !

— Denilson Sá Maia
nguồn

21

Sử dụng

border: none;

không hoạt động trong một số phiên bản IE. IE9 vẫn ổn nhưng trong các phiên bản trước, nó sẽ hiển thị đường viền ngay cả khi kiểu "không". Tôi đã trải nghiệm điều này khi sử dụng biểu định kiểu in mà tôi không muốn viền trên các hộp nhập.

border: 0;

dường như hoạt động tốt trong tất cả các trình duyệt.

— Kieran
nguồn

12

Bạn chỉ có thể sử dụng cả hai theo thông số kỹ thuật được cung cấp bởi Oli.

Tôi luôn luôn sử dụng border:0 none;.

Mặc dù không có hại trong việc chỉ định chúng một cách riêng biệt và một số trình duyệt sẽ phân tích CSS nhanh hơn nếu bạn sử dụng các lệnh gọi thuộc tính CSS1 cũ.

Mặc dù border:0;thông thường sẽ mặc định kiểu đường viền thành none, tuy nhiên tôi đã nhận thấy một số trình duyệt thực thi kiểu đường viền mặc định của chúng có thể ghi đè lên một cách kỳ lạ border:0;.

— Xenni82
nguồn

"một số trình duyệt sẽ phân tích CSS nhanh hơn" → không có sự khác biệt đáng chú ý trong thời gian phân tích cú pháp CSS. Và, thực sự, thời gian phân tích cú pháp CSS không liên quan đến 99.999999999999% các trường hợp. Thời gian kết xuất CSS quan trọng hơn nhiều (và cũng hoàn toàn không liên quan đến câu hỏi này).

— Denilson Sá Maia

1

Một số trình duyệt? Ý anh là gì? Có vẻ như một giấc mơ hoặc một cái gì đó.

— Rootical V. 27/08/2015

7

Tôi sử dụng:

border: 0;

Từ 8.5.4 trong CSS 2.1 :

'biên giới'

Giá trị: [<width-width> || <kiểu viền> || <'viền trên cùng'>] | thừa kế

Vì vậy, một trong những phương pháp của bạn trông tốt.

— cletus
nguồn

1

Zero rải rác trông giống như không rắn

— Christopher Altman

1

Thật. Nhưng, hãy xem câu trả lời của Chris

— Antony Hatchkins

5

Chà, để thấy chính xác sự khác biệt giữa border: 0và border: nonechúng ta có thể thực hiện một số thí nghiệm.

Thí nghiệm:

Cho phép tạo ba div, cái đầu tiên có đường viền chỉ có thể bị vô hiệu hóa bằng cách đặt chiều rộng của nó thành 0, cái thứ hai chỉ có thể bị vô hiệu hóa bằng cách đặt kiểu của nó thành không, và thứ ba với đường viền chỉ có thể được "vô hiệu hóa" bằng cách đặt màu trong suốt. Sau đó, hãy thử hiệu ứng của:

border: 0;
border: none;
border: transparent

kiểu biên giới: vững chắc! quan trọng; viền màu: đỏ! quan trọng; đường viền rộng: 2px! quan trọng; viền màu: đỏ! quan trọng; đường viền rộng: 2px! quan trọng; kiểu biên giới: vững chắc! quan trọng;

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Kết quả của tôi giống nhau ở cả firefox và chrome:

border: 0;Có vẻ như đặt chiều rộng 0đường viền thành và kiểu đường viền thành none, nhưng không thay đổi màu đường viền;

border: none;Có vẻ như chỉ thay đổi kiểu viền (sang none);

border: transparent;Có vẻ như thay đổi màu transparentđường viền thành và kiểu đường viền thành none;

— Agesly Danzig
nguồn

2

Mặc dù kết quả rất có thể giống nhau (không có đường viền), nhưng 0 và không có gì giải quyết về mặt kỹ thuật những thứ khác nhau.

0 địa chỉ đường viền rộng và không có địa chỉ đường viền kiểu. Rõ ràng một đường viền có chiều rộng 0 là không tồn tại do đó sẽ không có kiểu dáng.

Tuy nhiên, nếu sau này trong biểu định kiểu của bạn, bạn có ý định ghi đè lên biểu đồ này, bạn sẽ tự nhiên giải quyết cụ thể cái này hoặc cái khác. Nếu bây giờ tôi muốn có viền 3px, thì đó sẽ là phần ghi đè trực tiếp: 0 liên quan đến chiều rộng. Nếu bây giờ tôi muốn có một đường viền chấm, đó sẽ là đường viền trực tiếp ghi đè: không liên quan đến kiểu dáng.

— Cẩn thận
nguồn

2

Cách dễ nhất để loại bỏ biên giới với css

border: 0;

— Yêu Kumar
nguồn

-1

CHÚNG TÔI NÊN SỬ DỤNG BIÊN GIỚI 0

Theo ý kiến và kinh nghiệm của tôi, tôi sẽ đề nghị vui lòng sử dụng Border: 0; Có một lý do hợp lệ và rất tốt bởi vì bất cứ khi nào chúng tôi sử dụng đường viền: không, tôi hiểu nó hoạt động nhưng hãy nghĩ về việc chúng tôi đang sử dụng đường viền, 1px, 2px, 3px, v.v. Ý tôi là chúng tôi đang đưa ra giá trị đường viền của chúng tôi là ... px / em / rem phải vì vậy chúng ta cần sử dụng đường viền: 0; để loại bỏ giá trị biên bởi vì như chúng ta biết khi chúng ta sử dụng nền: none; nó có nghĩa là chúng tôi đang loại bỏ nền một số nền không phải là một giá trị mà là một cái gì đó khác.

Cảm ơn

— Vinod Kumar
nguồn

-3

Theo quan điểm của tôi,

border:none đang hoạt động nhưng không hợp lệ tiêu chuẩn w3c

vì vậy tốt hơn chúng ta có thể sử dụng border:0;

— thiên thần
nguồn

6

Không có gì không hợp lệ về border: none.

— Quentin