يبدأ إنشاء تخطيط 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() للأطوال في Chrome 19 (إصدار قناة مطوّري البرامج) من خلال استخدام السمة -webkit-calc، وفي متصفّح Firefox بدءًا من الإصدار 8 باستخدام السمة -moz-calc وفي Internet Explorer، لأنّ الإصدار 9 غير مُستهل. يُرجى إطلاعنا على رأيك من خلال إضافة تعليق أدناه.