Должен ли я использовать 'border: none' или 'border: 0'?

544

Какой из двух методов соответствует стандартам W3C? Они оба ведут себя так, как ожидается во всех браузерах?

граница: нет;
граница: 0;

css border Джон Химмельман
источник

74

Мне нравятся такие пропущенные вопросы.

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

454

Оба действительны. Это твой выбор.

Я предпочитаю, 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стиль. У них одинаковый результат рендеринга: ничего не отображается.

Oli
источник

117

«Если у вас много трафика, вы заметите разницу!» - Я очень сомневаюсь в этом. Даже при миллионе посетителей в час разница составляет всего 3 МБ. И это при условии, что ни один из этих посетителей не кэшировал CSS, а также предполагает, что сжатие дает нулевую выгоду, что очень маловероятно. В действительности, это, вероятно, разница в несколько сотен килобайт в день, что в основном равно 0 для большого сайта. Не то, чтобы я думаю, что border:noneэто как-то лучше, но использование этого как вашего рассуждения ошибочно.

BlueRaja - Дэнни Пфлюгофт,

22

@ BlueRaja-DannyPflughoeft Это был скорее сарказм, чем что-либо еще ... ... Или гипербола ... Или немного того и другого. Вы правы, это, скорее всего, никогда не повлияет на время выполнения, если вы не используете его миллионы раз, и все в Интернете одновременно получают доступ к вашему CSS.

Оли

6

Может быть, стоит добавить в описание, что это заявление было сарказмом? :)

timofey.com

7

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

Zensursula

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.

Денилсон Са Майя

3

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

Ник Крейвер

42

Как уже говорили другие, они действительны и сделают свое дело. Я не уверен на 100%, что они идентичны. Если у вас есть какой-то стиль каскадирования, то теоретически они могут дать разные результаты, поскольку они эффективно перекрывают разные значения.

Например. Если вы установите "border: none;" и позже у вас будет два разных стиля, которые переопределяют ширину и стиль границы, тогда один будет делать что-то, а другой - нет.

В следующем примере как для IE, так и для Firefox первые два тестовых div-а вышли без рамки. Вторые два, тем не менее, отличаются друг от друга тем, что первый блок во втором блоке является простым, а второй блок во втором блоке имеет пунктирную границу средней ширины.

Поэтому, несмотря на то, что они оба действительны, вам может понадобиться следить за вашими стилями, если они сильно каскадируются и тому подобное, как я думаю.

<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

Чтобы убрать границы DatePickers в Sencha Touch 2, мне пришлось использовать border: noneвместо border: 0.

Крис Хайра

39

(примечание: этот ответ был обновлен 2014-08-01, чтобы сделать его более подробным, более точным и добавить живую демонстрацию )

Расширение свойств Shorttand

Согласно спецификации 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), они будут вести себя по-разному, когда более конкретное правило определяет только стиль или только ширину. Смотрите Крис ответ для примера.

Живая демоверсия !

Хотите увидеть все эти случаи на одной странице? Откройте демо-версию !

Денилсон Са Майя
источник

21

С помощью

border: none;

не работает в некоторых версиях IE. IE9 хорошо, но в предыдущих версиях он отображал границу, даже если стиль «нет». Я испытал это при использовании таблицы стилей печати, где я не хотел, чтобы границы на полях ввода.

border: 0;

Кажется, работает нормально во всех браузерах.

Киран
источник

12

Вы можете просто использовать оба в соответствии со спецификацией, любезно предоставленной Oli.

Я всегда использую border:0 none;.

Хотя их отдельное указание не вредно, и некоторые браузеры будут быстрее анализировать CSS, если вы используете вызовы устаревших свойств CSS1.

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

Xenni82
источник

«некоторые браузеры будут анализировать CSS быстрее» → нет заметной разницы во времени разбора CSS. И действительно, время разбора CSS не относится к 99,9999999999999% случаев. Время отрисовки CSS гораздо важнее (а также совершенно не связано с этим вопросом).

Денилсон Са Майя,

1

Некоторые браузеры? Что вы имеете в виду? Похоже на сон или что-то.

Rootical V.

7

Я использую:

border: 0;

С 8.5.4 в CSS 2.1 :

«Граница»

Значение: [<border-width> || <border-style> || <'border-top-color'>] | унаследуют

Так что любой из ваших методов выглядит хорошо.

Клетус
источник

1

Точка ноль выглядит так же, как ноль сплошной

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

1

Правда. Но см. Также ответ Криса

Энтони Хэтчкинс

5

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

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

Давайте создадим три элемента div: первый, чья граница может быть отключена только путем установки его ширины на ноль, второй - отключение только путем установки его стиля на none, и третий - с рамкой, которую можно «отключить» только путем установки его цвет к прозрачному. Тогда давайте попробуем эффект:

border: 0;
border: none;
border: transparent

стиль границы: твердый! важный; цвет границы: красный! важно; border-width: 2px! важно; цвет границы: красный! важно; border-width: 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, так и в Chrome:

border: 0;Кажется, чтобы установить border-width в 0и border-style none, но не изменить border-color;

border: none;Кажется, только изменить стиль границы (к none);

border: transparent;Кажется, чтобы изменить border-color на transparentи border-style на none;

Агесли Данциг
источник

2

Хотя результаты, скорее всего, будут одинаковыми (без границ), 0 и ни один из них технически не относятся к разным вещам.

0 адресов ширины границы и ни одного адреса границы стиля. Очевидно, что граница шириной 0 не существует, поэтому не будет иметь стиля.

Однако, если позже в вашей таблице стилей вы намерены переопределить это, вы, естественно, определенно обратились бы к одному или другому. Если бы я теперь хотел границу в 3 пикселя, это было бы непосредственно переопределением границы: 0 в отношении ширины. Если бы я теперь хотел пунктирную границу, это было бы непосредственно переопределившей границей: ничего не касалось стиля.

Карли
источник

2

Самый простой способ удалить границу с помощью CSS

border: 0;

Люблю кумар
источник

-1

МЫ ДОЛЖНЫ ИСПОЛЬЗОВАТЬ ГРАНИЦУ 0

Согласно моему мнению и опыту, я бы предложил использовать границу: 0; Есть веская и очень веская причина, потому что всякий раз, когда мы используем рамку: нет, я понимаю, что это работает, но подумайте о том, что мы используем рамку, 1px, 2px, 3px и т. Д. Я имею в виду, что мы даем значение, которое наша граница равна ... px / em / rem правильно, поэтому нам нужно использовать border: 0; для удаления значения границы, потому что, как мы знаем, когда мы используем background: none; это означает, что мы удаляем фон некоторый фон, который не является значением, которое является чем-то другим.

Спасибо

Винод Кумар
источник

-3

По моему мнению,

border:none работает, но не действует стандарт w3c

так лучше мы можем использовать border:0;

anglimasS
источник

6

В этом нет ничего недействительного border: none.

Квентин