Чи слід використовувати "border: none" або "border: 0"?

543

Який із двох методів відповідає стандартам W3C? Чи обидва вони ведуть себе так, як очікувалося, у веб-переглядачах?

межа: немає;
межа: 0;

css border

— Джон Гіммельман
джерело

74

Мені подобаються такі види недооцінених питань.

— Крістофер Альтман

453

Обидва дійсні. Це твій вибір.

Я вважаю за краще, border:0тому що це коротше; Мені це легше читати. Ви можете виявити noneбільш розбірливими. Ми живемо у світі дуже спроможних післяпроцесорних процесорів CSS, тому я рекомендую вам використовувати все, що завгодно, а потім запустити його через "компресор". Тут немає жодної святої війни.

Все, що сказано, якщо ви пишете весь свій CSS на виробництві, я стверджую - не дивлячись на бурчання в коментарях - це не завадить бути свідомим пропускною здатністю. Використання border:0 дозволить зберегти нескінченно малу кількість пропускної здатності. Сам по собі це дуже мало, але якщо ви зробите кожен байт , ви зробите свій веб-сайт швидше.

В CSS2 специфікації тут . Вони розширені в CSS3, але жодним чином не мають відношення до цього.

'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

Ви можете використовувати будь-яке поєднання ширини, стилю та кольору.
Тут 0встановлюється ширина, noneстиль. Вони мають однаковий результат візуалізації: нічого не показано.

— Олі
джерело

117

"Якщо у вас багато трафіку, ви помітите різницю!" - Я дуже сумніваюся в цьому. Навіть при мільйоні відвідувачів на годину різниця становить лише 3 Мб. І це припускаючи, що жоден із цих відвідувачів не кешував CSS, а також передбачає, що стиснення забезпечує 0-користь, як дуже малоймовірні заяви. Насправді це, мабуть, різниця в кілька сотень КБ на день, що в основному становить 0 для великого сайту. Не те, що я думаю, що border:noneце якось краще, але використовувати це як своє міркування є помилковим.

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Це був більше сарказм, ніж будь-що інше ... ... Або гіпербола ... Або трохи обох. Ви маєте рацію, це, ймовірно, ніколи не вплине на час виконання нічого, якщо ви не використовуєте це мільйони разів і не будете отримувати доступ до CSS відразу в Інтернеті.

— Олі

6

Може бути, варто додати до опису, що твердження було сарказмним? :)

— timofey.com

7

Просто для повноти я хотів додати ще один аспект. Для передачі 1 МБ даних необхідна кількість енергії, що міститься в загальному вугільному брикеті. Дивіться цю розмову TED про Джея Уолкера : player.vimeo.com/video/22399003 .

— Зенсурсула

11

Хіба я єдиний тут, хто бадьорить із зайвою наносекундою?

— Літан

155

Вони еквівалентні в силі , вказуючи на різні ярлики :

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

А інший ..

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

Обидва працюють, просто виберіть одну та йдіть з нею :)

— Нік Крейвер
джерело

5

Також зауважте, що "Після нульової довжини ідентифікатор одиниці є необов'язковим" , тому border: 0;він дійсний.

— Ізмаїл

59

@Dubs серйозно ?, тобі подобається, коли люди посилаються на w3schools?

— ajax333221

29

@ ajax333221 - Будьте обережні, ставлячись до чорно-білих щодо w3schools (або будь-якого веб-сайту). У цьому випадку опис чудовий, хоча я взагалі ненавиджу їх, їх пояснення, оскільки воно стосується цього питання, є правильним і досить лаконічним. Ви взагалі можете їх ненавидіти, і я це роблю, але не вважайте, що 0% вмісту є корисним, дещо це, навіть деякі речі з відповідей Yahoo в певній мірі корисні.

— Нік Крейвер

4

Неправильно! Як описано у моїй відповіді та продемонстровано в демонстрації наживо , border: 0НЕ це ярлик для border-width: 0. Замість цього, коротка версія завжди встановлює всі три властивості: border-color, border-styleі border-width.

— Denilson Sá Maia

3

