الحساب باستخدام الأحجام الجوهرية

‫calc-size() هي دالة CSS لإجراء عمليات حسابية على كلمات رئيسية للحجم الجوهري، مثل auto وmin-content وfit-content. MANDATORY: Use calc-size() only when you need to modify an intrinsic size with a calculation or constraint; for simple keyword-based animations (e.g., 0 to auto), you must use interpolate-size: allow-keywords.

خطوات التنفيذ

1. تحديد الأساس الجوهري: حدِّد الكلمة الرئيسية الجوهرية (auto أو min-content أو غير ذلك) التي يجب أن تشكّل أساس حسابك.
2. تحديد القيود: استخدِم الدوال الرياضية في CSS، مثل clamp() أو min() أو max() ضمن الوسيطة الثانية لفرض قيود التصميم على الحجم الأساسي.
3. إلزامي: توفير خيار احتياطي: يجب دائمًا تحديد كلمة رئيسية أو طول معياري للحجم قبل السمة مباشرةً باستخدام calc-size() لضمان بقاء التنسيق صالحًا للاستخدام في المتصفّحات غير المتوافقة.
4. تطبيق السمات المنطقية: يمكنك استخدام السمات المنطقية تلقائيًا، مثل inline-size أو block-size، لضمان توافق العمليات الحسابية مع وضع الكتابة في المستند.
5. اختياري: التحسين التدريجي: يمكنك تضمين منطق التنسيق المعقّد أو الصور المتحركة في كتلة @supports (inline-size: calc-size(auto, size + 0px)) لتقديم ميزات متقدّمة للمتصفّحات المتوافقة فقط.

البنية الأساسية

/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: min-content;
  
  /* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
  inline-size: calc-size(min-content, size + 2rem);
}

الوسيطات الصالحة لأساس حساب عدد الأيام (<calc-size-basis>)

تحدّد الوسيطة الأولى الحجم "الأساسي" للعملية الحسابية.

الكلمات الرئيسية العادية:

• ‫auto: الحجم التلقائي للعنصر
• ‫min-content: أصغر حجم يمكن أن يتخذه العنصر بدون تجاوز الحدّ الأقصى
• ‫max-content: الحجم الذي يتطلّبه العنصر ليتناسب مع كل المحتوى في سطر واحد
• ‫fit-content: يعادل clamp(min-content, auto, max-content).
• ‫content: تكون صالحة فقط عند استخدام calc-size() ضمن السمة flex-basis.

الوسيطات الخاصة:

• ‫any: أساس عام يُستخدم عندما يكون النوع الجوهري المحدّد غير معروف أو عند إجراء عمليات حسابية متداخلة.
• دالة calc-size() متداخلة: تتيح إجراء عمليات حسابية متعددة الخطوات أو مشروطة.
• ‫<calc-sum>: طول أو نسبة مئوية أو تعبير رياضي محدّد (مثل 100px أو 20%). عند استخدام قيمة ثابتة كأساس، تظل الكلمة الرئيسية size متاحة (ولكن فقط ضمن الوسيطة الثانية) وتمثّل القيمة التي تم حلّها لهذا الأساس.

إلزامي: الكلمة الرئيسية size غير صالحة ضمن الوسيطة الأولى (<calc-size-basis>) نفسها. وهو متغيّر محلي لا يتوفّر إلا للإشارة إلى الأساس من داخل الوسيطة الثانية (<calc-sum>).

وسيطات الحساب الصالحة (<calc-sum>)

الوسيطة الثانية هي التعبير الحسابي.

• ويستخدم عادةً الكلمة الرئيسية size للإشارة إلى قيمة الأساس.
• على الرغم من أنّ الكلمة الرئيسية size اختيارية من الناحية الفنية، فإنّ حذفها يعني أنّ العملية الحسابية ستؤدي إلى قيمة ثابتة، مع تجاهل الأساس بالكامل.
• ويمكن أن تتضمّن عوامل تشغيل حسابية عادية (+ و- و* و/).
• ويمكن أن تتضمّن دوال CSS الرياضية، مثل clamp() وmin() وmax() وround().
• MANDATORY: calc-size() only allows a single intrinsic size value (the basis) in each calculation. لا يمكنك الجمع بين الكلمات الرئيسية للحجم الجوهري في طلب calc-size() نفسه.

حالات الاستخدام

إضافة تأثيرات متحركة من الأحجام الجوهرية وإليها

By default, browsers cannot interpolate between a length (e.g., 0px) and an intrinsic keyword (e.g., auto). Wrapping the keyword in calc-size() makes it an interpolatable value.

اختيار الأداة المناسبة للصور المتحركة

• إلزامي: استخدام interpolate-size: allow-keywords: للصور المتحركة البسيطة من الأحجام الأساسية أو إليها (مثل height: 0 إلى height: auto) بدون أي تعديلات رياضية. هذا هو النهج المطلوب لإدراج الكلمات الرئيسية البسيطة، ويجب تطبيقه بشكل عام من خلال :root.

  :root {
    /* Best practice: Enable keyword interpolation globally */
    interpolate-size: allow-keywords;
  }
  
  .item {
    height: 0;
    transition: height 0.3s ease;
  }
  
  .item.open {
    /* Simple interpolation from 0 to auto now works without calc-size() */
    height: auto;
  }
  

• استخدِم calc-size(): فقط عندما تحتاج إلى إجراء عمليات حسابية على حجم جوهري أثناء عملية انتقال (مثل إضافة مساحة متروكة أو تثبيت الحجم).

.accordion-content {
  display: block;
  overflow: hidden;
  /* MANDATORY: Fallback value for closed state */
  block-size: 0;
  transition: block-size 0.3s ease-out;
}

