תכונות CSS חדשות מוציאות את עיצוב הווב אל מחוץ למלבנים

התלות של 30 שנה בפריסה מלבנית מתחילה להיסדק. שלוש תכונות CSS חדשות יחסית, הפונקציה shape() והמאפיינים border-shape ו-corner-shape, מעניקות למעצבים פלטה רחבה יותר לעמודים שאינם בנויים עוד מקופסאות מונחות זו על זו.

מ-SVG אל shape()

כאשר World Wide Web Consortium פרסם ב-1996 את תקן הפריסה הראשון שלו, עמודים שיקפו את העיצוב מבוסס הרשת של עיתונים וכתבי עת. מנועי הדפדפן היו צעירים, חומרת הגרפיקה פרימיטיבית, והזרמת טקסט בתוך מלבן הייתה הבחירה הבטוחה.

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

מה משנים shape() ו-border-shape

shape() היא קבוצה של קואורדינטות גיאומטריות המתארות צורה או מסלול רצויים, הבנויה על תחביר CSS רספונסיבי ולא על SVG. בשילוב עם המאפיין הקיים clip-path היא שימשה ליצירת שובלי כרטיסים, בועות צ'אט ורכיבים אחרים שאינם מלבניים.

המאפיין border-shape מחיל קואורדינטות מקוריות של CSS שהוגדרו ב-shape() על הגבולות של העמוד עצמו. מגדירים את הקואורדינטות פעם אחת, והגבולות מסומנים על העמוד בשלב מוקדם של הרינדור ולא נחתכים לקראת סופו. "הנחת גבולות על צורות CSS תהפוך למשחק ילדים", כתב מפתח ה-CSS Temani Afif, המתאר את עצמו כהאקר CSS, במדריך שפורסם ב-CSS-Tricks.

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

corner-shape ותמיכת דפדפנים

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

לפי caniuse.com, כל הדפדפנים המובילים תומכים כעת ב-shape(). border-shape ו-corner-shape עדיין מיושמים ונחשבים ניסיוניים, אם כי הגרסאות הנוכחיות של Chrome, Edge ו-Opera תומכות בתקן. העבודה שנותרה, כך מסכם הדיווח, מוטלת על המפתחים.