תחילת העבודה עם צורות CSS

הצגת תוכן מסביב לנתיבים מותאמים אישית

Razvan Caliman

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

אפשר להגדיר צורות באופן ידני או להסיק אותן מתמונות.

בואו נראה דוגמה פשוטה מאוד.

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

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

ההצהרה shape-outside: url(image.png) ב-CSS מורה לדפדפן לחלץ צורה מהתמונה.

המאפיין shape-image-threshold מגדיר את רמת האטימות המינימלית של הפיקסלים שישמשו ליצירת הצורה. הערך צריך להיות בטווח שבין 0.0 (שקוף לחלוטין) ל-1.0 (אטום לחלוטין). לכן, shape-image-threshold: 0.5 פירושו שרק פיקסלים עם אטימות של 50% ומעלה ישמשו ליצירת הצורה.

המאפיין float הוא המפתח כאן. המאפיין shape-outside מגדיר את צורת האזור שסביבו התוכן יתעטף, אבל בלי ה-float לא תראו את ההשפעות של הצורה.

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

בעתיד, אפשר יהיה להשתמש ב-shape-outside ברכיבים שלא צפים, באמצעות הוספת החרגות CSS.

יצירת צורות באופן ידני

בנוסף לחילוץ צורות מתמונות, אתם יכולים גם לתכנת אותן באופן ידני. אפשר לבחור מבין כמה ערכים פונקציונליים כדי ליצור צורות: circle(),‏ ellipse(),‏ inset() ו-polygon(). כל פונקציית צורה מקבלת קבוצה של קואורדינטות, והיא משויכת לתיבת עזר שקובעת את מערכת הקואורדינטות. עוד רגע נסביר על תיבות העזר.

הפונקציה circle()‎

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

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

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

לפני שנמשיך, הערה קצרה: חשוב לזכור שצורות CSS משפיעות רק על הצורה של אזור הציפה מסביב לאלמנט. אם לרכיב יש רקע, הוא לא ייחתך על ידי הצורה. כדי להשיג את האפקט הזה, צריך להשתמש במאפיינים מ-CSS Masking – clip-path או mask-image. המאפיין clip-path שימושי מאוד כי הוא פועל לפי אותו סימון כמו צורות CSS, כך שאפשר לעשות שימוש חוזר בערכים.

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

נחזור לצורת העיגול.

כשמשתמשים באחוזים לרדיוס של העיגול, הערך מחושב בפועל באמצעות נוסחה קצת יותר מורכבת: sqrt(width^2 + height^2) / sqrt(2). חשוב להבין את זה כי זה יעזור לכם לדמיין איך תיראה צורת העיגול שתתקבל אם המידות של הרכיב לא יהיו שוות.

אפשר להשתמש בכל סוגי היחידות של CSS בקואורדינטות של פונקציית הצורה – px,‏ em,‏ rem,‏ vw,‏ vh וכן הלאה. אתם יכולים לבחור את האפשרות שמתאימה לצרכים שלכם.

כדי לשנות את המיקום של העיגול, אפשר להגדיר ערכים מפורשים לקואורדינטות של המרכז שלו.

.element{
  shape-outside: circle(50% at 0 0);
}

כך מרכז המעגל ממוקם בראשית הצירים של מערכת הקואורדינטות. מהי מערכת הקואורדינטות? כאן אנחנו מציגים תיבות עזר.

תיבות עזר לצורות CSS

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

חשוב לזכור שהמאפיין shape-outside משנה את הצורה של האזור הצף שסביבו התוכן יתעטף. האזור הצף מתרחב עד לקצוות החיצוניים של התיבה שמוגדרת על ידי המאפיין margin. התיבה הזו נקראת margin-box והיא תיבת העזר שמוגדרת כברירת מחדל לצורה אם לא צוינה תיבה אחרת באופן מפורש.

שתי הצהרות ה-CSS הבאות מניבות תוצאות זהות:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

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

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

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

יש כמה אפשרויות לבחירה של תיבת העזר: `margin-box`, ‏ `border-box`, ‏ `padding-box` ו-`content-box`. השמות שלהן מרמזים על הגבולות שלהן. הסברנו קודם על `margin-box`. ה-`border-box` מוגבל על ידי הקצוות החיצוניים של גבולות הרכיב, ה-`padding-box` מוגבל על ידי המרווח הפנימי של הרכיב, וה-`content-box` זהה לשטח הפנים בפועל שבו משתמש התוכן בתוך רכיב.

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

