يبدأ إنشاء تنسيق CSS جميل بتخصيص أحجام لجميع العناصر التي يتم وضعها في تطبيق ويب. لطالما كانت إمكانية تحديد المقاسات باستخدام مزيج من وحدات القياس من الميزات المطلوبة بشدة. على سبيل المثال، من الجيد أن تتمكّن من حجز% 50 من مساحة بالإضافة إلى مقدار ثابت من المساحة، مثل 10 بكسل. يمكنك إجراء ذلك الآن باستخدام السمة calc(). يمكنك استخدام هذه الميزة في أي مكان يتم فيه استخدام طول أو رقم، حتى تتمكّن من استخدامها لتحديد موضع العناصر، أو في قيم ألوان rgb() أيضًا، لذا فهي تملك الكثير من الاستخدامات الرائعة في جدول الأنماط.
ما هي الإجراءات التي يمكنك اتّخاذها باستخدام calc()؟
يمكن استخدام السمة calc() في أي مكان يتوفّر فيه طول أو رقم CSS في ملف الأنماط.
تمنحك هذه الطريقة ميزتَين رئيسيتين لجعل التنسيق أكثر مرونة:
- خلط النِسب المئوية والقيم المطلقة
- استخدام وحدات مختلفة لتحديد المقاس
خلط النِسب المئوية مع الوحدات المطلقة
لنلقِ نظرة على مثال على خلط النسب المئوية بالوحدات المطلقة. لنفترض أنّنا نريد تخصيص% 50 من المساحة المتوفّرة مطروحًا منها عدد ثابت من وحدات البكسل، ويمكننا كتابتها على النحو التالي:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
إذا كان لون الخلفية أخضر، سيظهر على النحو التالي:
وإذا قلّصت حجم العنصر الرئيسي، سيظهر على النحو التالي:
من الجيد أنّنا نعرف دائمًا أنّ الحافة اليمنى للمحتوى ستكون على بُعد 100 بكسل إلى يمين منتصف المنطقة التي يحتويها. من خلال الجمع بين أنواع القيم المختلفة بهذه الطريقة، يمكن لتطبيق الويب التعامل مع التنسيق على الأجهزة ذات الأحجام المختلفة مع التحكّم بشكل أكبر بكثير من ذي قبل.
وحدات الخلط
من المزايا الرائعة الأخرى إمكانية دمج وحدات بقياسات مختلفة للحصول على مقاس محدّد. على سبيل المثال، يمكنك ضبط الأحجام نسبةً إلى حجم الخط الحالي من خلال خلط وحدتَي em وpx.
#bar {
height: calc(10em + 3px);
}
يمكنك العثور على بعض الأمثلة الرائعة على دمج القيم هنا وهنا.
جرّبه الآن
باستخدام calc()، يمكنك استخدام + و- و* و / لإضافة القيم وطرحها وضربها وتقسيمها، ما يتيح لك كل أنواع الاحتمالات. يمكنك استخدام calc() في أي مكان يمكن فيه استخدام طول أو رقم CSS. نعمل أيضًا على إضافة calc() لخصائص الزاوية ومعدّل التكرار قريبًا. تتوفّر السمة calc() للاطّلاع على الطول في الإصدار 19 من Chrome (إصدار قناة المطوّرين) باستخدام السمة -webkit-calc، وفي Firefox منذ الإصدار 8 باستخدام السمة -moz-calc، وفي Internet Explorer منذ الإصدار 9 بدون إضافة بادئة. يُرجى مشاركة رأيك في التعليقات أدناه.