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:0pozwoli 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:noPercentages: N/A
Media: visual
Computedvalue: 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.
„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?
@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><divclass="zerotest"><divclass="setwidth">
"Border: 0" and "border-width: 3px"
</div><divclass="setstyle">
"Border: 0" and "border-style: dashed"
</div></div><divclass="nonetest"><divclass="setwidth">
"Border: none" and "border-width: 3px"
</div><divclass="setstyle">
"Border: none" and "border-style: dashed"
</div></div></body></html>
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 .
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.
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;.
„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.
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:
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;}
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.
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.
Odpowiedzi:
Oba są ważne. To Twój wybór.
Wolę,
border:0
ponieważ jest krótszy; Uważam to za łatwiejsze do odczytania. Możesz znaleźćnone
bardziej 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ą.
Możesz użyć dowolnej kombinacji szerokości, stylu i koloru.
Tutaj
0
ustawia szerokość,none
styl. Mają ten sam wynik renderowania: nic nie jest wyświetlane.źródło
border:none
jest jakoś lepiej, ale używanie tego, ponieważ twoje rozumowanie jest błędne.Są one równoważne w działaniu , wskazując na różne skróty :
I inni..
Oba działają, po prostu wybierz jeden i idź z nim :)
źródło
border: 0;
jest ważny.border: 0
NIE jest to skrótborder-width: 0
. Zamiast tego, wersja skrócona zawsze ustawia wszystkie trzy właściwości:border-color
,border-style
iborder-width
.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ę.
źródło
border: none
zamiastborder: 0
.(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:
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
/none
style. 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 :Zatem w kontekście tabeli
border: hidden
(lubborder-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
(lubborder-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ść zborder-style: none
, a obliczona wartość odborder-width: 0
są zasadniczo takie same.Reguły kaskadowe i dziedziczenie
Ponieważ
none
i0
wpływają na różne właściwości (border-style
iborder-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 !
źródło
Za pomocą
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.
wydaje się działać dobrze we wszystkich przeglądarkach.
źródło
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 ramkinone
, zauważyłem jednak, że niektóre przeglądarki wymuszają swój domyślny styl ramki, który może dziwnie nadpisywaćborder:0;
.źródło
Używam:
Od 8.5.4 w CSS 2.1 :
Każda z twoich metod wygląda dobrze.
źródło
Cóż, aby dokładnie zobaczyć różnicę
border: 0
iborder: none
moż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
Moje wyniki były takie same w przypadku Firefoxa i Chrome:
border: 0;
Wygląda na to, aby ustawić szerokość0
i styl ramkinone
, ale nie zmieniać jej koloru;border: none;
Wygląda na to, że zmienia tylko styl graniczny (nanone
);border: transparent;
Wydaje się zmienić kolortransparent
obramowania na i styl obramowania nanone
;źródło
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.
źródło
Najprostszym sposobem na usunięcie obramowania za pomocą css
źródło
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
źródło
W moim punkcie
border:none
działa, ale nie jest prawidłowy standard w3cwięc lepiej możemy użyć
border:0;
źródło
border: none
.