الفرق بين المراجعتين لصفحة: «CSS/unset»

من موسوعة حسوب
< CSS
لا ملخص تعديل
ط تعديل التصنيفات
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 6: سطر 6:


شيفرة HTML:<syntaxhighlight lang="html">
شيفرة HTML:<syntaxhighlight lang="html">
<p>This text is red.</p>
<p>هذا النص أحمر</p>
<div class="foo">
<div class="foo">
   <p>This text is also red.</p>
   <p>هذا النص هو أيضا أحمر</p>
</div>
</div>
<div class="bar">
<div class="bar">
   <p>This text is green (default inherited value).</p>
   <p>هذا النص باللون الأخضر (القيمة الموروثة الافتراضية)</p>
</div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 30: سطر 30:


شيفرة HTML:<syntaxhighlight lang="html">
شيفرة HTML:<syntaxhighlight lang="html">
<p>This text has a red border.</p>
<p>هذا النص له حد أحمر</p>
<div>
<div>
   <p>This text has a red border.</p>
   <p>هذا النص له حد أحمر</p>
</div>
</div>
<div class="bar">
<div class="bar">
   <p>This text has has a black border (initial default, not inherited).</p>
   <p>يحتوي هذا النص على حد أسود (افتراضي مبدئي ، غير موروث)</p>
</div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 77: سطر 77:
*مواصفة [https://drafts.csswg.org/css-cascade-3/#inherit-initial CSS Cascading and Inheritance Level 3].
*مواصفة [https://drafts.csswg.org/css-cascade-3/#inherit-initial CSS Cascading and Inheritance Level 3].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Miscellaneous|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 11:00، 19 مارس 2019

الكلمة المحجوزة unset في CSS تُعيد ضبط قيمة الخاصية إلى قيمتها المورثة إن ورثت القيمة من العنصر الأب، أو إلى قيمتها الابتدائية إن لم ترثها؛ بصياغة أخرى، ستسلك هذه الكلمة المحجوزة سلوك inherit في الحالة الأولى، وسلوك initial في الحالة الثانية، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة.

أمثلة

إعادة ضبط قيمة الخاصية color للعنصر <p> الموجود داخل العنصر <div> ذو الصنف bar إلى قيمتها الموروثة، ألا وهي green؛ أي كأننا ضبطنا قيمة الخاصية color إلى الكلمة المحجوزة inherit، لاحظ أنَّ الخاصية color قابلة للوراثة.

شيفرة HTML:

<p>هذا النص أحمر</p>
<div class="foo">
  <p>هذا النص هو أيضا أحمر</p>
</div>
<div class="bar">
  <p>هذا النص باللون الأخضر (القيمة الموروثة الافتراضية)</p>
</div>

شيفرة CSS:

.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

المثال الآتي يُشبه المثال السابق، لكن مع استخدام الخاصية border، إذ إنَّ الكلمة المحجوزة unset ستكافئ initial لأن الخاصية border هي خاصية غير قابلة للوراثة. شيفرة HTML:

<p>هذا النص له حد أحمر</p>
<div>
  <p>هذا النص له حد أحمر</p>
</div>
<div class="bar">
  <p>يحتوي هذا النص على حد أسود (افتراضي مبدئي ، غير موروث)</p>
</div>

شيفرة CSS:

div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 41 27 غير مدعومة 28 9.1

صحيحٌ أنَّ هذه القيمة غير مدعومة في IE، لكنها مدعومة في Edge.

انظر أيضًا[عدل | عدل المصدر]

  • صفحة الكلمة المحجوزة inherit التي تؤدي إلى جعل العنصر يأخذ القيمة المحسوبة لهذه الخاصية من العنصر الأب، ويمكن تطبيق هذه القيمة على جميع خاصيات CSS بما في ذلك خاصيةall المختصرة.
  • صفحة الكلمة المحجوزة initial التي تُطبِّق القيمة الابتدائية للخاصية على العنصر، ويمكن استخدام على جميع خاصيات CSS، بما في ذلك خاصية all المختصرة.

مصادر ومواصفات