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

في السابق، كانت عملية تحريك العناصر إلى أحجام ديناميكية مثل block-size: auto أو inline-size: max-content تتطلّب استخدام JavaScript أو حيل "max-height" غير فعّالة. تسمح السمة interpolate-size والدالة calc-size() للمتصفّح بالاستكمال الداخلي بين الأطوال الثابتة والكلمات الرئيسية للحجم الجوهري.

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

1. الموافقة على نوع استكمال الكلمات الرئيسية: يمكنك تطبيق interpolate-size: allow-keywords على عنصر رئيسي (عادةً :root) لتفعيل الانتقالات للسمات التي تستخدم كلمات رئيسية جوهرية.
2. تحديد الانتقال: اضبط transition لسمة تغيير الحجم (مثل block-size وinline-size) على العنصر المستهدَف.
3. استخدام الكلمات الرئيسية الجوهرية: يمكنك تغيير سمة تغيير الحجم إلى كلمة رئيسية جوهرية متوافقة، مثل auto أو min-content أو max-content أو fit-content أو (بالنسبة إلى flex-basis) content، أثناء التفاعل (مثل :hover أو فئة الحالة).
4. إجراء العمليات الحسابية (اختياري): استخدِم calc-size() إذا كنت بحاجة إلى إجراء عمليات حسابية على حجم أساسي (مثل auto + 2rem). تتيح calc-size() أيضًا استخدام الكلمة الرئيسية any لإجراء العمليات الحسابية التي لا تعتمد على الأساس.

مثال: نمط التوسيع العام

يمكنك تطبيق هذا النمط على أي حاوية (مثل قسم "عرض المزيد" أو قائمة تنقّل) للانتقال بين ارتفاع محدود والحجم الطبيعي للعنصر.

/* Opt-in globally for all children */
:root {
  /* MANDATORY: Transitions to intrinsic keywords are disabled by default for compatibility */
  interpolate-size: allow-keywords;
}

.expandable-container {
  /* 1. Define a fixed initial size (or 0) and hide overflow */
  block-size: 100px;
  overflow: hidden;
  
  /* 2. Transition the sizing property */
  transition: block-size 0.4s ease-out;
}

.expandable-container.is-expanded {
  /* 3. Smoothly animate to the intrinsic natural height */
  block-size: auto;
}

مثال: الحجم المضمّن الجوهري المحسوب

.badge {
  inline-size: 40px;
  overflow: hidden;
  white-space: nowrap;
  transition: inline-size 0.3s ease;
}

.badge:hover {
  /* calc-size(basis, calculation) */
  /* 'size' refers to the evaluated basis (max-content in this case) */
  inline-size: calc-size(max-content, size + 20px);
}

مثال: الانتقال من الحجم الجوهري إلى الحجم الثابت

يمكنك أيضًا إنشاء حركة في الاتجاه المعاكس، بدءًا من الحجم الطبيعي ثم تصغيره إلى طول معيّن. هذا مفيد للمكوّنات "القابلة للإغلاق".

.collapsible-alert {
  /* 1. Start with the natural content height */
  block-size: auto;
  overflow: hidden;
  transition: block-size 0.5s ease-in-out, opacity 0.5s ease;
}

.collapsible-alert.is-dismissed {
  /* 2. Smoothly collapse to zero */
  block-size: 0;
  opacity: 0;
  pointer-events: none;
}

/* MANDATORY Copy-Paste Safety: Disable sizing animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
  .expandable-container,
  .badge,
  .collapsible-alert {
    transition: none !important;
  }
}

// MANDATORY Accessibility Synchronization: Ensure elements collapsed to zero dimensions are removed from the assistive technology tree, and sync aria-expanded states on triggers.
const alertElement = document.querySelector('.collapsible-alert');
alertElement.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'block-size' && alertElement.classList.contains('is-dismissed')) {
    alertElement.hidden = true;
  }
});

// Example trigger syncer
const triggerBtn = document.querySelector('.accordion-trigger');
triggerBtn?.addEventListener('click', () => {
  const isExpanded = triggerBtn.getAttribute('aria-expanded') === 'true';
  triggerBtn.setAttribute('aria-expanded', !isExpanded);
});

القيود الرئيسية

• القيود المفروضة على الانتقال بين الكلمات الرئيسية: لا يمكنك إنشاء تأثيرات حركية بين كلمتَين رئيسيتَين مختلفتَين مباشرةً (مثلاً، من min-content إلى max-content). يجب أن يكون أحد طرفَي الانتقال طولاً أو نسبة مئوية ثابتة (مثلاً، من 0 إلى auto).
• بنية Calc-size: داخل calc-size()، لا يمكنك الجمع بين كلمات رئيسية جوهرية مختلفة في التعبير نفسه. تحدّد الوسيطة الأولى (الأساس) ما يمثّله size.
• متطلبات الموافقة: يتم إيقاف عمليات الانتقال إلى الكلمات الرئيسية الأساسية تلقائيًا (numeric-only) للحفاظ على التوافق مع الأنظمة القديمة. يجب تطبيق interpolate-size: allow-keywords على العنصر أو عنصر رئيسي. تعمل السمة calc-size() كإلغاء لكل سمة، ما يؤدي إلى تفعيل الاستكمال تلقائيًا عند استخدامها.

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

‫interpolate-size وcalc-size() هما تحسينان تدريجيان. أما المتصفحات التي لا تتيحها، فستنتقل فورًا إلى الحجم المستهدف.

• التكيّف مع الإصدارات الأقدم: بالنسبة إلى انتقالات block-size: auto البسيطة، ستعمل المتصفّحات العادية على تبديل الحجم على الفور، وهو أمر عملي ولكنّه أقل دقة.
• الكلمات الرئيسية الاحتياطية اليدوية: عند استخدام calc-size()، يجب دائمًا تقديم كلمة رئيسية احتياطية عادية للمتصفّحات القديمة، لأنّها ستتجاهل بيان calc-size() بالكامل.

.card {
  block-size: auto; /* Fallback for older browsers */
  block-size: calc-size(auto, size); /* Modern browsers use this */
  transition: block-size 0.3s ease;
}