کارکرد

پادکست 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() ، rgba() ، hsl() ، hsla() ، hwb() ، lab() و lch() . همه این‌ها شکل مشابهی دارند که در آن آرگومان‌های پیکربندی ارسال می‌شوند و یک رنگ برگردانده می‌شود.

عبارات ریاضی

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

calc()

پشتیبانی مرورگر

• 26
• 12
• 16
• 7

منبع

تابع 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()

پشتیبانی مرورگر

• 79
• 79
• 75
• 11.1

منبع

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

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

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

توجه: ما واحدهایی مانند vw و vh را در ماژول واحدهای اندازه گیری پوشش می دهیم.

clamp()

پشتیبانی مرورگر

• 79
• 79
• 75
• 13.1

منبع

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

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

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

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

شکل ها

ویژگی‌های 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 استفاده می شوند.

چرخش

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

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

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

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

پشتیبانی مرورگر

• 12
• 12
• 10
• 4

منبع

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

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

مقیاس

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

شما می توانید مقیاس بندی یک عنصر را با 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.

ترجمه کردن

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

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

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

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

کج شدن

پشتیبانی مرورگر

• 1
• 12
• 3.5
• 3.1

منبع

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

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

چشم انداز

پشتیبانی مرورگر

• 36
• 12
• 16
• 9

منبع

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

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

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

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

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

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

توابع CSS با کدام کاراکترها قابل شناسایی هستند؟

[]

این کاراکترها برای آرایه ها در جاوا اسکریپت هستند.

{}

این کاراکترها قوانین را در CSS قرار می دهند.

()

توابع از این کاراکترها برای بسته بندی آرگومان ها استفاده می کنند بله!

::

این کاراکترها برای شبه عناصر در CSS هستند.

:

این کاراکترها برای شبه کلاس ها در CSS هستند.

CSS دارای توابع ریاضی داخلی است؟

درست است، واقعی

تعداد زیادی از آنها وجود دارد و موارد بیشتری به مشخصات و مرورگرها اضافه می شود!

نادرست

دوباره امتحان کنید!

یک تابع calc() را می توان در داخل calc() دیگری مانند font-size: calc(10px + calc(5px * 3));

درست است، واقعی

🎉

نادرست

دوباره امتحان کنید!

کدام یک از موارد زیر توابع شکل CSS هستند؟

ellipse()

🎉

square()

دوباره امتحان کنید!

circle()

🎉

rect()

دوباره امتحان کنید!

inset()

🎉

polygon()

🎉