کارکرد

bookmark_border با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

پادکست CSS - 020: توابع

تا کنون در این دوره، شما با چندین توابع CSS مواجه شده اید. در ماژول grid ، با minmax() و fit-content() آشنا شدید که به شما در اندازه عناصر کمک می کند. در ماژول رنگ ، با rgb() و hsl() آشنا شدید که به شما در تعریف رنگ ها کمک می کند.

مانند بسیاری از زبان های برنامه نویسی دیگر، CSS دارای توابع داخلی زیادی است که هر زمان که نیاز داشتید می توانید به آنها دسترسی داشته باشید.

هر تابع CSS هدف خاصی دارد، در این درس، یک نمای کلی در سطح بالایی خواهید داشت که به شما درک بهتری از مکان و نحوه استفاده از آنها می دهد.

تابع چیست؟

یک تابع یک قطعه کد نامگذاری شده است که یک کار خاص را تکمیل می کند. یک تابع نامگذاری شده است تا بتوانید آن را در کد خود فراخوانی کنید و بتوانید داده ها را به تابع منتقل کنید. این به عنوان استدلال های عبوری شناخته می شود.

بسیاری از توابع CSS توابع خالص هستند، به این معنی که اگر همان آرگومان‌ها را به آن‌ها منتقل کنید، بدون توجه به آنچه در بقیه کد شما اتفاق می‌افتد، همیشه همان نتیجه را به شما برمی‌گردانند. این توابع اغلب با تغییر مقادیر در CSS شما، مشابه سایر عناصر در زبان، مانند مقادیر آبشاری محاسبه شده مانند currentColor ، دوباره محاسبه می‌شوند.

در CSS، شما فقط می توانید از توابع ارائه شده استفاده کنید، نه اینکه توابع خود را بنویسید، اما توابع می توانند در برخی زمینه ها درون یکدیگر قرار بگیرند و به آنها انعطاف پذیری بیشتری می دهد. بعداً در این ماژول آن را با جزئیات بیشتری پوشش خواهیم داد.

انتخابگرهای عملکردی

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

شما در مورد انتخابگرهای تابعی در ماژول شبه کلاس ها یاد گرفتید که توابع جزئی مانند :is() و :not() . آرگومان های ارسال شده به این توابع، انتخابگرهای CSS هستند که سپس ارزیابی می شوند. اگر تطابق با عناصر وجود داشته باشد، بقیه قانون CSS برای آنها اعمال می شود.

خواص سفارشی و var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

یک ویژگی سفارشی متغیری است که به شما امکان می دهد مقادیر را در کد CSS خود نشانه گذاری کنید. ویژگی‌های سفارشی نیز تحت تأثیر آبشار قرار می‌گیرند ، به این معنی که می‌توان آن‌ها را به صورت متنی دستکاری یا بازتعریف کرد. یک ویژگی سفارشی باید با دو خط تیره ( -- ) پیشوند شود و به حروف کوچک و بزرگ حساس است.

تابع var() یک آرگومان لازم را می گیرد: ویژگی سفارشی که می خواهید به عنوان مقدار برگردانید.

در قطعه قبلی، تابع var() دارای --base-color به عنوان آرگومان است. اگر --base-color تعریف شده باشد، var() مقدار را برمی گرداند.

.my-element {
    background: var(--base-color, hotpink);
}

همچنین می توانید یک مقدار اعلان بازگشتی را به تابع var() ارسال کنید. این به این معنی است که اگر --base-color پیدا نشود، به جای آن از اعلان تصویب شده استفاده می شود که در مورد این نمونه رنگ hotpink است.

توابعی که مقداری را برمی گرداند

تابع var() تنها یکی از توابع CSS است که مقداری را برمی گرداند. توابعی مانند attr() و url() از ساختاری مشابه var() پیروی می کنند - شما یک یا چند آرگومان را ارسال می کنید و از آنها در سمت راست اعلان CSS خود استفاده می کنید.

a::after {
  content: attr(href);
}

تابع attr() در اینجا محتوای صفت href عنصر <a> را می گیرد و آن را به عنوان content شبه عنصر ::after تنظیم می کند. اگر مقدار ویژگی href عنصر <a> تغییر کند، این به طور خودکار در این ویژگی content منعکس می شود.

.my-element {
    background-image: url('/path/to/image.jpg');
}

تابع url() یک URL رشته ای می گیرد و برای بارگذاری تصاویر، فونت ها و محتوا استفاده می شود. اگر یک URL معتبر ارسال نشود یا منبعی که URL به آن اشاره می کند پیدا نشود، هیچ چیزی توسط تابع url() برگردانده نخواهد شد.

