'Border: none' veya 'border: 0' kullanmalı mıyım?

543

İki yöntemden hangisi W3C standartlarına uygundur? Her ikisi de tarayıcılarda beklendiği gibi mi davranıyor?

sınır: yok;
sınır: 0;

css border

— John Himmelman
kaynak

74

Bu tür gözden kaçan soruları seviyorum.

— Christopher Altman

453

Her ikisi de geçerlidir. Bu senin seçimin.

Tercih ederim border:0çünkü daha kısa; Bunu okumayı daha kolay buluyorum. noneDaha okunaklı bulabilirsiniz . Çok yetenekli CSS son işlemcilerin olduğu bir dünyada yaşıyoruz, bu yüzden tercih ettiğiniz her şeyi kullanmanızı ve daha sonra bir "kompresör" ile çalıştırmanızı tavsiye ederim. Burada savaşmaya değer kutsal bir savaş yok.

Tüm bunlar, eğer tüm üretim CSS'nizi elle yazıyorsanız, yorumlardaki huysuzluğa rağmen, bant genişliği konusunda bilinçli olmanın acı çekmediğini söyledim. Kullanılması border:0 olacaktır bant genişliği sonsuzküçük miktarda kaydedin. Kendi başına çok az şey sayar, ancak her bayt sayısını yaparsanız, web sitenizi daha hızlı hale getireceksiniz.

CSS2 teknik özellikleri burada . Bunlar CSS3'te genişletilmiştir, ancak bununla hiçbir şekilde ilgili değildir.

'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

Genişlik, stil ve renk kombinasyonlarını kullanabilirsiniz.
Burada 0genişliği, nonestili ayarlar . Aynı oluşturma sonucuna sahiptirler: hiçbir şey gösterilmez.

— Oli
kaynak

117

"Çok fazla trafiğiniz varsa, farkı fark edeceksiniz!" - Şüphem Çok. Saatte bir milyon ziyaretçiyle bile fark sadece 3 MB. Ve bu, bu ziyaretçilerin hiçbirinin CSS'yi önbelleğe almadığını ve sıkıştırma işleminin her ikisi de çok olası olmayan ifadeler için 0 fayda sağladığını varsayar. Gerçekte, muhtemelen büyük bir site için temelde 0 olan günde birkaç yüz KB fark olurdu. Bir border:noneşekilde daha iyi olduğunu düşünmüyorum , ama bunu muhakemeniz olarak kullanmak hatalı.

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Her şeyden daha alaycıydı ..… Veya abartma ... Ya da ikisinden de biraz. Haklısın, bunun milyonlarca kez kullanmadıkça ve internetteki herkesin CSS'nize bir kerede erişmesine izin vermedikçe, bunun hiçbir zaman herhangi bir çalışma zamanı etkisi olmayacaktır.

— Oli

6

Belki de ifadenin alaycı-istic olduğunu açıklamaya değer mi? :)

— timofey.com

7

Sadece bütünlük için başka bir yön eklemek istedim. 1 MB veri aktarımı için ortak bir kömür briketinde bulunan enerji miktarı gerekir. Jay Walkers'ın şu TED konuşmasına bakın: player.vimeo.com/video/22399003 .

— Zensursula

11

Ekstra nanosaniyede tezahürat yapan tek kişi ben miyim?

— Leathan

155

Bunlar içinde eşdeğerdir etkisi , farklı kısayollar işaret :

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

Ve diğer..

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

Her ikisi de çalışır, sadece birini seç ve onunla git :)

— Nick Craver
kaynak

5

Ayrıca unutmayın "isteğe bağlıdır tanımlayıcı sıfır uzunlukta sonra birimi" bu yüzden, border: 0;geçerlidir.

— İshmael

59

@Dubs cidden ?, insanlar w3schools bağladığında sever misiniz?

— ajax333221

29

@ ajax333221 - W3schools'a (veya herhangi bir web sitesine) karşı siyah beyaz bir tutumla dikkatli olun . Bu durumda açıklama iyidir, genel olarak onlardan nefret ederken, bu soruya ilişkin açıklamaları doğru ve oldukça özlüdür. Genel olarak onlardan nefret etmekte özgürsünüz, ama öyle, ama içeriğin% 0'ının yararlı olduğunu varsaymayın, bazıları, hatta yahoo cevaplarındaki bazı şeyler bile bir dereceye kadar yararlıdır.

— Nick Craver

4

Yanlış! Açıklandığı gibi benim cevap ve gösteri canlı demo , border: 0kısayol DEĞİLDİR border-width: 0. Bunun yerine, kısa versiyon her zaman her üç özelliklerini ayarlar: border-color, border-styleve border-width.

— Denilson Sá Maia

3

