আমি কি 'সীমানা: কিছুই না' বা 'সীমানা: 0' ব্যবহার করব?

Question

দুটি পদ্ধতির মধ্যে কোনটি ডাব্লু 3 সি মানের সাথে সঙ্গতিপূর্ণ? তারা উভয়ই ব্রাউজার জুড়ে প্রত্যাশার মতো আচরণ করে?

সীমানা: কিছুই নয়;
সীমানা: 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 is আমি মনে করি যে border:noneএটি কোনওরকম ভাল, তবে এটি আপনার যুক্তি হিসাবে ব্যবহার করা ত্রুটিযুক্ত।

— ব্লুরাজা - ড্যানি পিফ্লুঘুফুট

@ ব্লুরাজা-ড্যানি ফ্লুঘুফুট এটি অন্য যে কোনও কিছুর চেয়ে বেশি ব্যঙ্গাত্মক ছিল ..… বা হাইপারবোলে ... বা কিছুটা হলেও। আপনি ঠিক বলেছেন, আপনি এটি কয়েক মিলিয়ন বার ব্যবহার না করে এবং ইন্টারনেটে প্রত্যেককে একবারে আপনার সিএসএসে অ্যাক্সেস না করে না থাকলে সম্ভবত কোনও কিছুর উপরে রানটাইম প্রভাব ফেলবে না।

— অলি

সম্ভবত বিবৃতিতে এটি যুক্তিযুক্ত হওয়া উচিত যে বিবৃতিটি ব্যঙ্গাত্মক-ইসটিক ছিল? :)

— টিমোফের.কম

শুধু সম্পূর্ণতার জন্য আমি অন্য দিকটি যুক্ত করতে চেয়েছিলাম। 1MB ডেটা স্থানান্তর করতে একটি সাধারণ কাঠকয়লা ব্রিটকেটে থাকা পরিমাণ পরিমাণ শক্তির প্রয়োজন। জে ওয়াকারদের এই টিইডি টকটি দেখুন : প্লেয়ার.ভিমো . com/ভিডিও / ২২৯৯৯০০৩ ।

— জেনসুরসুলা

আমি কি এখানেই আবার ফিরে এসেছি যে অতিরিক্ত ন্যানোসেকেন্ডে চিয়ার্স করব?

— লেইথান

Answer 2

এগুলি কার্যকরভাবে সমান , বিভিন্ন শর্টকাটগুলিতে ইশারা করে :

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

এবং অন্যান্য..

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

দু'জনেই কাজ করে, কেবল একটি বাছুন এবং এটি দিয়ে যান :)

Comments

এছাড়াও মনে রাখবেন যে "একটি শূন্য দৈর্ঘ্যের পরে ইউনিট শনাক্তকারী optionচ্ছিক" তাই border: 0;বৈধ is

— ইসমাইল

@ ডাবগুলি গুরুত্ব সহকারে ?, আপনি পছন্দ করেন যখন লোকেরা ডাব্লু 3 স্কুলগুলিতে লিঙ্ক করে?

— ajax333221

@ অজ্যাক্স 333221 - ডাব্লু 3 স্কুলগুলির (বা কোনও ওয়েবসাইট) প্রতি কালো এবং সাদা মনোভাব নিয়ে সেখানে সতর্ক থাকুন । এই ক্ষেত্রে বিবরণটি ঠিক আছে, আমি সাধারণভাবে তাদের ঘৃণা করি, এই প্রশ্নের সাথে সম্পর্কিত হিসাবে তাদের ব্যাখ্যাটি সঠিক এবং মোটামুটি সংক্ষিপ্ত। আপনি সাধারণভাবে তাদের ঘৃণা করতে মুক্ত, এবং আমি তা করি তবে এটি অনুমান করবেন না যে 0% লিখিত সামগ্রী দরকারী রয়েছে, এর কয়েকটি হ'ল ইয়াহু উত্তরের কিছু জিনিসও একগুণ কার্যকর।

— নিক Craver

ভুল! বর্ণনা অনুযায়ী আমার উত্তর এবং প্রদর্শিত লাইভ ডেমো , border: 0জন্য শর্টকার্ট নয় border-width: 0। পরিবর্তে, সংক্ষিপ্ত সংস্করণ সবসময় সব তিনটি বৈশিষ্ট্য নির্ধারণ করে: border-color, border-styleএবং border-width।

— ডেনিলসন সা মিয়া