@ DenilsonSá Я сказав, що вони є такими ж по суті, як і перший рядок відповіді, тому що якщо межа має ширину 0, інші 2 тут не мають значення. Однак, CSS 2.1, який роз'яснював тут поведінку, востаннє дзвонив через 7 місяців після цієї відповіді, і був рекомендований через рік після цього. Якщо ви хочете уточнити тут старі відповіді, будь ласка, зробіть це! Редагування оновлень активно рекомендується.

— Нік Крейвер

42

Як говорили інші, обидва дійсні і зроблять трюк. Я не на 100% переконаний, що вони однакові. Якщо у вас є каскадні стилі, то вони теоретично можуть дати різні результати, оскільки вони фактично переважають різні значення.

Наприклад. Якщо встановити "межа: жодна;" а потім пізніше мати два різних стилі, які переосмислюють ширину та стиль межі, тоді один зробить щось, а інший - ні.

У наступному прикладі як на IE, так і на firefox перші два тестових диви виходять без меж. Однак два інших відрізняються тим, що перший поділ у другому блоці є простим, а другий розділ у другому блоці має штрихову межу середньої ширини.

Тож, хоча вони обоє дійсні, можливо, вам потрібно буде стежити за своїми стилями, якщо вони роблять багато каскадних і таких, як я думаю.

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

— Кріс
джерело

1

Щоб видалити межі підбирачів дат у Sencha Touch 2, мені довелося використовувати border: noneзамість border: 0.

— Кріс Хайра

39

(зауважте: цю відповідь було оновлено 01.08.2014, щоб зробити її більш детальною, точнішою та додати демонстрацію в прямому ефірі )

Розширення властивостей скорочення

Відповідно до специфікації W3C CSS2.1 ( "Пропущені значення встановлені на їх початкові значення" ), такі властивості еквівалентні:

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>

Якщо ці правила є найбільш конкретними, застосовані до меж елемента, то межі не відображатимуться ні через нульову ширину, ні через hidden/ nonestyle. Отже, при першому погляді ці три правила виглядають рівнозначно. Однак вони поводяться по-різному в поєднанні з іншими правилами.

Межі в контексті таблиці в руйнується моделі кордонів

Коли таблиця надається за допомогою border-collapse: collapse, то кожна відображена межа поділяється між декількома елементами (внутрішні межі поділяються між собою як сусідні комірки; зовнішні межі діляться між клітинками та самою таблицею; а також рядки, групи рядків, стовпці та групи стовпців ділять межі ). Специфікація визначає деякі правила вирішення прикордонних конфліктів :

Кордони з border-styleз hiddenпревалюють над усіма іншими межами суперечливими. […]

Межі зі стилем noneмають найнижчий пріоритет. […]

Якщо жоден із стилів не є hiddenі принаймні один з них не є none, то вузькі рамки відкидаються на користь ширших. […]

Якщо стилі рамки відрізняються лише кольором, […]

Отже, в контексті таблиці border: hidden(або border-style: hidden) буде найвищим пріоритетом і зробить загальну межу прихованою, незалежно від того.

З іншого боку пріоритети border: none(або border-style: none) мають найнижчий пріоритет, за ним межа нульової ширини (оскільки це найвузька межа). Це означає , що обчислене значення з border-style: noneі обчисленого значення по border-width: 0суті те ж саме.

Правила каскадування та успадкування

Оскільки noneі 0впливають на різні властивості ( border-styleі border-width), вони будуть вести себе по-різному, коли більш конкретне правило визначає лише стиль або просто ширину. Див. Для відповіді Кріса .

Жива демонстрація !

Хочете побачити всі ці випадки на одній сторінці? Відкрийте демо-версію !

— Denilson Sá Maia
джерело

21

Використання

border: none;

не працює в деяких версіях IE. IE9 чудово, але в попередніх версіях він відображає межу, навіть якщо стиль "немає". Я відчував це, коли використовував таблицю стилів друку, де я не хотів рамки на полях введення.

border: 0;

здається, працює добре у всіх браузерах.

— Кірань
джерело

12

Ви можете просто використовувати обидва згідно специфікації, люб’язно наданої Oli.

Я завжди користуюся border:0 none; .

