Czy powinienem używać „border: none” czy „border: 0”?

543

Która z dwóch metod jest zgodna ze standardami W3C? Czy oba zachowują się zgodnie z oczekiwaniami w różnych przeglądarkach?

granica: brak;
granica: 0;

css border

— John Himmelman
źródło

74

Lubię tego rodzaju przeoczone pytania.

— Christopher Altman

453

Oba są ważne. To Twój wybór.

Wolę, border:0ponieważ jest krótszy; Uważam to za łatwiejsze do odczytania. Możesz znaleźć nonebardziej czytelny. Żyjemy w świecie bardzo zdolnych postprocesorów CSS, więc polecam użyć tego, co wolisz, a następnie uruchomić go przez „kompresor”. Nie ma tu żadnej świętej wojny, o którą warto walczyć.

To powiedziawszy, jeśli piszesz odręcznie cały produkcyjny CSS, utrzymuję - pomimo narzekania w komentarzach - nie zaszkodzi być świadomym przepustowości. Użycie border:0 pozwoli zaoszczędzić nieskończenie małą przepustowość. Samo to się liczy bardzo niewiele, ale jeśli sprawisz, że każdy bajt się liczy , przyspieszysz swoją stronę.

Specyfikacje CSS2 są tutaj . Są one rozszerzone w CSS3, ale w żaden sposób ich nie dotyczą.

'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

Możesz użyć dowolnej kombinacji szerokości, stylu i koloru.
Tutaj 0ustawia szerokość, nonestyl. Mają ten sam wynik renderowania: nic nie jest wyświetlane.

— Oli
źródło

117

„Jeśli masz duży ruch, zauważysz różnicę!” - Wątpię w to. Nawet przy milionie odwiedzających na godzinę różnica wynosi zaledwie 3 MB. I to przy założeniu, że żaden z tych gości nie buforuje CSS, a także zakłada, że kompresja zapewnia zerową korzyść, obie bardzo mało prawdopodobne stwierdzenia. W rzeczywistości byłoby to prawdopodobnie kilkaset KB różnicy dziennie, co w zasadzie wynosi 0 dla dużej witryny. Nie, że myślę, że border:nonejest jakoś lepiej, ale używanie tego, ponieważ twoje rozumowanie jest błędne.

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft To był bardziej sarkazm niż cokolwiek innego ..… Lub hiperbola… Lub trochę oba. Masz rację, prawdopodobnie nigdy nie będzie to miało wpływu na środowisko uruchomieniowe, chyba że użyjesz go miliardy razy i nie będziesz mieć dostępu do CSS od razu przez internet.

— Oli

6

Może warto dodać do opisu, że stwierdzenie było sarkazmistyczne? :)

— timofey.com

7

Dla kompletności chciałem dodać kolejny aspekt. Przeniesienie 1 MB danych wymaga ilości energii zawartej we wspólnym brykiecie z węgla drzewnego. Zobacz przemówienie Teda Jaya Walkersa : player.vimeo.com/video/22399003 .

— Zensursula

11

Czy jestem tu jedynym, który kibicuje dodatkowej nanosekundy?

— Leathan

155

Są one równoważne w działaniu , wskazując na różne skróty :

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

I inni..

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

Oba działają, po prostu wybierz jeden i idź z nim :)

— Nick Craver
źródło

5

Należy również pamiętać, że „Po zerowej długości identyfikator jednostki jest opcjonalny” , więc border: 0;jest ważny.

— Ismael

59

@Dubs poważnie ?, lubisz, gdy ludzie linkują do w3schools?

— ajax333221,

29

@ ajax333221 - Uważaj tam z czarno-białym podejściem do w3schools (lub dowolnej strony internetowej). W tym przypadku opis jest w porządku, chociaż ogólnie ich nienawidzę, ich wyjaśnienie dotyczące tego pytania jest poprawne i dość zwięzłe. Możesz ich nienawidzić ogólnie, a ja tak, ale nie zakładaj, że 0% zawartości, która tam jest przydatna, niektóre z nich, nawet niektóre rzeczy w odpowiedziach Yahoo są do pewnego stopnia przydatne.

— Nick Craver

4

Źle! Jak opisano w mojej odpowiedzi i zademonstrowałem w pokazie na żywo , border: 0NIE jest to skrót border-width: 0. Zamiast tego, wersja skrócona zawsze ustawia wszystkie trzy właściwości: border-color, border-stylei border-width.

— Denilson Sá Maia

3