@ DenilsonSá Onların aynıydı söyledi yürürlükte sınır 0 genişliğe sahipse, diğer 2 dert etmeyin çünkü cevabın ilk satırı olarak. Bir yana, buradaki davranışı netleştiren CSS 2.1, bu cevaptan 7 ay sonra son çağrı oldu ve bir yıl sonra bir öneri olarak itti. Burada eski cevapları açıklığa kavuşturmak istiyorsanız, lütfen yapın! Güncellemeler için düzenleme aktif olarak teşvik edilir.

— Nick Craver

42

Diğerlerinin söylediği gibi her ikisi de geçerlidir ve hile yapacak. % 100 aynı olduklarına ikna olmadım. Eğer bazı stil basamakları varsa, teoride farklı değerleri etkili bir şekilde geçersiz kıldıkları için farklı sonuçlar üretebilirler.

Örneğin. "Border: none;" ve daha sonra sınır genişliğini ve stilini geçersiz kılan iki farklı stile sahip olursanız, biri bir şey yapar ve diğeri yapmaz.

Aşağıdaki örnekte hem IE hem de firefox'ta ilk iki test bölümü kenarlıksız çıkıyor. Bununla birlikte, ikinci ikisi, ikinci bloktaki birinci bölmenin düz olması ve ikinci bloktaki ikinci bölmenin, orta genişlikte kesik kenarlığa sahip olması ile farklıdır.

Bu yüzden ikisi de geçerli olsa da, çok basamaklı ve bence böyle bir tarzda yaparlarsa, tarzlarınıza göz kulak olmanız gerekebilir.

<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
kaynak

1

Sencha Touch 2'de datepickers sınırlarını kaldırmak için, border: noneyerine kullanmak zorunda kaldım border: 0.

— Kris Khaira

39

(not: bu cevap daha ayrıntılı, daha doğru ve canlı bir demo eklemek için 2014-08-01 tarihinde güncellenmiştir )

Kısalma özelliklerini genişletme

Göre W3C CSS2.1 tarifnamede ( “atlanmış değerler başlangıç değerlerine ayarlanır” ), aşağıdaki özellikler eşdeğerdir:

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>

Bu kurallar bir öğenin kenarlıklarına uygulanan en belirgin kurallarsa, sıfır genişlik nedeniyle veya hidden/ nonestil nedeniyle kenarlıklar gösterilmez . Yani, ilk bakışta, bu üç kural eşdeğer görünüyor. Bununla birlikte, diğer kurallarla birleştirildiğinde farklı şekillerde davranırlar.

Çöken kenarlık modelinde tablo bağlamında kenarlıklar

Bir tablo kullanılarak oluşturulduğunda, oluşturulan border-collapse: collapseher kenarlık birden çok öğe arasında paylaşılır (iç kenarlıklar komşu hücreler olarak paylaşılır; dış kenarlıklar hücreler ve tablonun kendisi arasında paylaşılır; ancak satırlar, satır grupları, sütunlar ve sütun grupları da sınırları paylaşır ). Spesifikasyon sınır çatışması çözümü için bazı kuralları tanımlar :

İle Sınırlar border-stylearasında hiddentüm diğer çakışan sınırları üzerinde öncelik taşır. [...]

noneEn düşük önceliğe sahip stili olan kenarlıklar . [...]

Stillerden hiçbiri yoksa hiddenve en az biri değilse none, dar sınırlar daha geniş olanların lehine atılır. [...]

Kenarlık stilleri yalnızca renkte farklılık gösteriyorsa, […]

Yani, bir tablo bağlamında, border: hidden(veya border-style: hidden) en yüksek önceliğe sahip olacak ve ne olursa olsun, paylaşılan kenarlığı gizleyecektir.

Önceliklerin diğer ucunda border: none(veya border-style: none) en düşük önceliğe, ardından sıfır genişlik sınırına sahiptir (çünkü en dar sınırdır). Bu araç, bir o hesaplanan değer arasında border-style: noneve hesaplanan değeri arasında border-width: 0esas olarak aynıdır.

Basamaklı kurallar ve miras

Yana noneve 0farklı özellikler (etkileyebilir border-styleve border-width), onlar davranacaktır farklı zaman daha spesifik kural tanımlar sadece stil ya da sadece genişliği. Örnek için Chris cevabına bakınız .

Canlı demo !

Tüm bu vakaları tek bir sayfada görmek ister misiniz? Canlı demosu açın !

— Denilson Sá Maia
kaynak

21

kullanma

border: none;

IE'nin bazı sürümlerinde çalışmaz. IE9 gayet iyi ancak önceki sürümlerde stil "none" olsa bile kenarlığı gösteriyor. Giriş kutularında kenarlıklar istemediğim bir yazdırma stili sayfası kullanırken bunu yaşadım.

border: 0;

tüm tarayıcılarda iyi çalışıyor gibi görünüyor.

— Kieran
kaynak

12

Her ikisini de Oli tarafından sağlanan spesifikasyona göre kullanabilirsiniz.

