क्या मुझे 'सीमा: कोई नहीं' या 'सीमा: 0' का उपयोग करना चाहिए?

Question

दोनों में से कौन सी विधि W3C मानकों के अनुरूप है? क्या वे दोनों ब्राउज़र में अपेक्षित व्यवहार करते हैं?

सीमा: कोई नहीं;
सीमा: 0;

Comments

मुझे इस प्रकार के अनदेखे प्रश्न पसंद हैं।

— क्रिस्टोफर अल्टमैन

Answer 1

दोनों मान्य हैं। यह तुम्हारी पसंद है।

मैं पसंद करता हूं border:0क्योंकि यह छोटा है; मुझे वह पढ़ने में आसान लगता है। आप noneअधिक सुपाठ्य पा सकते हैं । हम बहुत ही सक्षम सीएसएस पोस्ट-प्रोसेसर की दुनिया में रहते हैं, इसलिए मैं आपको सलाह देता हूं कि आप जो चाहें पसंद करें और फिर इसे "कंप्रेसर" के माध्यम से चलाएं। यहां लड़ने लायक कोई पवित्र युद्ध नहीं है।

यह सब कहा, अगर आप अपने सभी उत्पादन सीएसएस को हाथ से लिख रहे हैं, तो मैं टिप्पणियों में बड़बड़ाता रहता हूं-यह बैंडविड्थ के प्रति सचेत होने के लिए चोट नहीं करता है। उपयोग करने 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शैली सेट करता है। उनका एक ही प्रतिपादन परिणाम है: कुछ भी नहीं दिखाया गया है।

Comments

"यदि आपके पास बहुत अधिक ट्रैफ़िक है, तो आप अंतर नोटिस करेंगे!" - मुझे बहुत अधिक शक है कि। यहां तक ​​कि एक लाख आगंतुकों एक घंटे के साथ, अंतर केवल 3 एमबी है। और यह मानते हुए कि उनमें से कोई भी आगंतुक सीएसएस कैश नहीं किया गया है, और यह भी मानता है कि संपीड़न 0-लाभ प्रदान करता है, दोनों बहुत ही असंभावित बयान। वास्तव में, यह शायद कुछ सौ केबी का अंतर होगा जो एक बड़ी साइट के लिए मूल रूप से 0 है। ऐसा नहीं है कि मुझे लगता border:noneहै कि किसी तरह बेहतर है, लेकिन यह आपके तर्क के रूप में उपयोग दोषपूर्ण है।

— ब्लूराजा - डैनी पफ्लुघोफ्ट

@ BlueRaja-DannyPflughoeft यह किसी और चीज़ की तुलना में अधिक व्यंग्यात्मक था ... ... या अतिशयोक्ति ... या दोनों का एक सा। आप सही हैं, यह संभवतया किसी भी चीज पर कभी भी रनटाइम प्रभाव नहीं डालेगा जब तक कि आप इसका उपयोग कई बार नहीं करते हैं और इंटरनेट पर हर कोई आपके सीएसएस तक एक ही बार पहुंचता है।

— ओली

शायद यह विवरण जोड़ने के लायक है कि बयान व्यंग्यात्मक था? :)

— timofey.com

पूर्णता के लिए मैं एक और पहलू जोड़ना चाहता था। 1MB डेटा स्थानांतरित करने के लिए एक सामान्य लकड़ी का कोयला ईट में निहित ऊर्जा की मात्रा की आवश्यकता होती है। : जे वॉकर के इस TED बात देखें player.vimeo.com/video/22399003 ।

— ज़ेनर्सुला २ Z

क्या मैं केवल एक ही वापस यहाँ हूँ जो एक अतिरिक्त नैनोसेकंड पर खुश है?

— लीथन

Answer 2

वे प्रभाव में समतुल्य हैं , विभिन्न शॉर्टकट्स की ओर इशारा करते हैं :

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

और दूसरा..

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

दोनों काम करते हैं, बस एक उठाओ और इसके साथ जाओ :)

Comments

यह भी ध्यान दें कि "शून्य लंबाई के बाद, इकाई पहचानकर्ता वैकल्पिक है" , इसलिए border: 0;यह मान्य है।

— इस्माईल

@Dubs गंभीरता से ?, आपको पसंद है जब लोग w3schools से लिंक करते हैं?

— अजाक्स 333221

@ ajax333221 - w3schools (या किसी भी वेबसाइट) के प्रति काले और सफेद रवैये से सावधान रहें । इस मामले में विवरण ठीक है, जबकि मैं उनसे सामान्य रूप से घृणा करता हूं, क्योंकि उनका स्पष्टीकरण इस प्रश्न से संबंधित है, सही और निष्पक्ष रूप से संक्षिप्त है। आप सामान्य रूप से उनसे नफरत करने के लिए स्वतंत्र हैं, और मैं करता हूं, लेकिन यह मत मानिए कि सामग्री का 0% उपयोगी है, इसमें से कुछ है, यहां तक ​​कि याहू के उत्तर पर कुछ चीजें उपयोगी हैं, एक हद तक।