@ DenilsonSá Powiedziałem, że są takie same , jak pierwsza linia odpowiedzi, ponieważ jeśli ramka ma szerokość 0, pozostałe 2 nie mają tutaj znaczenia. Nawiasem mówiąc, CSS 2.1, który wyjaśnił zachowanie tutaj, był ostatnim telefonem 7 miesięcy po tej odpowiedzi, i zalecił ponad rok później. Jeśli chcesz tutaj wyjaśnić stare odpowiedzi, zrób to! Aktywnie zachęca się do edytowania aktualizacji.

— Nick Craver

42

Jak powiedzieli inni, oba są ważne i załatwią sprawę. Nie jestem jednak w 100% przekonany, że są identyczne. Jeśli masz trochę kaskadowego stylu, teoretycznie mogą one dać różne wyniki, ponieważ skutecznie zastępują różne wartości.

Na przykład. Jeśli ustawisz „border: none;” a potem mają dwa różne style, które zastępują szerokość i styl ramki, jeden z nich coś zrobi, a drugi nie.

W poniższym przykładzie zarówno dla IE, jak i Firefoksa pierwsze dwa div testowe wychodzą bez ramki. Druga dwójka jest jednak inna, ponieważ pierwszy div w drugim bloku jest gładki, a drugi div w drugim bloku ma przerywaną granicę o średniej szerokości.

Mimo że oba są poprawne, być może trzeba mieć oko na swoje style, jeśli robią dużo kaskady i takie, jak myślę.

<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
źródło

1

Aby usunąć granice datepickerów w Sencha Touch 2, musiałem użyć border: nonezamiast border: 0.

— Kris Khaira

39

(Uwaga: ta odpowiedź została zaktualizowana w dniu 01.08.2014 r., aby była bardziej szczegółowa, dokładniejsza i aby dodać prezentację na żywo )

Rozszerzanie właściwości shortand

Zgodnie ze specyfikacją W3C CSS2.1 ( „Wartości pominięte są ustawiane na wartości początkowe” ), następujące właściwości są równoważne:

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>

Jeśli te reguły są najbardziej szczegółowe stosowane do granic elementu, wówczas ramki nie zostaną wyświetlone ani z powodu zerowej szerokości, ani z powodu hidden/ nonestyle. Na pierwszy rzut oka te trzy zasady wyglądają równorzędnie. Zachowują się jednak na różne sposoby w połączeniu z innymi zasadami.

Granice w kontekście tabeli w zwijanym modelu granicy

Gdy tabela jest renderowana za pomocą border-collapse: collapse, wówczas każda renderowana granica jest dzielona między wiele elementów (granice wewnętrzne są dzielone jako komórki sąsiadujące; granice zewnętrzne są dzielone między komórkami i samą tabelą; ale również wiersze, grupy wierszy, kolumny i grupy kolumn dzielą granice ). Specyfikacja określa niektóre zasady rozwiązywania konfliktów granicznych :

Graniczy z border-styleod hiddennadrzędna wobec wszystkich innych spornych granic. […]

Granice o stylu nonemają najniższy priorytet. […]

Jeśli żaden ze stylów nie istnieje hiddeni przynajmniej jeden z nich nie jest none, wówczas wąskie granice są odrzucane na korzyść szerszych. […]

Jeśli style obramowania różnią się tylko kolorem, […]

Zatem w kontekście tabeli border: hidden(lub border-style: hidden) będzie miał najwyższy priorytet i spowoduje ukrycie wspólnej granicy, bez względu na wszystko.

Na drugim końcu priorytetów border: none(lub border-style: none) mają najniższy priorytet, a następnie obramowanie o zerowej szerokości (ponieważ jest to najwęższe obramowanie). Oznacza to, że oblicza się wartość z border-style: none, a obliczona wartość od border-width: 0są zasadniczo takie same.

Reguły kaskadowe i dziedziczenie

Ponieważ nonei 0wpływają na różne właściwości ( border-stylei border-width), będą zachowywać się inaczej, gdy bardziej szczegółowy przepis definiuje właśnie stylu lub po prostu szerokości. Zobacz na przykład odpowiedź Chrisa .

Demo na żywo !

Chcesz zobaczyć wszystkie te przypadki na jednej stronie? Otwórz demo na żywo !

— Denilson Sá Maia
źródło

21

Za pomocą

border: none;

nie działa w niektórych wersjach IE. IE9 jest w porządku, ale we wcześniejszych wersjach wyświetla ramkę, nawet jeśli styl jest „none”. Doświadczyłem tego, gdy korzystałem z arkusza stylów drukowania, w którym nie chciałem obramowań pól wprowadzania.

border: 0;

wydaje się działać dobrze we wszystkich przeglądarkach.

— Kieran
źródło

12