Ben her zaman kullanırım border:0 none;.

Bunları ayrı ayrı belirtmenin bir zararı olmamasına rağmen, eski CSS1 özellik çağrılarını kullanırsanız bazı tarayıcılar CSS'yi daha hızlı ayrıştırır.

Gerçi border:0;normalde sınır stil varsayılan olacaktır none, ben ancak hangi can garip üzerine yazma varsayılan sınır stilini uygulayan bazı tarayıcılar fark etmiş border:0;.

— Xenni82
kaynak

"bazı tarayıcılar CSS'yi daha hızlı ayrıştırır" → CSS ayrıştırma süresinde belirgin bir fark yoktur. Ve gerçekten, CSS ayrıştırma süresi, vakaların% 99.999999999999'u ile ilgili değildir. CSS oluşturma süresi çok daha önemlidir (ve bu soru ile tamamen ilgisizdir).

— Denilson Sá Maia

1

Bazı tarayıcılar? Ne demek istiyorsun? Bir rüya gibi görünüyor.

— Rootical V.Ağustos

7

Kullanırım:

border: 0;

Gönderen CSS 2.1'de 8.5.4 :

'Sınır'

Değer: [<border-width> || <border-style> || <'kenarlık rengi'>] | kalıt

Yani yöntemlerinizden herhangi biri iyi görünüyor.

— cletus
kaynak

1

Sıfır noktalı sıfır katı ile aynı görünüyor

— Christopher Altman

1

Doğru. Ancak, Chris'in cevabına da bakınız

— Antony Hatchkins

5

Eh, doğrusu arasındaki farkı görmek border: 0ve border: nonebazı deneyler yapabilirsiniz.

Deney:

İlk önce kenarlığı yalnızca genişliği sıfır olarak ayarlanarak devre dışı bırakılabilen üç bölme oluşturalım, ikincisi yalnızca stilini yok olarak ayarlayarak devre dışı bırakılabilir ve üçüncüsü ise yalnızca kenarlığı ayarlayarak "devre dışı bırakılabilen" şeffaf renk. O zaman etkisini deneyelim:

border: 0;
border: none;
border: transparent

sınır tarzı: katı! önemli; kenarlık rengi: kırmızı! önemli; sınır genişliği: 2 piksel! kenarlık rengi: kırmızı! önemli; sınır genişliği: 2 piksel! sınır tarzı: katı! önemli;

Kod snippet'ini göster

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>

Snippet'i genişlet

Sonuçlarım hem firefox hem de chrome'da aynıydı:

border: 0;Kenarlık genişliğini 0ve kenarlık stilini şu şekilde ayarlıyor gibi görünüyor none, ancak kenarlık rengini değiştirmiyor;

border: none;Sadece kenarlık stilini değiştirir (to none);

border: transparent;Kenarlık rengini transparentve kenarlık stilini none;

— Yaşça Danzig
kaynak

2

Sonuçlar büyük olasılıkla aynı olsa da (kenarlık yok), 0 ve hiçbiri teknik olarak farklı şeyleri ele almıyor.

0 kenarlık genişliğini, hiçbiri kenarlık stilini ele almaz. Açıkçası, 0 genişlikli bir sınır mevcut değildir, bu nedenle bir tarzı olmayacaktır.

Bununla birlikte, daha sonra stil sayfanızda bunu geçersiz kılmak istiyorsanız, doğal olarak özellikle birini veya diğerini ele alırsınız. Şimdi 3 piksellik bir kenarlık isteseydim, genişlik açısından 0: 0'ı doğrudan geçersiz kılardı. Şimdi noktalı bir kenarlık isteseydim, bu doğrudan kenarlığı geçersiz kılardı: stil açısından hiçbiri.

— Carly
kaynak

2

CSS ile kenarlığı kaldırmanın en kolay yolu

border: 0;

— Aşk Kumar
kaynak

-1

SINIRI 0 KULLANMALIYIZ

Görüş ve tecrübelerime göre, lütfen Border: 0; Geçerli ve çok iyi bir sebep var çünkü sınır kullandığımızda: hiçbiri, işe yaradığını anlıyorum ama bir kenarlık, 1px, 2px, 3px vb. Kullandığımızı düşünüyoruz. / em / rem doğru, bu yüzden kenarlık kullanmalıyız: 0; arka plan kullandığımızda bildiğimiz gibi sınır değerini kaldırmak için: none; arka planı başka bir şey olmayan bir değer olmayan bir arka planı kaldırdığımız anlamına gelir.

Teşekkürler

— Vinod Kumar
kaynak

-3

Benim açımdan,

border:none çalışıyor ancak geçerli değil w3c standardı

daha iyi kullanabiliriz border:0;

— anglimasS
kaynak

6

Hakkında geçersiz bir şey yok border: none.

— Quentin