.accordion-content.open {
  /* MANDATORY: Fallback value for open state */
  block-size: auto;

  /* 
    DO: Use calc-size(auto, ...) to enable animation from 0 to the element's 
    intrinsic size while doing a calculation (in this case, adding a space of 2rem).
  */
  block-size: calc-size(auto, size + 2rem);
}

إلزامي: لا يمكن إجراء الاستكمال بين كلمتَين رئيسيتَين للحجم الجوهري مباشرةً. يجب أن يكون أحد طرفَي الانتقال طولاً أو نسبة مئوية.

احترام الإعدادات المفضّلة للمستخدمين في ما يتعلّق بالحركة

يمكن أن تكون الرسوم المتحركة التي تغيّر حجم مناطق التنسيق الكبيرة مزعجة بشكل خاص للمستخدمين الذين يعانون من اضطرابات دهليزية. إلزامي: يجب دائمًا احترام تفضيلات الحركة لدى المستخدم من خلال استخدام الاستعلام عن الوسائط prefers-reduced-motion لتبسيط الصور المتحركة غير الأساسية أو تقليلها. تشمل الاستراتيجيات الشائعة إيقاف الحركة بالكامل أو تقليل مدتها أو استبدال تغييرات التنسيق بانتقالات دقيقة في مستوى الشفافية.

.accordion-content {
  opacity: 0;
  transition: block-size 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    /* 
       EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
       Setting the block-size instantly and transitioning opacity 
       provides a clear state change without large-scale motion.
    */
    transition: opacity 1.5s ease;
  }

  .accordion-content.open {
    /* Jump the size instantly */
    block-size: auto;
  }
}

تطبيق القيود على الأحجام الأساسية

يمكنك استخدام calc-size() مع أي دالة رياضية في CSS، مثل min() أو max() أو clamp() أو round()، لضمان بقاء الحجم الأساسي للعنصر ضمن حدود التصميم.

.dynamic-container {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: fit-content;

  /* 
    DO: Establish a dynamic size based on content, while:
    1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
    2. Modifying the intrinsic size with fixed or relative offsets
  */
  inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}

اعتبارات مهمة

• أخطاء النسب المئوية: يتم حلّ النسب المئوية داخل <calc-sum> وفقًا لحجم الحاوية، وليس الكلمة الرئيسية size. على سبيل المثال، تضيف السمة calc-size(auto, size + 10%) نسبة% 10 من عرض العنصر الرئيسي إلى عرض auto العنصر، ما قد يؤدي إلى نتائج غير متوقعة أو تجاوزات.
• متطلبات العمليات الحسابية: إلزامية: يجب استخدام interpolate-size: allow-keywords بدلاً من calc-size() للصور المتحركة البسيطة (مثل 0 إلى auto). يجب استخدام calc-size() فقط عندما يتطلّب التنسيق تعديلات رياضية ديناميكية على القاعدة الأساسية.
• ملاحظة حول الأداء: تؤدي إضافة تأثيرات حركية إلى خصائص نموذج الصندوق، مثل inline-size أو block-size، إلى إعادة احتساب التنسيق، ما قد يكون مكلفًا. استخدِم حركات calc-size() بشكل أساسي للعناصر المهمة في التنسيق عندما تكون البدائل غير المتعلقة بالتنسيق غير كافية.

استراتيجيات احتياطية

calc-size() وinterpolate-size هما تحسينان تدريجيان. في المتصفّحات التي لا تتيح استخدام هذه السمات، سيتم تجاهلها وسيظل التنسيق يعمل، ولكنّ الصور المتحركة التي تستخدم الكلمات الرئيسية الجوهرية ستنتقل بشكل مفاجئ بدلاً من الانتقال بسلاسة. يُرجى دائمًا تقديم كلمة رئيسية أو طول عادي كخيار احتياطي.

.element {
  /* Fallback for browsers that don't support calc-size() */
  inline-size: fit-content; 
  /* Modern browsers will override the fallback */
  inline-size: calc-size(fit-content, size + 2rem);
}

الصور المتحركة والانتقالات الاحتياطية

في المتصفّحات التي لا تتيح استخدام calc-size() أو interpolate-size، لن تنجح عمليات الاستكمال في الانتقالات التي تتضمّن كلمات رئيسية للحجم الجوهري.

• التكيّف مع الإصدارات الأقدم: الإجراء الاحتياطي التلقائي هو "الانتقال الفوري" بين الحالات (مثلاً، من 0 إلى auto)، وهو إجراء مقبول في كثير من الأحيان لأنّ التنسيق يظلّ يعمل بشكل صحيح.
• تجربة محسّنة: استخدِم @supports لتطبيق منطق تنسيق معقّد أو نمط إضافي لا يكون منطقيًا إلا عندما تكون الصور المتحركة الذاتية السلسة ممكنة.
• تجنُّب القياسات المستندة إلى JavaScript: على الرغم من أنّه يمكنك استخدام JavaScript لقياس العناصر وتحريك أبعادها يدويًا، فإنّ ذلك غالبًا ما يكون غير ضروري ويمكن أن يؤدي إلى تكرار إعادة تحميل التنسيق. يُعدّ الاعتماد على ميزة "الانتقال الفوري" الأصلية هو الحلّ البديل المقترَح لتطبيقات الويب الحديثة.

بالنسبة إلى الصور المتحركة، ستكون التجربة الاحتياطية هي الانتقال الفوري إلى الحجم النهائي. لرصد إتاحة الميزة في CSS أو JavaScript:

/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
  .element {
    /* Apply advanced logic only when supported */
  }
}

/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
  // Apply advanced sizing or animations
}