توابع ریاضی(CSS Math Functions)
توابع ریاضی در CSS به شما امکان می‌دهند محاسبات ریاضی را مستقیماً در کدهای CSS انجام دهید. این توابع برای ایجاد طراحی‌های پویا و واکنش‌گرا بسیار مفید هستند و به شما اجازه می‌دهند با واحدهایی مثل طول، درصد، زاویه و غیره کار کنید. در ادامه توضیحی درباره توابع اصلی ریاضی CSS آورده شده است:
1. calc()
برای انجام عملیات ریاضی ساده (+، -، *، /) به صورت پویا.
نحوه استفاده:
width: calc(100% – 50px);
موارد استفاده:
- تنظیم ابعاد نسبت به عناصر والد.
- ترکیب واحدهای مختلف (مثل
%وpx).
2. min()
کوچک‌ترین مقدار را از لیستی که با کاما جدا شده است بازمی‌گرداند.
نحوه استفاده:
width: min(50%, 300px);
موارد استفاده:
- تعیین حداکثر اندازه برای عناصر واکنش‌گرا.
- جلوگیری از بزرگ شدن بیش از حد عناصر در صفحه‌نمایش‌های عریض.
3. max()
بزرگ‌ترین مقدار را از لیستی که با کاما جدا شده است بازمی‌گرداند.
نحوه استفاده:
width: max(200px, 10vw);
موارد استفاده:
- تعیین حداقل اندازه برای عناصر.
- اطمینان از اینکه عناصر بیش از حد کوچک نمی‌شوند.
4. clamp()
یک مقدار را بین حداقل و حداکثر مشخص شده محدود می‌کند.
نحوه استفاده:
font-size: clamp(1rem, 2.5vw, 2rem);
موارد استفاده:
- ایجاد تایپوگرافی منعطف.
- تنظیم اندازه‌های پویا با مرزهای کنترل‌شده.
5. round() (پشتیبانی در مرورگرهای جدید)
یک مقدار را به دقت مشخصی گرد می‌کند.
نحوه استفاده:
margin: round(10.5px, 1px);
موارد استفاده:
- تنظیم مقادیر به یک شبکه.
- کاهش مشکلات رندرینگ زیرپیکسلی.
مزایای توابع ریاضی در CSS:
- طراحی پویا: امکان ایجاد لایه‌بندی‌های انعطاف‌پذیر که به اندازه‌های مختلف صفحه واکنش نشان می‌دهند.
- خوانایی بهتر: حذف نیاز به محاسبات دستی در CSS.
- طراحی واکنش‌گرا: ترکیب آسان واحدهایی مثل درصد و پیکسل.
مثال:
:root {
–padding: 16px;
}
.container {
width: calc(100% – var(–padding) * 2);
max-width: min(800px, 90%);
font-size: clamp(1rem, 1.5vw, 2rem);
}
این توابع طراحی‌های واکنش‌گرا و تطبیق‌پذیر را ساده‌تر کرده و کدهای CSS را تمیزتر و قابل نگهداری‌تر می‌کنند.
دیدگاهتان را بنویسید