— निक Craver

गलत! में वर्णित है मेरा उत्तर और में प्रदर्शन लाइव डेमो , border: 0के लिए शॉर्टकट नहीं है border-width: 0। इसके बजाय, लघु संस्करण हमेशा तीनों गुण सेट: border-color, border-styleऔर border-width।

— डेनिलसन सा मैया

@ DenilsonSá मैंने कहा कि वे उत्तर की पहली पंक्ति के रूप में एक ही प्रभाव में थे , क्योंकि अगर सीमा में 0 चौड़ाई है, तो अन्य 2 यहां कोई फर्क नहीं पड़ता। एक तरफ हालांकि, सीएसएस 2.1 ने स्पष्ट किया कि इस जवाब के 7 महीने बाद यहां का व्यवहार स्पष्ट था, और इस पर एक वर्ष से अधिक की सिफारिश के रूप में धकेल दिया गया। यदि आप यहाँ पुराने उत्तरों को स्पष्ट करना चाहते हैं, तो कृपया ऐसा करें! अपडेट के लिए संपादन सक्रिय रूप से प्रोत्साहित किया जाता है।

— निक Craver

Answer 3

जैसा कि दूसरों ने कहा है कि दोनों वैध हैं और चाल चलेगा। मैं 100% आश्वस्त नहीं हूं कि वे समान हैं। यदि आपके पास कुछ शैली कैस्केडिंग चल रही है, तो वे सिद्धांत में अलग-अलग परिणाम दे सकते हैं क्योंकि वे प्रभावी रूप से विभिन्न मूल्यों से आगे निकल रहे हैं।

उदाहरण के लिए। यदि आप "सीमा: कोई नहीं;" और फिर बाद में सीमा की चौड़ाई और शैली को ओवरराइड करने वाली दो अलग-अलग शैलियों में से एक में कुछ करना होगा और दूसरा नहीं होगा।

IE और फ़ायरफ़ॉक्स दोनों पर निम्नलिखित उदाहरण में, पहले दो परीक्षण 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>

Comments

स्नेहा टच 2 में डेटर्स की सीमाओं को हटाने के लिए, मुझे border: noneइसके बजाय उपयोग करना था border: 0।

— क्रिश खैरा

Answer 4

(नोट: यह उत्तर २०१४-० has-१९ को अपडेट किया गया है ताकि इसे और अधिक विस्तृत, अधिक सटीक और लाइव डेमो जोड़ा जा सके )

छोटे गुणों का विस्तार

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) को प्रभावित करते हैं , तो वे अलग तरह से व्यवहार करेंगे जब एक अधिक विशिष्ट नियम सिर्फ शैली या सिर्फ चौड़ाई को परिभाषित करता है। एक उदाहरण के लिए क्रिस जवाब देखें ।

लाइव डेमो !

इन सभी मामलों को एक ही पृष्ठ में देखना चाहते हैं? लाइव डेमो खोलें !

Answer 5

का उपयोग करते हुए

border: none;

IE के कुछ संस्करणों में काम नहीं करता है। IE9 ठीक है, लेकिन पिछले संस्करणों में यह सीमा को प्रदर्शित करता है जब शैली "कोई नहीं" है। मुझे इसका अनुभव तब हुआ जब मैं एक प्रिंट स्टाइलशीट का उपयोग कर रहा था जहाँ मैं इनपुट बॉक्स पर बॉर्डर नहीं चाहता था।

border: 0;

सभी ब्राउज़रों में ठीक काम करने लगता है।

Answer 6

आप बस ओली द्वारा प्रदान किए गए विनिर्देश के अनुसार दोनों का उपयोग कर सकते हैं।

मैं हमेशा उपयोग करता हूं border:0 none;।

हालाँकि, उन्हें अलग से निर्दिष्ट करने में कोई बुराई नहीं है और यदि आप विरासत में सीएसएस 1 संपत्ति कॉल का उपयोग करते हैं तो कुछ ब्राउज़र सीएसएस को तेजी से पार्स करेंगे।

हालांकि border:0;सामान्य रूप से सीमा शैली को डिफ़ॉल्ट रूप से noneदेखा जा सकता है, लेकिन मैंने कुछ ब्राउज़रों को उनकी डिफ़ॉल्ट सीमा शैली को लागू करते हुए देखा है जो कि अजीब तरह से ओवरराइट कर सकते हैं border:0;।

Comments

"कुछ ब्राउज़र सीएसएस को तेजी से पार्स करेंगे" → सीएसएस पार्सिंग समय में कोई ध्यान देने योग्य अंतर नहीं है। और, वास्तव में, सीएसएस पार्सिंग का समय 99.999999999999% मामलों के लिए प्रासंगिक नहीं है। CSS रेंडरिंग समय बहुत अधिक महत्वपूर्ण है (और इस प्रश्न से पूरी तरह असंबंधित भी)।

