מכונית נוסעת ב-CSS

ב-sitepoint פורסם לאחרונה מאמר על מיקום תמונת רקע ע”י שימוש באחוזים. מסתבר שזהו מאמר המשך, כאשר המאמר הקודם סקר את כלל נושא המיקום של תמונות רקע. מאמר ההמשך הוא מתקדם יותר, ומראה מקרי קיצון מעניינים (שכשאסביר אותם תבינו את שם כותרת הפוסט).
המאמר הראשון מסביר שישנן שלוש דרכים לקבוע מיקום של תמונת רקע:
1) מילות מפתח– background-position: top right
2) פיקסלים – background-position: 0px 0px 3)
3) אחוזים – background-position:80% 50%
השימוש במילות מפתח הוא הנפוץ ביותר – מפני שקל מאד להבין אותם, ומפני שהם עובדים בדיוק אותו דבר בכל הדפדפנים. החיסרון היחיד שלהם הוא אי הגמישות שלהם: יש רק 3 מיקומים אופקיים ו-3 מיקומים אנכיים, כך שיש רק 9 אפשרויות מיקום לתמונת רקע בשימוש במילות מפתח.
השימוש בפיקסלים הוא כנראה השימושי ביותר – ברגע שמבינים שהספירה נעשית מהפינה השמאלית העליונה הן של התיבה המכילה והן של התמונה, לא קשה לנבא איפה יופיע הרקע. יתרון נוסף הוא שברקעים מתקדמים, למשל רקעים מתחלפים המשנים מיקום, לא קשה ליצור לולאה המבוססת על הזזת מיקום בפיקסלים.
אחוזים הם הקשים ביותר להבנה, ואני מודה שגם אני לא בטוחה שהבנתי את הנושא לעמקו. את התאוריה של זה אפשר לסכם במשפט אחד: כל אחוז מתייחס למיקום יחסי גם בתמונה וגם התיבה המכילה. גם המחבר אומר שהיה לו קשה לתפוס מה זה אומר, ולכן הוא צייר תמונה שעזרה לו להבין (אבל לי היא לא עזרה…).
האמת היא שאני לא יודעת מתי צריך להשתמש באחוזים – כלומר, מתי שימוש במילות מפתח או פיקסלים אינו מספק. לכן את המשך המאמר שלו קראתי יותר כקוריוז מאשר כמדריך – יש לו שם הדגמה של משחק עם מספרי אחוזים – משעשע ביותר.
מאמר ההמשך היה בכלל בלתי פרקטי בעיני (גם שם המאמר מרמז שהמחבר מודע לביזאריות שלו), ואני מביאה אותו כאן כדי להראות משהו מגניב ביותר: יצירת אפקט של מכונית נוסעת, ע”י שימוש באחוזים לתמונות רקע. למה זה בלתי פרקטי? כי מדובר על אחוזים שעולים על 100%, ויותר גרוע – אחוזים שליליים!! ואני שואלת – למה?? למה להגדיר מיקום כזה? באמת נראה שהסיבה היחידה היא ליצור את האפקט הנ”ל.
פתחו את הקישור הבא בחלון דפדפן מוקטן למדי, ואז הגדילו את החלון:
http://www.sitepoint.com/examples/stretchy/test.php
נכון מגניב?
זה נוצר ע”י 3 תמונות רקע (העיר, קהל הרקע, והקהל מלפנים), כשהמיקום של כל אחת הוא יותר שלילי מהתמונה שמאחוריה (-100%, -250%, -550% בהתאמה). ללימוזינה ניתן מיקום של 150%, וזה מה שיוצר את התחושה שהיא נכנסת ויוצאת מצד ימין של החלון.
בסוף המאמר המחבר מנסה בכל זאת לתת כיוונים פרקטיים לשימוש כזה – למשל כותרות אתרים עם מספר שכבות שקופות למחצה, כך שאפילו אפשר ליצור שוני גדול בצפיה באותה כותרת ברזולוציות שונות.
נסיים במשהו חדש וחשוב מאד בעיני מבית sitepoint: אנציקלופדיית CSS. זה אתר שמתיימר להוות אוסף מושלם של כל מה שקשור ל-CSS. כל אלמנטי CSS מסדרים שם לפי נושאים (אך אפשר למצוא אותם גם ע”י מנוע החיפוש אם לא יודעים לאיזה נושא האלמנט שייך). כל אלמנט מקבל דף עם מבנה זהה: הסבר על האלמנט והשימוש בו; פירוט הערכים שהוא יכול לקבל יחד עם הסברים על כל ערך; והכי חשוב – compatability: איך דפדפנים שונים מיישמים את האלמנט. משיטוט קצר ראיתי שההסברים שהם נותנים לכל אלמנט הם גם תמציתיים וגם מובנים (שילוב שלא תמיד קל להגיע אליו), ויש טבלה תמציתית וצבעונית (לא יודעת אם היא שמישה לעוורי צבעים) המתארת את ההתאמה של כל דפדפן לאלמנט. בכל דף גם ניתן להגיב, כך שאם לאחד הגולשים ישנו מידע שלא הוזכר באתר – הוא יכול לתרום אותו.
נסו ותהנו!