איך לעצב פינות Apple חלקות ב-CSS בלבד עם corner-shape

דמיינו את דניאל, מפתח פרונט-אנד בכיר בצוות מוצר ברחוב רוטשילד בתל אביב.

ביום שלישי בבוקר, מעצבת ה-UI ניגשה לשולחן שלו עם קובץ Figma. "הכרטיסים באפליקציה נראים נוקשים מדי", היא אמרה. "ה-border-radius הרגיל נראה כמו קופסה חתוכה. אנחנו צריכים Squircles כמו ב-iOS".

דניאל נאנח. הוא ידע בדיוק מה זה אומר.

הבעיה: הפינה ששוברת את העין

רוב המפתחים מניחים שפינה מעוגלת היא עניין פשוט. רושמים border-radius: 16px וסוגרים עניין.

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

הגדרה · Squircle

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

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

הניסיון הראשון: מסכות SVG וסיוט של תחזוקה

דניאל ניסה לפתור את זה בדרכים הישנות.

הוא יצר מסכת SVG (clip-path: url(#squircle-clip)), עטף את הכרטיסים ב-divs נוספים, וניסה להתאים את זה לרספונסיביות של המסך.

זה היה סיוט.

הגבולות (borders) נעלמו, הצלליות (box-shadow) נחתכו באכזריות, ובגלילה מהירה בטלפון נרשמו קרטועים קלים.

הקוד נהיה מסורבל. שינוי קטן בגודל הכרטיס דרש חישוב מחדש של ה-SVG.

היה חייב להיות פתרון נקי יותר.

הפתרון: התכונה corner-shape ב-CSS

הפתרון הגיע ישירות ממפרט ה-CSS המודרני.

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

הקוד נראה פשוט לגמרי:

.card {
  border-radius: 24px;
  corner-shape: squircle;
  background: #ffffff;
  padding: 2rem;
}

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

תמיכה לאחור בערגה למכשירים ישנים

מה קורה אם דפדפן ישן לא מכיר את המאפיין? הוא פשוט התעלם ממנו והשתמש ב-border-radius הרגיל.

כדי להבטיח התנהגות נשלטת, דניאל הוסיף בדיקת תמיכה פשוטה:

.card {
  border-radius: 20px;
}

@supports (corner-shape: squircle) {
  .card {
    corner-shape: squircle;
    border-radius: 28px; /* מומלץ להרחיב מעט את הרדיוס כשעוברים ל-squircle */
  }
}

התוצאה הייתה מיידית.

הכרטיסים באפליקציה קיבלו מראה רך, אלגנטי ויוקרתי. הצלליות נשארו רכות, והקוד נשאר קצר ב-90% לעומת ניסיון ה-SVG.

💡

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

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