@ ড্যানিলসনসá আমি বলেছিলাম যে তারা উত্তরের প্রথম লাইনের মতোই কার্যকর ছিল কারণ সীমান্তটির যদি 0 প্রস্থ থাকে তবে অন্য 2 এখানে কিছু যায় আসে না। যদিও একদিকে যেমন, সিএসএস ২.১ যা এখানে আচরণের স্পষ্ট ব্যাখ্যা করেছিল এই উত্তরের months মাস পরে সর্বশেষ কল হয়েছিল এবং এটির এক বছর পরে একটি সুপারিশ হিসাবে ধাক্কা। আপনি যদি এখানে পুরানো উত্তরগুলি পরিষ্কার করতে চান তবে দয়া করে এটি করুন! আপডেটের জন্য সম্পাদনা সক্রিয়ভাবে উত্সাহিত করা হয়।

— নিক ক্র্যাভার

Answer 3

অন্যরা যেমন বলেছে যে উভয়ই বৈধ এবং কৌশলটি করবে। আমি 100% বিশ্বাস করি না যে তারা যদিও অভিন্ন। যদি আপনার কিছু স্টাইল ক্যাসকেডিং চলছে তবে তারা তাত্ত্বিকভাবে বিভিন্ন ফলাফল আনতে পারে যেহেতু তারা কার্যকরভাবে বিভিন্ন মানকে ওভাররাইড করে।

উদাহরণ স্বরূপ. যদি আপনি "সীমানা: কিছুই না" সেট করেন তবে; এবং তারপরে দুটি আলাদা স্টাইল রয়েছে যা সীমানা প্রস্থ এবং স্টাইলকে ওভাররাইড করে তারপরে একটি কিছু করবে এবং অন্যটি করবে না।

আইই এবং ফায়ারফক্স উভয়ের উপর নিম্নলিখিত উদাহরণে প্রথম দুটি পরীক্ষার ডিভ কোন সীমানা ছাড়াই প্রকাশিত হয়। দ্বিতীয় দুটি অবশ্য দ্বিতীয় ব্লকের প্রথম ডিভের সাথে পৃথক এবং দ্বিতীয় ব্লকে দ্বিতীয় ডিভের মাঝারি প্রস্থের ড্যাশযুক্ত সীমানা রয়েছে।

সুতরাং এগুলি উভয়ই বৈধ হলেও আপনার স্টাইলগুলিতে আপনার নজর রাখা প্রয়োজন হতে পারে যদি তারা অনেকটা ক্যাসকেডিং করে এবং যেমন আমার মনে হয়।

<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

(দ্রষ্টব্য: এটি আরও বিশদ, আরও নির্ভুল এবং লাইভ ডেমো যুক্ত করতে এই উত্তরটি 2014-08-01 এ আপডেট করা হয়েছে )

শর্ট্যান্ডের বৈশিষ্ট্য প্রসারিত করা হচ্ছে

ডাব্লু 3 সি সিএসএস ১.১ স্পেসিফিকেশন অনুসারে ( "অনুমোদিত মানগুলি তাদের প্রাথমিক মানগুলিতে সেট করা আছে" ), নিম্নলিখিত বৈশিষ্ট্যগুলি সমতুল্য:

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) সর্বনিম্ন অগ্রাধিকার পায়, তারপরে শূন্য-প্রস্থের সীমানা (কারণ এটি সরু সীমানা) is এর অর্থ এই যে একটি নির্ণিত মান এর border-style: noneএকটি নির্ণিত মান এর border-width: 0মূলত একই।

ক্যাসকেডিং বিধি এবং উত্তরাধিকার

যেহেতু noneএবং 0বিভিন্ন বৈশিষ্ট্যগুলি ( border-styleএবং border-width) প্রভাবিত করে , তারা আরও আলাদা আচরণ করবে যখন একটি নির্দিষ্ট নির্দিষ্ট নিয়ম কেবল স্টাইল বা মাত্র প্রস্থকে সংজ্ঞায়িত করে। উদাহরণ হিসাবে ক্রিস উত্তর দেখুন ।

লাইভ ডেমো !

এই সমস্ত ঘটনা একক পৃষ্ঠায় দেখতে চান? লাইভ ডেমো খুলুন !

Answer 5

ব্যবহার

border: none;

আইই এর কয়েকটি সংস্করণে কাজ করে না। আইই 9 ঠিক আছে তবে পূর্ববর্তী সংস্করণগুলিতে শৈলীটি "কোনওটিই নয়" এমনকী এটি সীমান্তটি প্রদর্শন করে। আমি প্রিন্ট স্টাইলশিটটি ব্যবহার করার সময় এটি অনুভব করেছি যেখানে আমি ইনপুট বাক্সগুলিতে সীমানা চাইনি।

