প্রাথমিক এবং আনসেট মানগুলির মধ্যে পার্থক্য কী?

Question

একটি সহজ উদাহরণ:

এইচটিএমএল

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

সিএসএস

em {
    color:initial;
    color:unset;
}

মধ্যে পার্থক্য কি initialএবং unset? শুধুমাত্র ব্রাউজারগুলিকে সমর্থন করে

CanIUse: সিএসএস আনসেট মান

বিকাশকারী মজিলা ওয়েব সিএসএস প্রাথমিক

Answer 1

আপনার লিঙ্ক অনুযায়ী :

unset একটি সিএসএস মান হ'ল সম্পত্তি হিসাবে উত্তরাধিকার সূত্রে প্রাপ্ত হলে "উত্তরাধিকারী" বা সম্পত্তি হিসাবে উত্তরাধিকারসূত্রে না থাকলে "প্রাথমিক" সমান

এখানে একটি উদাহরণ:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}

<pre>
  <span>This text is red because it is inherited.</span>
  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>
  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>
</pre>

আপনি যদি আপনার স্টাইলশিটে কিছু সিএসএস ওভাররাইড করার চেষ্টা করছেন তবে পার্থক্যটি এমন একটি দৃশ্য, তবে আপনি পছন্দ করবেন ব্রাউজারের ডিফল্টটিতে সেট না করে মান উত্তরাধিকার সূত্রে প্রাপ্ত হয়।

এই ক্ষেত্রে:

pre {
  color: #00f;
}
span {
  color: #f00;
}
.unset {
  color: unset;
}
.initial {
  color: initial;
}

<pre>
  <em>Text in this 'pre' element is blue.</em>
  <span>The span elements are red, but we want to override this.</span>
  <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span>
  <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span>
</pre>

Answer 2

আমি ভবিষ্যতের রেফারেন্সের জন্য অফিসিয়াল সিএসএস | এমডিএন ডকুমেন্টেশনগুলির উদ্ধৃতি দিতে চাই যখন প্রত্যেকের মধ্যে পার্থক্যগুলি অনুসন্ধান করে:

আদি

প্রাথমিক সিএসএস কীওয়ার্ড কোনও উপাদানের প্রাথমিক সম্পত্তির প্রাথমিক মান প্রয়োগ করে। এটি প্রতিটি সিএসএস সম্পত্তিতে অনুমোদিত এবং উপাদানটির প্রাথমিক কারণটি ব্যবহার করার জন্য নির্দিষ্ট করা উপাদানটির কারণ হয়।

সুতরাং আপনার উদাহরণ অনুসারে:

em {
    color:initial;
    /* color:unset; */
}

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

উল্লেখ্য কিভাবে প্রারম্ভিক সম্পত্তি বজায় প্রাথমিকcolor উপাদান সম্পত্তি।

ইউএনএসইটি

আনসেট করা সিএসএস কীওয়ার্ডটি প্রাথমিক এবং উত্তরাধিকারী কীওয়ার্ডগুলির সংমিশ্রণ। এই দুটি সিএসএস-প্রশস্ত কীওয়ার্ডের মতো এটি সিএসএস শর্টহ্যান্ড সহ যে কোনও সিএসএস সম্পত্তিতে প্রয়োগ করা যেতে পারে। এই কীওয়ার্ডটি সম্পত্তিটি তার উত্তরাধিকার সূত্রে প্রাপ্ত মান অনুসারে পুনরায় সেট করে যদি এটি তার পিতা-মাতার কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয় বা যদি না হয় তবে তার প্রাথমিক মানকে। অন্য কথায়, এটি প্রথম ক্ষেত্রে উত্তরাধিকারী কীওয়ার্ড এবং দ্বিতীয় ক্ষেত্রে প্রাথমিক কীওয়ার্ডের মতো আচরণ করে।

সুতরাং আপনার উদাহরণ অনুসারে:

em {
  /* color:initial; */
  color:unset;
}

<p style="color:red!important"> 
  this text is red 
  <em> 
    this text's color has been unset (e.g. red)
  </em>
  this is red again
</p>

উল্লেখ্য কিভাবে সেট না সম্পত্তি কেবল রিসেটcolor উপাদান সম্পত্তি।

উপসংহারে

ধারণাটি পুরোপুরি সরাসরি, তবে বাস্তবে আমি উভয় সিএসএস বৈশিষ্ট্যের জন্য ক্রস ব্রাউজারের সামঞ্জস্যতার সাথে ডিল করার সময় সাবধানতার পরামর্শ দেব ... এটি আজকের মতো।