إدريس الدويري 
التحريك إلى ارتفاع auto في CSS لم يكن أسهل من الان، وتطلب استخدام خدع معقدة لتحقيق ذلك. ولكن، مع ظهور هذه الميزات الجديدة interpolate-size و calc-size() ، يمكننا أخيرًا تحقيق انتقال سلس إلى أي قيمة حجمية متأصلة (auto، fit-content، max-content، min-content).
لماذا قد تريد الانتقال إلى ارتفاع auto؟
افترض أنك تعمل على تخطيط للأكورديون في قسم الأسئلة الشائعة، بالتأكيد لا تريد أن يظهر المحتوى ويختفي فجأة، أليس كذلك؟
إضافة انتقال لطيف يمكن أن يحسن تجربة المستخدم ويوفر ردود فعل حول المحتوى الذي يتم الكشف عنه والمحتوى الذي يتم إخفاؤه.
يبدو الأمر سهلاً، أعلم، حتى تحاول القيام به بنفسك وتتفاجأ عندما تعلم أنه لا يمكنك تحريك الارتفاع من 0 إلى auto. بالطبع، هناك خدع أخرى لحل هذه المشكلة مثل تحريك max-height أو flex-grow بدلاً من ذلك، وهي ليست مرنة جدًا في معظم الحالات.
لحسن الحظ، تحل CSS الحديثة هذه المشكلة من خلال السماح لنا بتحريك خصائص الارتفاع والعرض إلى أي قيمة متأصلة مثل auto أو fit-content.
ما هو القياس المتأصل في CSS؟
في CSS، الحجم المتأصل للعنصر هو الحجم الذي يتم تحديده طبيعيًا بناءً على محتواه، وهو عكس القياس الخارجي حيث يتم تحديد الحجم صراحةً من خلال خصائص نموذج الصندوق مثل العرض، والارتفاع، والحشو، والحدود.
الاعتماد على القياس المتأصل يجعل المكونات أكثر استجابة وقابلة لإعادة الاستخدام مع تنسيقات محتوى مختلفة، حيث أننا لا نعرف دائمًا العرض أو الارتفاع الدقيق (الارتفاع في الغالب) للعنصر.
استخدام خاصية interpolate-size
دعم المتصفحات:
تتحكم خاصية interpolate-size في التداخل بين القيم المتأصلة وقيم الطول. والتي هي بشكل افتراضي تقتصر على القيم العددية فقط، مما لا يسمح بأي انتقالات.
هذه الخاصية غير متوفرة على نطاق واسع حاليًا، فقط متصفحات قائمة على Chrome تدعمها، لذا يمكن استخدامها كتحسين تدريجي، مما يعني أن المتصفحات التي لا تدعمها ستعود إلى الوضع الافتراضي دون أي انتقال دون كسر الصفحة.
من خلال تعيين خاصية interpolate-size إلى allow-keywords، فإنك تسمح بالانتقال بين قيم <length-percentage> وقيم الكلمات المفتاحية مثل auto.
يمكن وراثة خاصية interpolate-size. لذا من المستحسن تعيينها مرة واحدة في الجذر الخاص بالوثيقة وعدم القلق بشأنها لاحقا.
:root {
interpolate-size: allow-keywords;
}interpolate-size إلى allow-keywords في جذر الوثيقة، يمكن للأكواد مثل هذه العمل كما هو متوقع:
.box {
height: 0;
transition: height 300ms;
}
.box.open {
height: auto;
}استخدام calc-size()
دعم المتصفحات:
دالة calc-size() هي خيار قوي آخر للتحريك من أو إلى الأحجام المتأصلة. إنها تسمح لك بإجراء حسابات على قيم الحجم المتأصل.
عند استخدام calc-size()، لا حاجة لتعيين interpolate-size: allow-keywords حتى تعمل الانتقالات، حيث يمكن تحريك القيمة المعادة.
صيغة الدالة
دالة calc-size() تقبل معطيين:
calc-size(<calc-size-basis>, <calc-sum>)- calc-size-basis: قيمة حجم متأصلة مثل auto أو fit-content، أو
calc-size()متداخلة. - calc-sum: الحساب الذي يتم إجراؤه على المعطى الأول. يمكنك الإشارة إلى calc-size-basis باستخدام كلمة الحجم.
أمثلة
width: calc-size(fit-content, size); /* مرر القيمة بدون حساب */
height: calc-size(auto, size / 2 ); /* نصف ارتفاع العنصر */calc-size أو interpolate-size للتحريك بين الأحجام المتأصلة؟
الآن بعد أن أصبح لدينا طريقتان للتحريك إلى أو من الأحجام المتأصلة، أيهما يجب أن نستخدم؟
استخدم interpolate-size: allow-keywords دائمًا. واستخدم calc-size() فقط عندما تريد إجراء حسابات إضافية.
الخلاصة
كما رأينا، تقدم CSS الحديثة طريقتين جديدتين للتعامل مع هذه المشكلة الشائعة في تحريك الأحجام المتأصلة. interpolate-size و calc-size، واحدة بسيطة والأخرى قوية.