توابع رنگ

همه چیز را در مورد توابع رنگ در ماژول رنگ یاد گرفتید. اگر هنوز آن را نخوانده اید، اکیداً توصیه می شود آن را مطالعه کنید.

برخی از توابع رنگ موجود در CSS عبارتند از rgb() ، hsl() ، lab() ، lch() ، oklab() ، oklch() و color() . همه این‌ها شکل مشابهی دارند که در آن آرگومان‌های پیکربندی ارسال می‌شوند و یک رنگ برگردانده می‌شود.

عبارات ریاضی

مانند بسیاری از زبان های برنامه نویسی دیگر، CSS توابع ریاضی مفیدی را برای کمک به انواع مختلف محاسبات ارائه می دهد.

توابع حسابی

calc()

تابع calc() یک عبارت ریاضی واحد را به عنوان پارامتر خود می گیرد. این عبارت ریاضی می تواند ترکیبی از انواع، مانند طول، عدد، زاویه و فرکانس باشد. واحدها را نیز می توان مخلوط کرد.

.my-element {
    width: calc(100% - 2rem);
}

در این مثال، تابع calc() برای اندازه‌گیری عرض یک عنصر به اندازه 100 درصد عنصر اصلی حاوی آن استفاده می‌شود، سپس 2rem از آن مقدار محاسبه‌شده حذف می‌شود.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

تابع calc() را می توان داخل تابع calc() دیگری قرار داد. همچنین می توانید ویژگی های سفارشی را در تابع var() به عنوان بخشی از یک عبارت ارسال کنید.

min() و max()

تابع min() کوچکترین مقدار محاسبه شده یک یا چند آرگومان ارسال شده را برمی گرداند. تابع max() برعکس عمل می کند: بزرگترین مقدار یک یا چند آرگومان ارسال شده را بدست آورید.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

در این مثال، عرض باید کوچکترین مقدار بین 20vw - که 20 درصد عرض دید پورت است - و 30rem باشد. ارتفاع باید بزرگترین مقدار بین 20vh - که 20 درصد ارتفاع درگاه دید است - و 20rem باشد.

clamp()

تابع clamp() سه آرگومان می گیرد: حداقل اندازه، اندازه ایده آل و حداکثر.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

در این مثال، font-size بر اساس عرض درگاه دید، سیال خواهد بود. واحد vw به یک واحد rem اضافه می شود تا به بزرگنمایی صفحه کمک کند، زیرا صرف نظر از سطح زوم، واحد vw همان اندازه خواهد بود. ضرب در یک واحد rem - بر اساس اندازه فونت ریشه - تابع clamp() را با یک نقطه محاسبه نسبی فراهم می کند.

در این مقاله در مورد این توابع می توانید در مورد توابع min() ، max() و clamp () اطلاعات بیشتری کسب کنید.

توابع مثلثاتی

توابع مثلثاتی به شما این امکان را می دهند که هر نقطه از دایره را بر اساس زاویه پیدا کنید، پدیده های چرخه ای مانند امواج صوتی را مدل کنید، مدارها را توصیف کنید و موارد دیگر. در CSS، می‌توانید از توابع مثلثاتی برای تنظیم ویژگی‌ها بر اساس چرخش، انیمیشن‌های زمانی، چرخش عناصر بر اساس یک نقطه و موارد دیگر استفاده کنید.

برای اطلاعات بیشتر و مثال‌ها، به مقاله ما در مورد توابع مثلثاتی مراجعه کنید.

sin() ، cos() و tan()

توابع sin() ، cos() و tan() آرگومان زاویه می گیرند و به ترتیب سینوس، کسینوس و مماس را برمی گرداند. توابع sin() و cos() عددی بین -1 و 1 برمی گرداند. تابع tan() عددی بین -Infinity و +Infinity برمی گرداند. آرگومان زاویه می تواند هر واحد زاویه پشتیبانی شده باشد.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

در مثال قبل، --sine-degrees و --sine-radians مقدار یکسانی دارند (در این مورد 0.7071 ).

در مثال قبل، از توابع sin() و cos() برای ایجاد انیمیشن های نوسانی در محور x و y با ضرب نتیجه در شعاع مشخص شده استفاده می شود. استفاده همزمان از هر دو عملکرد به یک انیمیشن در حال چرخش اجازه می دهد. ما از یک ویژگی سفارشی ، --angle برای متحرک سازی هموار زاویه برای همه فراخوانی های تابع استفاده می کنیم.

