CSSاستفاده از توابع ریاضی در
استفاده از توابع ریاضی در css به ما کمک می کند که در تنظیمات ظاهری وبسایت یکسری عملیات ریاضی را به راحتی و تنها با فراخوانی توابع آن ها انجام دهیم تا بتوانیم تنظیماتی داینامیک داشته باشیم. در این بخش توابع max، min و calc را معرفی می کنیم.
min تابع
از این تابع برای استخراج کوچکترین مقدار از بین چندین مقدار که به عنوان ورودی به تابع داده شده اند استفاده می شود. در مثال پیش رو برای اندازه عرض div از تابع min استفاده شده است و کم ترین مقدار بین 300 پیکسل و 50% اندازه صفحه browser به عنوان عرض div اعمال خواهد شد. با تغییر اندازه صفحه browser تغییر اندازه عرض div و تاثیرگذاری تابع min را شاهد خواهید بود.
<html> <head> <style> #div1 { background-color: yellow; height: 100px; width: min(50%, 300px); } </style> </head> <body>
<div id=“div1”>Hello world!</div>
</body> </html>
max تابع
این تابع نیز به روش مشابه تابع min بزرگترین مقدار ورودی را برای تنظیمات مورد نظر استخراج و اعمال می کند.
<html> <head> <style> #div1 { background-color: yellow; height: 100px; width: max(50%, 300px); } </style> </head> <body>
<div id=“div1”>Hello world!</div>
</body> </html>
calc تابع
در این تابع باید محاسبات ریاضی مورد نظرمان را در ورودی تابع قرار دهیم تا نتیجه محاسبات به عنوان تنظیمات اولیه اعمال گردند. در مثال زیر اندازه صفحه از 100 پیکسل کم شده و مقدار خروجی به عنوان اندازه عرض div اعمال می شود.
<html> <head> <style> #div1 { left: 50px; width: calc(100% – 100px); border: 1px solid black; background-color: yellow; padding: 5px; } </style> </head> <body> <div id=“div1”>Hello world!</div>
</body> </html>