הפונקציה ellipse()‎

אליפסות נראות כמו עיגולים מעוכים. הם מוגדרים כ-ellipse(rx ry at cx cy), כאשר rx ו-ry הם הרדיוסים של האליפסה בציר ה-X ובציר ה-Y, ו-cx ו-cy הם הקואורדינטות של מרכז האליפסה.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

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

אפשר גם להגדיר את הרדיוסים בציר ה-X ובציר ה-Y באמצעות מילות מפתח: farthest-side מניב רדיוס ששווה למרחק בין מרכז האליפסה לבין הצד של תיבת העזר שהכי רחוק ממנו, ואילו closest-side אומר בדיוק ההפך – להשתמש במרחק הכי קצר בין המרכז לבין הצד.

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

האפשרות הזו יכולה להיות שימושית כשממדי הרכיב (או תיבת העזר) עשויים להשתנות בדרכים בלתי צפויות, אבל אתם רוצים שצורת האליפסה תתאים את עצמה.

אפשר להשתמש באותן מילות מפתח farthest-side ו-closest-side גם לרדיוס בפונקציית הצורה circle().

הפונקציה polygon()‎

אם עיגולים ואליפסות מגבילים אתכם, פונקציית הצורה של פוליגון פותחת עולם של אפשרויות. הפורמט הוא polygon(x1 y1, x2 y2, ...), שבו מציינים זוגות של קואורדינטות x ו-y לכל קודקוד (נקודה) של פוליגון. המספר המינימלי של זוגות לציון מצולע הוא שלושה, משולש.

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

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

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

יש פרמטר אופציונלי של fill-rule, מיובא מ-SVG, שמורה לדפדפן איך להתייחס ל"פנימיות" של פוליגון במקרה של נתיבים שמצטלבים עם עצמם או צורות סגורות. ג'וני טרית'הול מסבירה היטב איך המאפיין fill-rule פועל ב-SVG. אם לא מגדירים את fill-rule, ערך ברירת המחדל הוא nonzero.

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

הפונקציה inset()‎

פונקציית הצורה inset() מאפשרת ליצור צורות מלבניות שסביבן אפשר לעטוף תוכן. זה אולי נשמע לא הגיוני בהתחשב בהנחה הראשונית שצורות CSS משחררות את תוכן האינטרנט מתיבות פשוטות. יכול מאוד להיות. עדיין לא מצאתי תרחיש שימוש ב-inset() שאי אפשר להשיג כבר באמצעות floats ושוליים או באמצעות polygon(). למרות ש-inset() מספק ביטוי קריא יותר לצורות מלבניות מאשר polygon().

הסימון המלא של פונקציית צורה פנימית הוא inset(top right bottom left border-radius). ארבעת הארגומנטים הראשונים של המיקום הם היסטים פנימה מקצוות הרכיב. הארגומנט האחרון הוא רדיוס הגבול של הצורה המלבנית. הוא אופציונלי, אז אפשר להשמיט אותו. הוא פועל לפי הסימון המקוצר של border-radius שכבר נמצא בשימוש ב-CSS.

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

יצירת צורות מתיבות עזר

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

אם משתמשים בה כדי לעגל את הפינות של רכיב צף, מקבלים את אפקט החיתוך, אבל האזור הצף נשאר מלבני. מוסיפים shape-outside: border-box כדי לעטוף את קווי המתאר שנוצרו על ידי border-radius.

.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

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

אפשר להשיג את האפקט של ציטוט מוסט באמצעות המאפיינים float ו-margin בלבד. אבל בשביל זה צריך למקם את רכיב הציטוט בעץ ה-HTML בנקודה שבה רוצים שהוא יוצג.

כך אפשר להשיג את אותו אפקט של ציטוט מוסט עם גמישות נוספת:

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

אנחנו מגדירים במפורש את תיבת העזר content-box למערכת הקואורדינטות של הצורה. במקרה כזה, כמות התוכן בציטוט המובלט מגדירה את הצורה שסביבה התוכן החיצוני יתעטף. המאפיין margin-top משמש כאן למיקום (היסט) של הציטוט, בלי קשר למיקום שלו בעץ ה-HTML.

שולי הצורה

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

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