Хоча немає жодної шкоди в тому, щоб окремо їх вказати, і деякі веб-переглядачі будуть швидше аналізувати CSS, якщо ви використовуєте застарілі виклики властивостей CSS1.

Хоча border:0;, як правило, стиль межі за замовчуванням noneє, але я помітив, що деякі браузери застосовують свій стиль межі за замовчуванням, який може дивним чином перезаписати border:0;.

— Xenni82
джерело

"деякі браузери швидше розберуть CSS" → помітна різниця у часі аналізу CSS. Дійсно, час розбору CSS не має відношення до 99,999999999999% випадків. Час надання CSS набагато важливіше (а також абсолютно не пов'язане з цим питанням).

— Denilson Sá Maia

1

Деякі браузери? Що ви маєте на увазі? Здається, сон чи щось таке.

— Rootical V.

7

Я використовую:

border: 0;

З 8.5.4 у CSS 2.1 :

'кордон'

Значення: [<границя ширини> || <прикордонний стиль> || <'рамка-верхній колір']] | успадковувати

Тож будь-який із ваших методів виглядає добре.

— клетус
джерело

1

Нульова пунктир виглядає так само, як і нульовий твердий

— Крістофер Альтман

1

Правда. Але дивіться також відповідь Кріса

— Антоні Хеткінс

5

Ну, щоб точно побачити різницю border: 0і border: noneми можемо зробити кілька експериментів.

Експеримент:

Дозволяє створити три знаки, перший з яких, кордон якого можна відключити, лише встановивши його ширину на нуль, другий, який можна відключити, лише встановивши його стиль на жоден, і третій з межею, яку можна "відключити" лише встановивши її колір до прозорого. Тоді давайте спробуємо ефект:

border: 0;
border: none;
border: transparent

стиль межі: твердий! важливий; колір межі: червоний! важливий; ширина кордону: 2px! важливо; колір межі: червоний! важливий; ширина кордону: 2px! важливо; стиль межі: твердий! важливий;

Показати фрагмент коду

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>

Розгорніть фрагмент

Мої результати були однакові як у Firefox, так і в хромі:

border: 0;Здається, встановити ширину 0кордону на та стиль межі на none, але не змінити колір межі;

border: none;Здається, змінюється лише стиль межі (до none);

border: transparent;Здається, змінить колір transparentкордону на і стиль межі на none;

— Агеслі Данциг
джерело

2

Хоча результати, швидше за все, будуть однаковими (без кордону), 0 і жоден технічно не вирішують різні речі.

0 адреси ширини межі та жодної адреси стилю межі. Очевидно, що межа 0 ширини не існує, тому не матиме стилю.

Однак якщо пізніше у вашому аркуші стилів ви маєте намір це замінити, ви, природно, спеціально звернетесь до того чи іншого. Якби я хотів 3-кратну межу, це була б прямо перемінна межа: 0 щодо ширини. Якби я хотів зараз пунктирною облямівкою, це буде прямо переважаючим кордоном: жодного щодо стилізації.

— Карлі
джерело

2

Найпростіший спосіб видалити кордон за допомогою css

border: 0;

— Любов Кумар
джерело

-1

МИ ВИКОРИСТОВУЄМО ГРАНИ 0

Згідно з моєю думкою та досвідом, я б запропонував, будь ласка, використовуйте Border: 0; Є поважна і дуже вагома причина, тому що щоразу, коли ми використовуємо кордон: жодна, я розумію, це працює, але подумайте, ми використовуємо кордон, 1px, 2px, 3px і т. Д. Я маю на увазі, що ми надаємо значення нашій межі ... px / em / rem правильно, тому нам потрібно використовувати border: 0; для видалення значення кордону, оскільки, як ми знаємо, коли ми використовуємо фон: жоден; це означає, що ми видаляємо фон деяким фоном, який не є цінністю, а чимось іншим.

Дякую

— Вінод Кумар
джерело

-3

На мою думку,

border:none працює, але не дійсний стандарт w3c

тому краще ми можемо використовувати border:0;

— англімиS
джерело

6

У цьому немає нічого недійсного border: none.

— Квентін