— डेनिलसन सा मैया

कुछ ब्राउज़र? क्या मतलब? एक सपना या कुछ और की तरह लगता है।

— रूटिकल वी।

Answer 7

मैं उपयोग करता हूं:

border: 0;

सीएसएस 2.1 में 8.5.4 से :

'बॉर्डर'

मान: [<सीमा-चौड़ाई> || <सीमा-शैली> || <'बॉर्डर-टॉप-कलर'>] | इनहेरिट

तो या तो आपके तरीके ठीक लग रहे हैं।

Comments

शून्य बिंदीदार शून्य ठोस के समान दिखता है

— क्रिस्टोफर ऑल्टमैन

सच। लेकिन, क्रिस का जवाब भी देखें

— एंटनी हैचकिंस

Answer 8

ठीक है, के बीच अंतर को देखने के लिए border: 0और border: noneहम कुछ प्रयोग कर सकते हैं।

प्रयोग:

आओ हम तीन तलाक बनाते हैं, पहला वह जिसकी सीमा केवल शून्य पर अपनी चौड़ाई निर्धारित करके अक्षम की जा सकती है, दूसरी वह जो केवल अपनी शैली को किसी से भी सेट करके अक्षम की जा सकती है, और एक सीमा जिसके साथ केवल "अक्षम" हो सकता है तीसरा रंग पारदर्शी करने के लिए। तो के प्रभाव की कोशिश करते हैं:

• border: 0;
• border: none;

• border: transparent

  सीमा-शैली: ठोस-महत्वपूर्ण; सीमा-रंग: लाल-महत्वपूर्ण; सीमा-चौड़ाई: 2px; महत्वपूर्ण; सीमा-रंग: लाल-महत्वपूर्ण; सीमा-चौड़ाई: 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>

मेरे परिणाम फ़ायरफ़ॉक्स और क्रोम दोनों में समान थे:

border: 0;के लिए सीमा-चौड़ाई 0और सीमा-शैली सेट करने के लिए लगता है none, लेकिन सीमा-रंग नहीं बदलते;

border: none;केवल सीमा-शैली ( none) को बदलने के लिए लगता है ;

border: transparent;सीमा-रंग को transparentऔर सीमा-शैली को बदलने के लिए लगता है none;

Answer 9

जबकि परिणाम सबसे अधिक समान (कोई सीमा नहीं) होंगे, 0 और कोई भी तकनीकी रूप से विभिन्न चीजों को संबोधित नहीं कर रहा है।

0 सीमा सीमा को संबोधित करता है और कोई भी सीमा शैली को संबोधित नहीं करता है। जाहिर है 0 चौड़ाई की सीमा कोई भी नहीं है इसलिए कोई शैली नहीं होगी।

हालाँकि, यदि बाद में आपकी स्टाइलशीट में आप इसे ओवरराइड करने का इरादा रखते हैं, तो आप स्वाभाविक रूप से एक या दूसरे को विशेष रूप से संबोधित करेंगे। अगर मैं अब एक 3px सीमा चाहता था, तो वह सीधे सीमा से आगे निकल जाएगी: 0 चौड़ाई के संबंध में। अगर मैं अब एक बिंदीदार सीमा चाहता था, जो सीधे सीमा से आगे निकल जाएगी: स्टाइल के संबंध में कोई नहीं।

Answer 10

सबसे आसान तरीका सीएसएस के साथ सीमा को हटाने के लिए

border: 0;

Answer 11

हम 0 बोर्डर का उपयोग करते हैं

मेरी राय और अनुभव के अनुसार, मेरा सुझाव है कि कृपया सीमा का उपयोग करें: 0; एक वैध और बहुत अच्छा कारण है क्योंकि जब भी हम सीमा का उपयोग करते हैं: कोई नहीं, मैं समझता हूं कि यह काम करता है लेकिन लगता है कि हम एक सीमा, 1px, 2px, 3px आदि का उपयोग कर रहे हैं। मेरा मतलब है कि हम मूल्य दे रहे हैं हमारी सीमा है ... px / em / rem सही तो हमें सीमा का उपयोग करने की आवश्यकता है: 0; सीमा मूल्य को हटाने के लिए क्योंकि जैसा कि हम जानते हैं कि जब हम पृष्ठभूमि का उपयोग करते हैं: कोई नहीं; इसका मतलब है कि हम पृष्ठभूमि को कुछ पृष्ठभूमि को हटा रहे हैं जो कि एक मूल्य नहीं है जो कुछ और है।

धन्यवाद

Answer 12

मेरी बात में,

border:none काम कर रहा है लेकिन मान्य w3c मानक नहीं है

इतना बेहतर हम उपयोग कर सकते हैं border:0;

Comments

इसमें कुछ भी अमान्य नहीं है border: none।

— क्वेंटिन