פונקציות

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(), ‏ rgba(), ‏ hsl(), ‏ hsla(), ‏ hwb(), ‏ lab() ו-lch(). לכל הפונקציות האלה יש פורמט דומה, שבו מעבירים את ארגומנטי התצורה ומקבלים בחזרה צבע.

ביטויים מתמטיים

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

calc()‎

Browser Support

• 26
• 12
• 16
• 7

Source

הפונקציה 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()

Browser Support

• 79
• 79
• 75
• 11.1

Source

הפונקציה min() מחזירה את הערך המחושב הקטן ביותר של הארגומנט אחד או יותר שהועברו. הפונקציה max() עושה את ההפך: היא מקבלת את הערך הגדול ביותר של הארגומנט אחד או יותר שהועברו.

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

בדוגמה הזו, הרוחב צריך להיות הערך הקטן ביותר מבין 20vw – שהוא 20% מרוחב שדה התצוגה – ו-30rem. הגובה צריך להיות הערך הגדול ביותר מבין 20vh — שהוא 20% מגובה חלון התצוגה — ו-20rem.

הערה: אנחנו עוסקים ביחידות כמו vw ו-vh במודול היחידות של התאמה אישית.

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

הפונקציה clamp() מקבלת שלושה ארגומנטים: הגודל המינימלי, הגודל האידיאלי והגודל המקסימלי.

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

בדוגמה הזו, ה-font-size ישתנה בהתאם לרוחב של אזור התצוגה. היחידה vw מתווספת ליחידה rem כדי לעזור בכיווץ המסך, כי ללא קשר לרמת הזום, יחידה vw תהיה באותו גודל. הכפלה ביחידת rem – על סמך גודל הגופן של השורש – מספקת לפונקציה clamp() נקודת חישוב יחסית.

מידע נוסף על הפונקציות min(),‏ max() ו-clamp() זמין במאמר הזה.

צורות

במאפייני ה-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.

סיבוב

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

אפשר לסובב רכיב באמצעות הפונקציה rotate(), שסובבת רכיב סביב ציר המרכז שלו. אפשר גם להשתמש בפונקציות rotateX(),‏ rotateY() ו-rotateZ() כדי לסובב רכיב על ציר ספציפי במקום זאת. אפשר להעביר יחידות של מעלות, סיבובים ורדיאנים כדי לקבוע את רמת הסיבוב.

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

הפונקציה rotate3d() מקבלת ארבעה ארגומנטים.

Browser Support

• 12
• 12
• 10
• 4

Source

3 הארגומנטים הראשונים הם מספרים שמגדירים את הקואורדינטות X,‏ Y ו-Z. הארגומנט הרביעי הוא הסיבוב, שיכול לקבל, כמו שאר פונקציות הסיבוב, מעלות, זווית וסיבובים.

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

קנה מידה

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

תרגום

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

הפונקציות translate() מאפשרות להזיז רכיב תוך שמירה על המיקום שלו בזרימת המסמך. הן מקבלות ערכי אורך ואחוזים כארגומנטים. הפונקציה translate() מעבירה רכיב לאורך ציר X אם מוגדר ארגומנט אחד, ומעבירה רכיב לאורך ציר X ו-Y אם מוגדרים שני הארגומנטים.

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

בדומה לפונקציות טרנספורמציה אחרות, אפשר להשתמש בפונקציות ספציפיות לציר ספציפי באמצעות translateX,‏ translateY ו-translateZ. אפשר גם להשתמש בפונקציה translate3d שמאפשרת להגדיר את התרגום של X, ‏ Y ו-Z בפונקציה אחת.

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

אפשר להטות רכיב באמצעות הפונקציות skew() שמקבלות זוויות כארגומנטים. הפונקציה skew() פועלת באופן דומה מאוד לפונקציה translate(). אם מגדירים רק ארגומנטים אחד, הוא ישפיע רק על ציר X. אם מגדירים את שניהם, הוא ישפיע על ציר X ועל ציר Y. אפשר גם להשתמש ב-skewX וב-skewY כדי להשפיע על כל ציר בנפרד.

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

נקודת המבט של המשתמש

Browser Support

• 36
• 12
• 16
• 9

Source

לבסוף, אפשר להשתמש בנכס perspective – שהוא חלק ממשפחת הנכסים של טרנספורמציות – כדי לשנות את המרחק בין המשתמש לבין מישור Z. כך אפשר ליצור תחושה של מרחק, ולהשתמש בכך כדי ליצור עומק שדה בעיצובים.

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

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

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

בדיקת ההבנה

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

אילו תווים מאפשרים לזהות פונקציות CSS?

[]

התווים האלה מיועדים למערכים ב-JavaScript.

{}

התווים האלה עוטפים כללים ב-CSS.

()

הפונקציות משתמשות בתווים האלה כדי לעטוף את הארגומנטים.

::

התווים האלה מיועדים לפסאודו-רכיבים ב-CSS.

:

התווים האלה מיועדים לפסאודו-כיתות ב-CSS.

האם ל-CSS יש פונקציות מתמטיות מובנות?

True

יש הרבה מהם, ועוד יתווספו למפרטים ולדפדפנים.

לא נכון

כדאי לנסות שוב.

אפשר להציב פונקציית calc() בתוך פונקציית calc() אחרת, כמו font-size: calc(10px + calc(5px * 3));

True

🎉

לא נכון

כדאי לנסות שוב.

אילו מהפונקציות הבאות הן פונקציות של צורות ב-CSS?

ellipse()

🎉

square()

כדאי לנסות שוב.

circle()

🎉

rect()

כדאי לנסות שוב.

inset()

🎉

polygon()

🎉