פינות עגולות באתרי אינטרנט

המאמר לא מעודכן – כיום משתמשים ב-CSS3 כאשר התמיכה באינטרנט אקספלורר 8 ומטה נעשית באמצעות PIE CSS. אנא קראו את המאמר על תכונות CSS3 ששם יש הסבר כיצד לבצע פינות עגולות עם תמיכה באינטרנט אקספלורר מגרסה 8 ומטה (בגרסה 9 ומעלה יש תמיכה אינהרנטית בפינות עגולות). אל תשתמשו בשיטה המוסברת במאמר זה.

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

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

כיוון שהשיטה הקלאסית של פינות עגולות זה בהחלט כאב ראש, לפיכך בתקן CSS 3 התייחסו לעניין זה באופן פשוט ואלגנטי. שימו לב למשל ל-Div הבא:

הקוד נראה כך:

<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >
DIV בדיקה נפלא
</div>

אם יש לכם את שועל האש/כרום אז הכל נראה נפלא. אך אם אתם קוראים את האתר הזה באמצעות אינטרנט אקספלורר או אופרה, div הדוגמא לא נראה כלל עם פינות עגולות. התגית של פינה עגולה נתמך אך ורק על ידי ספארי/כרום ושועל האש אך לא על ידי אינטרנט אקספלורר ואופרה.
וגם אופרה. ישנו פתרון נהדר לאינטרנט אקספלורר בשם PIE שמאפשר פינות עגולות באמצעות CSS גם בדפדפן זה – מומלץ לנסות אותו.

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

פתרונות מבוססי JavaScript

פתרונות אלו מבוססים jQuery או JavaScript, היתרון שלהם הוא שהם פשוטים ליישום ולא פולשניים. החסרון שלהם הוא שמי שאין לו JavaScript לא יראה את הפינות העגולות.

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

פתרון יותר פשוט הוא Plugin ל-jQuery שנקרא jQuery Corners. הקוד שלו הוא מאד מאד פשוט וגם קל מאד להשתמש בו בלי ההסתבכויות של ה-Nifty corners. מהצד השני ה-API שלו (שמן הסתם זהה לזה של JQuery) יכול להרתיע את מי שלא מורגל.

שימו לב למשל לdiv הבא:

וזה הקוד שמאחורי העיצוב:

<p>  <script src="http://www.google.com/jsapi"></script> 
  <script>google.load("jquery", "1.2.6")</script> 
  <script src="http://www.atblabs.com/jquery.corners.min.js"></script> 
</p>

<div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

כשהמה שמודגש זה בעצם הפניה לכל ה-class עם שם rounded. וזו הזדמנות מצוינת להכנס למאמרים על ה-jQuery Selectors שכתבתי.

אלטרנטיבה CSSית

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

הפתרון מבוסס על הכנסת דגשים קטנים ומדורגים בכל פינה. הוא מכוער גם מבחינת CSS וגם מבחינת קוד אך הוא כמובן יותר גמיש מתמונות. הייתי יכול להכניס מדריך מסובך איך לעשות את זה, אבל בשביל זה יש אתרי אינטרנט שעושים את העבודה בשבילך. זה שאני משתמש בו בדרך כלל הוא http://www.spiffycorners.com.

סיכום

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