זהו. המחשב והמסך חזרו מהטיפול אצל המגשר. כעת הם מדברים ביניהם בצורה נפלאה (את מי שזה מעניין – נגמרה המשחה הטרמית של המעבד, וזה כנראה גרם למסך לכבות).
אז כזכור, הייתי באמצע סדרה על כל מיני קישורי CSS שנזרקו לכיווני בזמן האחרון. המתקפה אינה מפסיקה, וגם ענייני CSS שצצו בעבודה העסיקו אותי, אז גם אותם אשלב בפוסט זה.
קישור אחד שקיבלתי דיבר על יישור אנכי (vertical-align) של טקסט. כולנו יודעים שישנו מאפיין CSS בשם vertical-align, המאפשר ליישר את גובה הטקסט עפ”י פרמטרים שונים (top, bottom,middle, אחוזים, או יחידות מידה). אם נתבונן בספסיפיקציה, נראה שהמאפיין הזה עובד במצבים מאד ספציפיים, ובצורה מאד ספציפית. למי מאיתנו שרגיל להשתמש ב-valign של הטבלאות, השימוש ב-vertical-align הוא לא כל כך טריויאלי. ישנו המאמר הזה, המתאר איך ליישר את הטקסט מבחינה אנכית, ע”י שימוש ב-3 div-ים. כמובן שה-CSS המתאים לרוב הדפדפנים אינו מתאים ל-IE, ולכן יש שם גם תוספת עבור IE. המאמר מתועד בצורה מאד פשוטה ומאירת עיניים. עם זאת, החלטתי שלפני שאני כותבת על העניין הזה אדבר עם סרג’, מאחר שאני לא בקיאה ברזי CSS והוא כן. ואכן הוא לא אכזב אותי, והוסיף לי מאמר נוסף בנושא. המאמר הזה מתועד קצת פחות מהקודם, אבל יש בו שתי דוגמאות נוספות למקרים פשוטים יותר. המקרה המתואר במאמר הקודם נמצא פה בשלב השלישי.
ועכשיו למשהו שהעסיק אותי בעבודה.
היתה לי טבלה (אני מרגישה צורך להדגיש – טבלה לצרכי תוכן, לא לצרכי layout…). השורה הראשונה שלה היתה צריכה להיות בגובה 20 פיקסלים. אז נתתי ל-class של ה-TR שלו גובה של 20 פיקסלים. אבל כשהרצתי את האתר – לא ראיתי שזה משפיע…
איזה כיף שיש firebug. התבוננתי באלמנט הזה ב-firebug, וראיתי המאפיין של הגובה ב-class הזה אכן פעיל. אבל ראיתי גם שיש מאפייני CSS שהוצמדו לכל ה-TD-ים בדף הזה, ושם הוגדר גובה של 28 פיקסלים (כלומר: td{height:28px}). לא חשדתי בזה בכלל, מפני ש-firebug הראה שהמאפיין הזה אינו פעיל (היה עליו קו חוצה). אבל בכל זאת מחקתי את מאפיין הגובה מה-TD, והפלא ופלא – השורה שלי קיבלה גובה של 20 פיקסלים! בהקשר הזה התוודעתי לראשונה לנושא ה-css specifity – איך לדעת איזה style גובר על איזה. לצורך כך קראתי שלושה מאמרים:אחד – המקיף מכולם – ב-smashing magazine. הוא מפנה לכמה מאמרים, שאחד מהם הואהסבר לשחקני פוקר. עוד מקום טוב לקרוא על זה הוא כמובןב-W3C. שני המאמרים הראשונים מזהירים שהנושא הוא מורכב. כפי שאני רואה את זה, הכללים הם די פשוטים, אבל בחיים האמיתיים לא תמיד ברור באיזה כלל לבחור… בגדול זה הולך כך: אם ניתן לאלמנט style בתוך התגית, ה-style הזה תמיד ינצח. אחריו בסדר העדיפות הוא style שניתן ל-ID, אחריו – style שניתן ל-class, ואחרון הוא stlye שניתן לאלמנט HTML. לפי הכללים האלה, מה שהיה צריך לנצח במקרה שלי הוא ה-style שניתן ל-class (ונראה שגם firebug חשב כך). אלא שיש לשים לב של מי ה-class הזה. במקרה שלי, ה-class היא של ה-TR, ואילו הגובה שאני רציתי לקבוע היה של ה-TD. לפי המאמר השני – ההסבר לשחקני פוקר – צריך קודם כל להסתכל על ה-style של האלמנט אותו אנו מעצבים, לפני שנכנסים לענייני קונפליקטים. אז איך פתרתי את הבעיה? מאחר שלא רציתי לשנות את הגובה של כל ה-TD-ים אלא רק את אלה של השורה הראשונה, קבעתי גובה ל-class רווח td. בכל מקרה, מומלץ לקרוא את המאמרים הנ”ל, ולו בשביל התרגיל המחשבתי שיש בהם 🙂 .
אז כזכור, הייתי באמצע סדרה על כל מיני קישורי CSS שנזרקו לכיווני בזמן האחרון. המתקפה אינה מפסיקה, וגם ענייני CSS שצצו בעבודה העסיקו אותי, אז גם אותם אשלב בפוסט זה.
קישור אחד שקיבלתי דיבר על יישור אנכי (vertical-align) של טקסט. כולנו יודעים שישנו מאפיין CSS בשם vertical-align, המאפשר ליישר את גובה הטקסט עפ”י פרמטרים שונים (top, bottom,middle, אחוזים, או יחידות מידה). אם נתבונן בספסיפיקציה, נראה שהמאפיין הזה עובד במצבים מאד ספציפיים, ובצורה מאד ספציפית. למי מאיתנו שרגיל להשתמש ב-valign של הטבלאות, השימוש ב-vertical-align הוא לא כל כך טריויאלי. ישנו המאמר הזה, המתאר איך ליישר את הטקסט מבחינה אנכית, ע”י שימוש ב-3 div-ים. כמובן שה-CSS המתאים לרוב הדפדפנים אינו מתאים ל-IE, ולכן יש שם גם תוספת עבור IE. המאמר מתועד בצורה מאד פשוטה ומאירת עיניים. עם זאת, החלטתי שלפני שאני כותבת על העניין הזה אדבר עם סרג’, מאחר שאני לא בקיאה ברזי CSS והוא כן. ואכן הוא לא אכזב אותי, והוסיף לי מאמר נוסף בנושא. המאמר הזה מתועד קצת פחות מהקודם, אבל יש בו שתי דוגמאות נוספות למקרים פשוטים יותר. המקרה המתואר במאמר הקודם נמצא פה בשלב השלישי.
ועכשיו למשהו שהעסיק אותי בעבודה.
היתה לי טבלה (אני מרגישה צורך להדגיש – טבלה לצרכי תוכן, לא לצרכי layout…). השורה הראשונה שלה היתה צריכה להיות בגובה 20 פיקסלים. אז נתתי ל-class של ה-TR שלו גובה של 20 פיקסלים. אבל כשהרצתי את האתר – לא ראיתי שזה משפיע…
איזה כיף שיש firebug. התבוננתי באלמנט הזה ב-firebug, וראיתי המאפיין של הגובה ב-class הזה אכן פעיל. אבל ראיתי גם שיש מאפייני CSS שהוצמדו לכל ה-TD-ים בדף הזה, ושם הוגדר גובה של 28 פיקסלים (כלומר: td{height:28px}). לא חשדתי בזה בכלל, מפני ש-firebug הראה שהמאפיין הזה אינו פעיל (היה עליו קו חוצה). אבל בכל זאת מחקתי את מאפיין הגובה מה-TD, והפלא ופלא – השורה שלי קיבלה גובה של 20 פיקסלים! בהקשר הזה התוודעתי לראשונה לנושא ה-css specifity – איך לדעת איזה style גובר על איזה. לצורך כך קראתי שלושה מאמרים:אחד – המקיף מכולם – ב-smashing magazine. הוא מפנה לכמה מאמרים, שאחד מהם הואהסבר לשחקני פוקר. עוד מקום טוב לקרוא על זה הוא כמובןב-W3C. שני המאמרים הראשונים מזהירים שהנושא הוא מורכב. כפי שאני רואה את זה, הכללים הם די פשוטים, אבל בחיים האמיתיים לא תמיד ברור באיזה כלל לבחור… בגדול זה הולך כך: אם ניתן לאלמנט style בתוך התגית, ה-style הזה תמיד ינצח. אחריו בסדר העדיפות הוא style שניתן ל-ID, אחריו – style שניתן ל-class, ואחרון הוא stlye שניתן לאלמנט HTML. לפי הכללים האלה, מה שהיה צריך לנצח במקרה שלי הוא ה-style שניתן ל-class (ונראה שגם firebug חשב כך). אלא שיש לשים לב של מי ה-class הזה. במקרה שלי, ה-class היא של ה-TR, ואילו הגובה שאני רציתי לקבוע היה של ה-TD. לפי המאמר השני – ההסבר לשחקני פוקר – צריך קודם כל להסתכל על ה-style של האלמנט אותו אנו מעצבים, לפני שנכנסים לענייני קונפליקטים. אז איך פתרתי את הבעיה? מאחר שלא רציתי לשנות את הגובה של כל ה-TD-ים אלא רק את אלה של השורה הראשונה, קבעתי גובה ל-class רווח td. בכל מקרה, מומלץ לקרוא את המאמרים הנ”ל, ולו בשביל התרגיל המחשבתי שיש בהם 🙂 .