كنت عارف ان الـCSS فيها Functions جاهزة؟ أه والله انت عندك حاجات زي الـlinear-gradient والـradial، والـFunction اللي هنتكلم عنها النهاردة ألا وهي الـCALC!
الـCALC من الـFunctions اللي اوعدك لما تفهمها مش هتبطل تستخدمها، وده لأنها بتسهل عليك حاجات كتير، وخليني أعرضلك مشكلة مثلًا ونفكر في حلولها سوا
دلوقتي انت عاوز تعمل عنصر واخد عرض الشاشة كله ما عدا 15px على سبيل المثال، ولكن المشكلة هنا انك ماتعرفش عرض الشاشة كام، ولا تقدر تعرف كل أبعاد الشاشات اللي هتتعامل معاها فـ تستخدمها حتى في Media Queries زي ما اتكلمنا امبارح، حرفيًا الحلول قدامك قليلة جدًا (في حلول بالمناسبة ولكن خلينا في موضوعنا)
ومن هنا نلاقي الـCalc ظهرت وحلتلنا المشاكل دي كلها! لأنها ببساطة بتقدر تعمل عمليات حسابية على وحدات حسابية مختلفة، زي الـvw او الـvh، الـ% والـpx والـem والـrem وحتى أي رقم حقيقي بينتمي للمجموعة (ح)، فـ حرفيًا انت معندكش حدود هنا
كمان الـCalc بتقدر تعمل عمليات جمع وطرح وضرب وقسمة، بس خد بالك لو هتعمل عمليات جمع أو طرح لازم الـOperator (علامة الجمع أو الطرح) تبقى قبلها وبعدها مسافة فاضية أو Space، يعني ماينفعش مثلًا تكتب كدة
calc(100vw-15px)
مش هيشتغل والـHTML Parser هيديك Error، لأنه هيتعامل معاها كـNegative Number (عدد سلبي) مش كعلامة طرح، فـ جي نصيحة خد بالك منها
وبس كدة، ده كان الموضوع ببساطة
معلش بتأخر عليكم الأيام دي لظروف صحية، لو وصلت لهنا متنساش تدعيلي بالشفاء، وهتلاقي في أول كومنت رابط بيتكلم عن الـCalc Function وتجربة عملية للكود اللي في الصورة، سلام.
الجينيص
CSS Notes
الجينيص