פונקציות

bookmark_border קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

The CSS Podcast – 020: Functions

עד עכשיו בקורס הזה, נחשפת לכמה פונקציות CSS. במודול grid, הכרתם את minmax() ו-fit-content(), שעוזרים לקבוע את הגודל של רכיבים. במודול color, הכרתם את 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. גם מאפיינים מותאמים אישית מושפעים מהשלב, כלומר אפשר לשנות אותם או להגדיר אותם מחדש בהתאם להקשר. נכס מותאם אישית חייב להתחיל בשני מקפים (--) והוא תלוי אותיות רישיות (case-sensitive).

הפונקציה 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() לא תחזיר דבר.

פונקציות צבע

למדתם על כל פונקציות הצבע במודול color. אם עדיין לא קראת את המאמר הזה, מומלץ מאוד לעשות זאת.

חלק מהפונקציות הזמינות של צבעים ב-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. הארגומנט angle יכול להיות כל יחידת זווית נתמכת.

: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.

צורות

במאפייני ה-CSS clip-path,‏ offset-path ו-shape-outside נעשה שימוש בצורות כדי לחתוך את התיבה באופן חזותי או לספק צורה שבתוכה התוכן יכול לזרום.

יש פונקציות של צורות שאפשר להשתמש בהן בשני המאפיינים האלה. כדי לקבוע את הגודל של צורות פשוטות כמו 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() שמקבלת כארגומנט כלל מילוי של 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. כך תוכלו ליצור תחושה של מרחק, ולהשתמש בכך כדי ליצור עומק שדה בעיצובים שלכם.

בדוגמה הזו של David Desandro, מהמאמר המועיל מאוד שלו, מוסבר איך אפשר להשתמש במאפיין הזה, יחד עם המאפיינים perspective-origin-x ו-perspective-origin-y, כדי ליצור חוויות תלת-מימדיות אמיתיות.

פונקציות אנימציה, מעברים וסינונים

ב-CSS יש גם פונקציות שיעזרו לכם להנפיש רכיבים, להחיל עליהם עקומי הדרגתיות ולהשתמש במסננים גרפיים כדי לשנות את המראה שלהם. כדי שהמודול הזה יהיה תמציתי ככל האפשר, הם מוסברים במודולים המקושרים. הן כוללות מבנה דומה לזה של הפונקציות שמוצגות במודול הזה.

בדיקת ההבנה

בדיקת הידע שלכם בנושא פונקציות