asin() ، acos() و atan()

asin() ، acos() و atan() معکوس توابع sin() ، cos() و tan() هستند که یک عدد را به عنوان آرگومان می گیرند و یک مقدار زاویه بین -90deg و 90deg برمی گردند. توابع asin() و acos() عددی بین -1 و 1 را می پذیرند در حالی که تابع atan() عددی بین -Infinity و +Infinity را می پذیرد.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

تابع atan2() دو آرگومان دریافت می کند که یک نقطه نسبت به مبدا را نشان می دهد و زاویه نشان دهنده جهت به آن نقطه را برمی گرداند. می توانید از این برای چرخاندن عناصر برای مواجهه با یک نقطه خاص استفاده کنید. آرگومان ها می توانند اعداد، واحدهای اندازه یا درصد باشند، اما هر دو آرگومان باید هر دو یک نوع باشند.

در مثال بالا تابع atan2() برای تعیین زاویه بین مرکز دید و موقعیت فعلی ماوس استفاده می شود. توجه داشته باشید که مقدار y آرگومان اول و مقدار x آرگومان دوم است. سپس از این زاویه برای قرار دادن مردمک‌ها نسبت به مرکز چشم‌ها استفاده می‌شود، بنابراین آنها از ماوس پیروی می‌کنند.

hypot()

تابع hypot() دو آرگومان طولی که اضلاع یک مثلث قائم الزاویه را نشان می دهند می گیرد و طول هیپوتنوز را برمی گرداند. می توانید از این به عنوان میانبر برای محاسبه با استفاده از توابع نمایی استفاده کنید. هر دو آرگومان باید یک نوع واحد باشند و hypot() همان نوع را برمی گرداند.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

توابع نمایی

pow() و exp()

تابع pow() دو آرگومان عددی مبنا و توان را می گیرد و پایه را با توان توان افزایش می دهد. هر دو آرگومان باید اعداد بدون واحد باشند. تابع exp() یک آرگومان واحد می گیرد و معادل فراخوانی تابع pow() با پایه e است.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

تابع sqrt() یک آرگومان عددی می گیرد و جذر آن را برمی گرداند. استدلال نمی تواند شامل واحدها باشد.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

تابع log() لگاریتم یک مقدار عددی را برمی گرداند. اگر یک آرگومان تصویب شود، لگاریتم طبیعی را برمی گرداند. اگر آرگومان دوم ارسال شود، تابع log() از آرگومان دوم به عنوان پایه لگاریتم استفاده می کند.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

توابع مرتبط را امضا کنید

abs()

تابع abs() یک آرگومان عددی می گیرد و مقدار مطلق (مثبت) مقدار آرگومان را برمی گرداند.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

در مثال قبل، مقدار alpha -1 به متن شفاف منجر می‌شود، اما تابع abs() مقدار مطلق 1 را برمی‌گرداند که منجر به متن کاملاً مات می‌شود.

sign()

تابع sign() یک آرگومان عددی می گیرد و علامت آرگومان ها را برمی گرداند. مقادیر مثبت 1 و مقادیر منفی -1 را برمی گرداند. مقادیر صفر 0 را برمی گرداند.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

در مثال های قبل، اگر --value مثبت باشد، مقدار بالایی 75vh خواهد بود. اگر منفی باشد، مقدار بالای آن 25vh خواهد بود. اگر صفر باشد، مقدار بالایی 50vh خواهد بود.

اشکال

ویژگی‌های clip-path ، offset-path و shape-outside CSS از اشکال برای برش بصری جعبه شما یا ارائه شکلی برای جریان محتوا در اطراف استفاده می‌کنند.

توابع شکلی وجود دارند که با هر دوی این ویژگی ها قابل استفاده هستند. اشکال ساده مانند circle() ، ellipse() و inset() از آرگومان های پیکربندی برای اندازه گیری آنها استفاده می کنند. اشکال پیچیده‌تر، مانند polygon() برای ایجاد اشکال سفارشی، جفت‌هایی از مقادیر محور X و Y را با کاما جدا می‌کنند.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

مانند polygon() ، یک تابع path() نیز وجود دارد که یک قانون Fill SVG را به عنوان آرگومان می گیرد. این اجازه می دهد تا اشکال بسیار پیچیده ای را که می توان در یک ابزار گرافیکی مانند Illustrator یا Inkscape ترسیم کرد و سپس در CSS خود کپی کرد.

