פונקציות

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

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

פונקציות צבע

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

חלק מפונקציות הצבע הזמינות ב-CSS הן rgb(), rgba(), hsl(), hsla(), hwb(), lab() ו-lch(). לכל הערכים יש צורה דומה שבה ארגומנטים של תצורה מועברים ומוחזר צבע בחזרה.

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

כמו שפות תכנות רבות אחרות, שירות ה-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 – על בסיס גודל הגופן הבסיסי (root), מספקת לפונקציה 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() שמשתמשת בכלל מילוי SVG כארגומנט. כך ניתן ליצור צורות מורכבות מאוד שאפשר לצייר בכלי גרפי כמו Illustrator או Inkscape, ואז להעתיק אותן ל-CSS.

שינויי צורה

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

סיבוב

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

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

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

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

בחינת ההבנה

בחינת הידע שלך לגבי פונקציות