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

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

border: none,
border: 0;

Ответ 1

Оба действительны. Я включил спецификацию и объяснение ниже.

Но о том, что вы "должны" использовать... Это действительно зависит от вас и вашего стиля. Я предпочитаю border:0, потому что он короче, и мне кажется, что его легче читать. Вы можете предпочесть быть более явным.

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

Спецификации здесь:

'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 стиль. Они имеют одинаковый результат рендеринга. Ничего не отображается.

Ответ 2

Они эквивалентны по существу, указывающие на разные ярлыки:

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

И другое..

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

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

Ответ 3

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

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

В следующем примере как IE, так и firefox первые два тестовых divs выходят без рамки. Второе второе, однако, отличается тем, что первый div во втором блоке является равным, а второй 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>

Ответ 4

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

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

В соответствии с спецификацией 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, каждая отображаемая граница распределяется между несколькими элементами (внутренние границы распределяются между соседними ячейками, внешние границы распределяются между ячейками и самой таблицей, а также строки, группы строк, столбцы и столбцы разделяют границы). Спецификация определяет некоторые правила для разрешения конфликтов границ:

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

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

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

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

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

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

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

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

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

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

Ответ 5

Используя

border: none;

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

border: 0;

похоже, отлично работает во всех браузерах.

Ответ 6

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

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

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

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

Ответ 7

Я использую:

border: 0;

От 8.5.4 в CSS 2.1:

'границы'

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

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

Ответ 8

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

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

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

Ответ 9

В моем пункте

border:none работает, но не допустим стандарт w3c

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