تبدیل می کند

در نهایت در این نمای کلی از توابع CSS، توابع تبدیل هستند که باعث تغییر اندازه، تغییر اندازه و حتی تغییر عمق یک عنصر می شوند. تمام توابع زیر با ویژگی transform استفاده می شوند.

چرخش

شما می توانید یک عنصر را با استفاده از تابع rotate() بچرخانید، که یک عنصر را در محور مرکزی آن می چرخاند. همچنین می توانید از توابع rotateX() ، rotateY() و rotateZ() برای چرخاندن یک عنصر بر روی یک محور خاص استفاده کنید. برای تعیین سطح چرخش می توانید واحدهای درجه، چرخش و رادیان را پاس کنید.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

تابع rotate3d() چهار آرگومان می گیرد.

3 آرگومان اول اعداد هستند که مختصات X، Y و Z را تعریف می کنند. آرگومان چهارم، چرخش است که مانند سایر توابع چرخش، درجه، زاویه و چرخش را می پذیرد.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

مقیاس

شما می توانید مقیاس بندی یک عنصر را با transform و تابع scale() تغییر دهید. تابع یک یا دو عدد را به عنوان مقداری می پذیرد که مقیاس بندی مثبت یا منفی را تعیین می کند. اگر فقط یک آرگومان عددی تعریف کنید، هر دو محور X و Y یکسان مقیاس می‌شوند و تعریف هر دو مخفف X و Y است. درست مانند rotate() ، توابع scaleX() ، scaleY() و scaleZ() برای مقیاس‌بندی یک عنصر در یک محور خاص وجود دارد.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

همچنین مانند تابع rotate ، یک تابع scale3d() وجود دارد. این شبیه به scale() است، اما سه آرگومان دارد: ضریب مقیاس X، Y و Z.

ترجمه کنید

توابع translate() یک عنصر را در حالی که موقعیت خود را در جریان سند حفظ می کند حرکت می دهد. آنها مقادیر طول و درصد را به عنوان آرگومان می پذیرند. اگر یک آرگومان تعریف شده باشد، تابع translate() یک عنصر را در امتداد محور X ترجمه می کند و اگر هر دو آرگومان تعریف شده باشند، عنصری را در امتداد محور X و Y ترجمه می کند.

.my-element {
  transform: translatex(40px) translatey(25px);
}

شما می توانید - درست مانند سایر توابع تبدیل - از توابع خاص برای یک محور خاص با استفاده از translateX ، translateY و translateZ استفاده کنید. شما همچنین می توانید translate3d استفاده کنید که به شما امکان می دهد ترجمه X، Y و Z را در یک تابع تعریف کنید.

کج شدن

با استفاده از توابع skew() که زوایا را به عنوان آرگومان می پذیرند، می توانید یک عنصر را کج کنید. تابع skew() به روشی بسیار شبیه به translate() عمل می کند. اگر فقط یک آرگومان تعریف کنید، فقط بر محور X و اگر هر دو را تعریف کنید، بر محور X و Y تأثیر می گذارد. همچنین می توانید از skewX و skewY برای تأثیرگذاری مستقل بر هر محور استفاده کنید.

.my-element {
  transform: skew(10deg);
}

چشم انداز

در نهایت، می‌توانید از ویژگی perspective - که بخشی از خانواده تبدیل خصوصیات است - برای تغییر فاصله بین کاربر و صفحه Z استفاده کنید. این حس فاصله را می دهد و می توان از آن برای ایجاد عمق میدان در طرح های خود استفاده کرد.

این مثال توسط دیوید دساندرو، از مقاله بسیار مفید آنها، نشان می‌دهد که چگونه می‌توان از آن، همراه با ویژگی‌های perspective-origin-x و perspective-origin-y برای ایجاد تجربیات سه بعدی واقعی استفاده کرد.

توابع انیمیشن، گرادیان ها و فیلترها

CSS همچنین توابعی را ارائه می دهد که به شما کمک می کند عناصر را متحرک کنید ، شیب ها را روی آنها اعمال کنید و از فیلترهای گرافیکی برای دستکاری ظاهر آنها استفاده کنید. برای اینکه این ماژول تا حد امکان مختصر باشد، در ماژول های مرتبط پوشش داده شده است. همه آنها از ساختاری مشابه با عملکردهای نشان داده شده در این ماژول پیروی می کنند.

درک خود را بررسی کنید

دانش خود را از توابع آزمایش کنید