Możesz po prostu użyć obu zgodnie ze specyfikacją uprzejmie dostarczoną przez Oli.

Zawsze używam border:0 none;.

Chociaż ich oddzielne określenie nie jest szkodliwe, a niektóre przeglądarki szybciej analizują CSS, jeśli użyjesz starszych wywołań właściwości CSS1.

Chociaż border:0;zwykle domyślnie ustawia styl ramki none, zauważyłem jednak, że niektóre przeglądarki wymuszają swój domyślny styl ramki, który może dziwnie nadpisywać border:0;.

— Xenni82
źródło

„niektóre przeglądarki szybciej analizują CSS” → nie ma zauważalnej różnicy w czasie analizy CSS. I tak naprawdę czas analizy CSS nie ma znaczenia w 99,99999999999999% przypadków. Czas renderowania CSS jest znacznie ważniejszy (a także całkowicie niezwiązany z tym pytaniem).

— Denilson Sá Maia

1

Jakieś przeglądarki? Co masz na myśli? Wygląda jak sen czy coś takiego.

— Rootical V.

7

Używam:

border: 0;

Od 8.5.4 w CSS 2.1 :

'granica'

Wartość: [<border-width> || <border-style> || <'border-top-color'>] | dziedziczyć

Każda z twoich metod wygląda dobrze.

— Cletus
źródło

1

Zero kropkowane wygląda tak samo jak zero bryły

— Christopher Altman

1

Prawdziwe. Ale zobacz także odpowiedź Chrisa

— Antony Hatchkins

5

Cóż, aby dokładnie zobaczyć różnicę border: 0i border: nonemożemy wykonać pewne eksperymenty.

Eksperyment:

Utwórzmy trzy divy, pierwszy, którego obramowanie można wyłączyć, ustawiając jego szerokość na zero, drugi, który można wyłączyć, ustawiając jego styl na none, a trzeci z obramowaniem, które można „wyłączyć”, ustawiając jego kolor do przezroczystego. Następnie spróbujmy efektu:

border: 0;
border: none;
border: transparent

styl graniczny: solidny! ważny; kolor obramowania: czerwony! ważne; border-width: 2px! ważne; kolor obramowania: czerwony! ważne; border-width: 2px! ważne; styl graniczny: solidny! ważny;

Pokaż fragment kodu

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>

Rozwiń fragment kodu

Moje wyniki były takie same w przypadku Firefoxa i Chrome:

border: 0;Wygląda na to, aby ustawić szerokość 0i styl ramki none, ale nie zmieniać jej koloru;

border: none;Wygląda na to, że zmienia tylko styl graniczny (na none);

border: transparent;Wydaje się zmienić kolor transparentobramowania na i styl obramowania na none;

— Agesly Danzig
źródło

2

Podczas gdy wyniki najprawdopodobniej będą takie same (bez obramowania), zero i zero technicznie odnoszą się do różnych rzeczy.

0 adresów szerokość ramki i brak adresu styl ramki. Oczywiście granica 0 szerokości nie istnieje, więc nie będzie miała stylu.

Jeśli jednak później w swoim arkuszu stylów zamierzasz to zmienić, naturalnie konkretnie zwróć się do jednego lub drugiego. Gdybym chciał teraz obramowania 3px, byłoby to bezpośrednio zastępujące obramowanie: 0 w odniesieniu do szerokości. Gdybym teraz chciał kropkowaną ramkę, byłaby to bezpośrednio nadrzędna ramka: brak w odniesieniu do stylizacji.

— Carly
źródło

2

Najprostszym sposobem na usunięcie obramowania za pomocą css

border: 0;

— Uwielbiam Kumar
źródło

-1

NALEŻY KORZYSTAĆ Z GRANIC 0

Zgodnie z moją opinią i doświadczeniem sugeruję skorzystanie z opcji Border: 0; Istnieje ważny i bardzo dobry powód, ponieważ za każdym razem, gdy używamy obramowania: nie, rozumiem, że to działa, ale pomyśl o tym, że używamy obramowania, 1px, 2px, 3px itp. Mam na myśli, że nadajemy wartość naszej granicy ... px / em / rem w prawo, więc musimy użyć border: 0; do usuwania wartości granicy, ponieważ jak wiemy, gdy używamy tła: brak; oznacza to, że usuwamy z tła jakieś tło, które nie jest wartością, która jest czymś innym.

Dzięki

— Vinod Kumar
źródło

-3

W moim punkcie

border:none działa, ale nie jest prawidłowy standard w3c

więc lepiej możemy użyć border:0;

— anglimasS
źródło

6

Nie ma w tym nic złego border: none.

— Quentin,