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

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

494 голосов
/ 27 мая 2010

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

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

Ответы [ 11 ]

411 голосов
/ 27 мая 2010

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

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

143 голосов
/ 27 мая 2010

Они эквивалентны в эффекте , , указывающем на разные ярлыки : 

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

И другие .. 

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

Обаработать, просто выбрать один и идти с ним :)

40 голосов
/ 01 июня 2010

Как уже говорили другие, они действительны и сделают свое дело. Я не уверен на 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>
35 голосов
/ 19 июля 2014

(примечание: этот ответ был обновлен 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 / none. Итак, на первый взгляд, эти три правила выглядят эквивалентно. Однако они ведут себя по-разному в сочетании с другими правилами.

Границы в контексте таблицы в модели сворачивающихся границ

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

  1. Границы с border-style из hidden имеют приоритет над всеми другими конфликтующими границами. [...]

  2. Границы со стилем none имеют самый низкий приоритет. [...]

  3. Если ни один из стилей не является hidden и хотя бы один из них не является none, то узкие границы отбрасываются в пользу более широких. [...]

  4. Если стили границ отличаются только цветом, […]

Таким образом, в контексте таблицы border: hidden (или border-style: hidden) будет иметь наивысший приоритет и будет скрывать общую границу, несмотря ни на что.

На другом конце приоритетов border: none (или border-style: none) имеют самый низкий приоритет, за которым следует граница нулевой ширины (потому что это самая узкая граница). Это означает, что вычисленное значение из border-style: none и вычисленное значение из border-width: 0 по существу одинаковы.

Каскадные правила и наследование

Так как none и 0 влияют на различные свойства (border-style и border-width), они будут вести себя по-разному, когда более конкретное правило определяет только стиль или только ширину. См. Крис ответ для примера.

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

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

21 голосов
/ 06 апреля 2012

Использование 

border: none;

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

border: 0;

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

11 голосов
/ 21 апреля 2011

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

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

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

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

6 голосов
/ 27 мая 2010

Я использую: 

border: 0;

Из 8.5.4 в CSS 2.1 :

'границы'

Значение: [ || || <'border-top-color'>] | наследовать

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

3 голосов
/ 13 марта 2018

Ну, чтобы точно увидеть разницу между 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 и стиля рамки для none, но без изменения цвета рамки;

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

border: transparent; Кажется, чтобы изменить цвет границы на transparent и стиль границы на none;

2 голосов
/ 05 октября 2016

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

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

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

0 голосов
/ 28 июня 2018

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

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

Спасибо

Страница:
...