القيمة المستخدمة

القيمة المستخدمة (used value) لإحدى خاصيات CSS هي القيمة النهائية لتلك الخاصية بعد إجراء جميع الحسابات اللازمة.

بعد أن ينتهي المتصفح من إجراء حساباته، فسيكون لكل خاصية لها مُستخدَمة، والقيم المستخدمة للخاصيات المتعلقة بالأبعاد (مثل width أو line-height) ستكون بواحدة البكسل، أما القيم المستخدم للخاصيات المختصرة (مثل background) فستحتوي على قيم الخاصيات الفرعية (مثل background-color).

تفاصيل عن القيمة المستخدمة

هنالك أربع خطوات لحساب القيمة النهاية لخاصيات CSS، فأول خطوة تتضمن الحصول على القيمة المُحدَّدة التي تأتي من أعلى قاعدة تحديدًا؛ ومن ثم عبر الوراثة باستخدام القيمة المحسوبة للعنصر الأب إن كانت الخاصية قابلة للوراثة، أو استخدام القيمة الافتراضية؛ ثم ستُحدَّد القيمة المحسوبة وفقًا للمواصفة (فمثلًا، إذا كان لدينا العنصر <span> الذي له القيمة absolute للخاصية position، فستتحول فيه القيمة المحسوبة للخاصية display تلقائيًا إلى block)؛ ثم ستحسب الأبعاد وستُستبدَل القيمة auto أو النسب المئوية بقيم طولية بواحدة البكسل، والنتيجة النهائية تسمى «القيمة المستخدمة».

وفي النهاية، ستحوّل القيمة المستخدمة نتيجة المحدوديات في البيئة التي تُعرَض فيها الصفحة، مما يؤدي إلى إنشاء قيمة فعلية، والقيمة الفعلية هي القيمة المستخدمة لكن بعد إجراء أيّة عمليات تقريب لازمة، فمثلًا قد لا يعرض المتصفح الإطارات border إلا إذا كانت سماكتها تكافئ رقمًا صحيحًا بواحدة البكسل، لذا قد تُقرِّب تلك السماكة إلى أقرب عدد صحيح قبل تطبيقها؛ أو كان المتصفح لا يستعمل إلا تدرجات الرمادي، ولا يقبل أيّة ألوان أخرى.

أمثلة

لاحظ قيمة الخاصية width المستخدمة في المثال الآتي، لاحظ أنَّ الأبعاد ستتغير عند إعادة تحجيم النافذة:

<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

شيفرة CSS:

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

div {
  border: 1px solid red;
  padding: 8px;
}

شيفرة JavaScript:

function updateUsedWidth(id) {
  var div = document.getElementById(id);
  var par = document.querySelector(`#${id} .show-used-width`);
  var wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener('resize', updateAllUsedWidths);

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

• مواصفة ‎CSS Level 2 (Revision 1)‎.