לפעמים יש פרוייקטים שנראים פשוטים – אין בהם הרבה אתגרים, ואפשר לעשות אותם בטכניקות שכבר השתמשנו. אבל אני מחפשת אתגר תכנותי. נכון שיותר קל למחזר דברים שכבר עשינו – וזה גם יותר מהיר (לרווחת מנהלת הפרוייקטים שלנו 🙂 ), אבל זה גם משעמם…
אז בפרוייקט ננו צ’נלס , כבר התחלתי עם אתגר, בזה שהייתי צריכה ליצור פיד בצורת spezify. אבל התברר שהפרוייקט הזה טומן בחובו שני אתגרים נוספים, בתחום ה-CSS. על הראשון אדבר היום, ועל השני – בפוסט עתידי בע”ה.
הראשון היה אתגר שהצבתי לעצמי: לא להוסיף אלמנטי HTML ללא סיבה סמנטית. פירוש: כל עיצוב יש “להלביש” על ה-HTML הקיים, ולא ליצור אלמנט חדש רק כדי לקבל את העיצוב הרצוי. היו להחלטה הזו שתי סיבות: הראשונה, אידיאולוגית: HTML נועד להצגת טקסט, ולא לעיצוב. עבור עיצוב קיים CSS. השניה, פרקטית: wordpress מכיל פונקציות רבות שכבר מייצרות את ה-HTML הרצוי (למשל בסרגלי ניווט, או למשל בברים צדדיים), ואם ארצה להוסיף HTML למה שכבר נוצר, אצטרך להתערב בתהליך היצירה, וזה יגרום לי פחות להנות ממה שיש ל-wordpress להציע.
ובכן, לא עמדתי לגמרי באתגר הזה, כי היה מקום שבו הייתי חייבת להוסיף li. אבל היו שני מקומות שהתעקשתי על שימוש במה שקיים:
כפי שניתן לראות, בין כל פריט, ישנו מפריד בדמות נקודות אנכיות. בתחילה חשבתי שזה יהיה פשוט border של פריט. אבל כל פריט הוא li שבתוכו a ל-li את הרקע של הפסים, כך שהגובה שלו הוא ממש לא מתאים ל-border שאני צריכה. ל-a אני נותנת את הרקע של הצבע (ב-hover), וכפי שניתן לראות, צריך להיות פיקסל של לבן בין הרקע הצבעוני למפריד. אז ה-border לא יכול להיות של ה-a. מה נעשה????
בדיוק כמה ימים קודם פגשתי מאמר שמדבר על CSS generated content באמצעות הפסוידו-קלאסים של after ו-before. ה-pseudo class-ים האלה מאפשרים לתת עיצוב לאלמנט (לא-קיים) שאחרי או לפני האלמנט שאליו מצמידים אותו. החלטתי להשתמש בזה כך:
#header #access li.menu-item:before {content:””;position: absolute;width:1px;top: 38px;left:-3px;border-right: 1px dotted #bfbfbf;height:23px;}
פשוט נתתי לאלמנט הזה את הגובה המתאים, ויצרתי לו border. מיקמתי אותו אבסולוטית כדי שישב בנוחות בין שני li-ים, ו- זה עבד!
כלומר, זה עובד בפיירפוקס, כרום, וב-IE8 ומעלה. זה לא עובד ב-IE7.
חיפשתי רבות בגוגל פתרון לאקספלורר 7, ונתקלתי במאמר על before ו-after באקספלורר 7. ניסיתי ליישם את מה שהיה כתוב שם, אבל משום מה זה לא עבד – אולי בגלל ה-position:absolute. מכל מקום לא רציתי להשקיע בזה זמן, כי גם הפתרון הזה כרוך בהתערבות ב-HTML (אמנם לא יוצרים ממש תגית חדשה, אלא רק תגית הערה, אבל זה עדיין פוגם בשני העקרונות שמניתי לעיל). לכן שוחחתי עם המעצבת, והיא אישרה שב-IE7 לא יהיו הבורדרים הללו. תודה קרן!
גם המאמר הזה מדבר על יצירת מפרידים בין אלמנטים ע”י שימוש ב-before, וגם הוא לא מתרגש מכך שזה לא עובד בכל הגרסאות של אקספלורר.
כנראה שזה נושא חם עכשיו, משום שגם קריס קוייר מ-CSS Tricks כתב מאמר על זה לפני כמה ימים. הוא דווקא טיפל במשהו שאני לא חשבתי עליו – אייקונים קטנים לפני טקסט (דוגמת מה שאני עשיתי בפיד ה-RSS שדיברתי עליו לפני כמה ימים, שהיה צריך לתת אייקון אחר לפי המקור של הפיד). הוא קורא לזה פסוידו-ספרייט. אילו קראתי את זה קודם, יתכן שהייתי מיישמת את זה באתר. אבל עכשיו אנחנו כבר לקראת סיום הפרוייקט, ואין לי זמן/חשק לחזור ולעשות את זה אחרת…. אולי בפרוייקט הבא 🙂
עדכון: ועוד מאמר בנושא, שמתברר שהוא אצלי בדלישס כבר הרבה זמן, ושכחתי ממנו: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
ועוד דבר חשוב ששכחתי לומר: חיסרון מאד גדול של שימוש ב-before ו-after זה שהם לא מופיעים ב-firebug, וקשה מאד לדבג אותם משום כך.