border: 0;

সমস্ত ব্রাউজারে দুর্দান্ত কাজ করে বলে মনে হচ্ছে।

Answer 6

অলি দ্বারা সরবরাহিত স্পেসিফিকেশন অনুসারে আপনি উভয়ই ব্যবহার করতে পারেন।

আমি সবসময় ব্যবহার করি border:0 none;।

যদিও এগুলি আলাদাভাবে নির্দিষ্ট করে দেওয়ার কোনও ক্ষতি নেই এবং যদি আপনি লিগ্যাসি CSS1 সম্পত্তি কল ব্যবহার করেন তবে কিছু ব্রাউজারগুলি সিএসএসকে দ্রুত পার্স করবে।

যদিও border:0;এটি সাধারণত সীমানা শৈলীতে ডিফল্ট হয়ে যায় none, তবে আমি লক্ষ্য করেছি যে কিছু ব্রাউজার তাদের ডিফল্ট সীমানা শৈলী প্রয়োগ করছে যা অদ্ভুতভাবে ওভাররাইট করতে পারে border:0;।

Comments

"কিছু ব্রাউজারগুলি সিএসএসকে দ্রুত পার্স করবে" - সিএসএস পার্সিংয়ের সময় কোনও পার্থক্য নেই। এবং, সত্যই, CSS পার্সিং সময় 99.99999999999999% ক্ষেত্রে প্রাসঙ্গিক নয়। সিএসএস রেন্ডারিং সময়টি অনেক বেশি গুরুত্বপূর্ণ (এবং এই প্রশ্নের সাথেও সম্পূর্ণ সম্পর্কিত নয়)।

— ডেনিলসন সা মিয়া

কিছু ব্রাউজার? আপনি কি বোঝাতে চেয়েছেন? স্বপ্ন বা অন্য কিছুর মতো লাগে।

— রুটিকাল ভি।

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 প্রস্থের একটি সীমানা অস্তিত্বহীন তাই কোনও স্টাইল থাকবে না have

যাইহোক, যদি পরে আপনার স্টাইলশীটে আপনি এটিকে ওভাররাইড করতে চান, তবে আপনি স্বাভাবিকভাবেই একটি বা অন্যটিকে সম্বোধন করবেন। আমি যদি এখন 3px সীমানা চাইতাম, তবে তা সরাসরি ওভাররাইডিং সীমানা হবে: প্রস্থের ক্ষেত্রে 0। আমি যদি এখন একটি বিন্দুযুক্ত সীমানা চাইতাম তবে তা সরাসরি ওভারাইডিংয়ের সীমানা হবে: স্টাইলিংয়ের ক্ষেত্রে কোনওটিই নয়।

Answer 10

CSS সহ বর্ডার সরিয়ে ফেলার সহজ উপায়

border: 0;

Answer 11

আমরা সীমারেখা 0 ব্যবহার করা উচিত

আমার মতামত এবং অভিজ্ঞতা অনুসারে, আমি বর্ডার ব্যবহার করার পরামর্শ দিচ্ছি: 0; একটি বৈধ এবং খুব ভাল কারণ আছে কারণ যখনই আমরা সীমানা ব্যবহার করি: কিছুই নয়, আমি এটি কাজ করে তা বুঝতে পারি তবে আমরা একটি বর্ডার, 1px, 2px, 3px ইত্যাদির ব্যবহার করছি তা বোঝার অর্থ আমি আমাদের সীমান্তের মান দিচ্ছি ... px / em / rem ঠিক তাই আমাদের সীমানা ব্যবহার করতে হবে: 0; সীমানা মান অপসারণের জন্য কারণ আমরা যখন জানি যে আমরা কখন পটভূমি ব্যবহার করি: কোনটি নয়; এর অর্থ আমরা ব্যাকগ্রাউন্ডটি এমন কিছু ব্যাকগ্রাউন্ড সরিয়ে দিচ্ছি যা এর মান নয় যা অন্য কিছু।

ধন্যবাদ

Answer 12

আমার বক্তব্য,

border:none কাজ করছে তবে ডাব্লু 3 সি স্ট্যান্ডার্ড নয়

আমরা আরও ভাল ব্যবহার করতে পারি border:0;

Comments

সম্পর্কে অবৈধ কিছুই নেই border: none।

— কুইন্টিন