פונקציות

הפודקאסט של CSS – 020: פונקציות

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

פונקציות צבע

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

חלק מפונקציות הצבע הזמינות ב-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() שמקבלת כלל מילוי 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?

[]

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

{}

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

()

פונקציות משתמשות בתווים האלה כדי לכווץ ארגומנטים אכן!

::

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

:

התווים האלה מיועדים למחלקות מדומה ב-CSS.

ב-CSS יש פונקציות מתמטיות מובנות?

נכון

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

לא נכון

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

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

נכון

🎉

לא נכון

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

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

ellipse()

🎉

square()

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

circle()

🎉

rect()

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

inset()

🎉

polygon()

🎉