האפקט דומה למה שאתם רגילים אליו מהשימוש במאפיין margin הרגיל, אבל shape-margin משפיע רק על המרחב סביב הערך shape-outside. הוא יוסיף ריווח מסביב לצורה רק אם יש מקום במערכת הקואורדינטות. לכן בדוגמה שלמעלה רדיוס העיגול מוגדר ל-40% ולא ל-50%. אם הרדיוס היה מוגדר ל-50%, העיגול היה תופס את כל המקום במערכת הקואורדינטות ולא היה נשאר מקום לאפקט של shape-margin. חשוב לזכור שהצורה מוגבלת בסופו של דבר ל-margin-box של הרכיב (הרכיב בתוספת ה-margin שמסביב). אם הצורה גדולה יותר וחורגת, היא תיחתך ל-margin-box ותתקבל צורה מלבנית.

חשוב להבין שהמאפיין shape-margin מקבל רק ערך חיובי אחד. אין לו סימון ארוך. מה זה בכלל shape-margin-top לעיגול?

הנפשת צורות

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

אפשר להוסיף אנימציה לרדיוסים ולמרכזים של צורות circle() ו-ellipse(), כל עוד הם מוגדרים בערכים שהדפדפן יכול לבצע להם אינטרפולציה. אפשר לעבור מ-circle(30%) אל circle(50%). עם זאת, אנימציה בין circle(closest-side) ל-circle(farthest-side) תגרום לדפדפן להיתקע.

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

.element:hover{
  shape-outside: circle(50%);
}

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

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

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

התאמת תוכן לצורה

הטיוטה הראשונית של מפרט הצורות ב-CSS כללה מאפיין shape-inside שאיפשר לעטוף תוכן בתוך צורה. היו אפילו הטמעות ב-Chrome וב-Webkit לזמן מה. אבל כדי לעטוף תוכן במיקום שרירותי בתוך נתיב מותאם אישית, נדרשים הרבה יותר מאמץ ומחקר כדי לכסות את כל התרחישים האפשריים ולמנוע באגים. לכן המאפיין shape-inside נדחה ל-CSS Shapes Level 2 וההטמעות שלו הוסרו.

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

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

המיקום של רכיבי ה-strut‏ .left-shape ו-.right-shape בחלק העליון של הקונטיינר חשוב, כי הם ימוקמו משמאל ומימין כדי לאגף את התוכן.

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}

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

אם הדפדפן לא תומך בצורות CSS, התוצאה תהיה אפקטים מכוערים שבהם כל התוכן נדחף למטה. לכן חשוב להשתמש בתכונה באופן של שיפור הדרגתי (progressive enhancement).

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

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

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

שיפור הדרגתי (progressive enhancement)

כדאי להתחיל בהנחה שלדפדפן אין תמיכה בצורות CSS, ולהוסיף את התמיכה כשמזהים את התכונה. Modernizr הוא פתרון טוב לזיהוי תכונות, ויש בדיקה של צורות CSS בקטע Non-core detects.

חלק מהדפדפנים מספקים זיהוי תכונות ב-CSS באמצעות הכלל @supports, בלי צורך בספריות חיצוניות. דפדפן Google Chrome, שתומך גם בצורות CSS, מבין את הכלל @supports. כך משתמשים בו כדי לשפר בהדרגה:

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

ליאה ורו כתבה בהרחבה על איך להשתמש בכלל ‎ @supports ב-CSS.

הבהרה לגבי החרגות של שירותי CSS

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

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

כלים לעבודה עם צורות CSS

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

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

‫Brackets: התוסף CSS Shapes Editor ל-Brackets משתמש במצב התצוגה המקדימה בזמן אמת של עורך הקוד כדי להציג שכבת-על של עורך אינטראקטיבי לעריכת ערכי צורות.

‫Google Chrome: התוסף CSS Shapes Editor ל-Google Chrome מוסיף לכלים למפתחים בדפדפן פקדים ליצירה ולעריכה של צורות. הוא מציב כלי עריכה אינטראקטיבי מעל הרכיב שנבחר.

לכלי הבדיקה ב-Google Chrome יש תמיכה מובנית בהדגשת צורות. מציבים את הסמן מעל רכיב עם מאפיין shape-outside והוא יואר כדי להמחיש את הצורה.

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

Polyfill: ‏Google Chrome הוא הדפדפן הגדול הראשון שכולל צורות CSS. בקרוב תהיה תמיכה בתכונה הזו ב-iOS 8 וב-Safari 8 של אפל. יכול להיות שספקי דפדפנים אחרים ישקלו להשתמש בו בעתיד. עד אז, יש polyfill של צורות CSS שמספק תמיכה בסיסית.

סיכום

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

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

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