5 דברים שאפשר לעשות ב-css אם לא תומכים ב-ie7

סקרנו בעבר את הדברים שאפשר לעשות ב-css, בהנחה שאקספלורר 6 עבר מהעולם. הדפדפן הבא בתור להפסיק את התמיכה בו הוא אקספלורר 7. אמנם אקספלורר 7 לא מת רשמית, אך אחוזי השימוש בו נמוכים ביותר. מה אפשר לעשות ב-css אם מסירים את התמיכה באקספלורר 7?

1. תצוגת טבלה

כל מי שהתחיל לפתח אתרים באמצע העשור הקודם יודע ש״טבלאות זה רע״. כלומר, רע להשתמש בטבלה כדי לעמד את הדף, במקום להשתמש בדיבים וב-css. מה אם היינו יכולים להשתמש בתצוגת טבלה כדי לעמד את הדף, מבלי להשתמש בטבלאות, אלא בדיבים ובשאר אלמנטי המבנה הסמנטיים של html5? לשם כך אפשר להשתמש ב-display:table.

  • display: table - מחקה את תצוגת אלמנט table
  • display: table-cell - מחקה את תצוגת אלמנט td

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

דוגמה של הצפות לעומת שימוש ב-display:table
דוגמה של הצפות לעומת שימוש ב-display:table

2. אלמנטים מדומים

בעבר כתבתי פוסט על אלמנטים מדומים ומה שאפשר לעשות איתם. בקצרה, בכל פעם שאתם רואים before ו-after ב-css, זהו אלמנט מדומה. אלמנטים אלו יכולים לנקות את ה-html שלכם מאלמנטי span ריקים, והם מאוד נוחים לשימוש.

3. מודל קופסה border-box

במודל הקופסה הרגיל הפדינג והגבולות מתווספים לרוחב ולגובה של האלמנט. למשל:

.myelement {
  width: 500px;
  padding: 10px;
  border: 1px solid black;
}

בקוד הנ״ל רוחב האלמנט יהיה 522 פיקסלים, כלומר: 500 רוחב + 10 פדינג מכל צד + 1 גבול מכל צד. אם נוסיף לסלקטור הנ״ל את השורה הבאה:

box-sizing: border-box;

הרוחב של האלמנט ישאר 500 פיקסלים - הפדינג והגבולות ייכנסו פנימה.

לפעמים בהגדרת רוחב מבוססת אחוזים זהו המודל היחיד שאפשר להשתמש בו. למשל, אלמנט textarea, שנגדיר לו רוחב של 100% - במודל הקופסה הרגיל רוחבו יהיה 100 אחוז ועוד 2 פיקסלים - בהנחה שיש גבול של פיקסל אחד מכל צד. שימוש ב-border-box יכול לפתור את הבעיה. יש שמחילים את המודל הזה על כל האלמנטים במסמך בעזרת סלקטור *.

4. תצוגת אינליין-בלוק

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

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

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

5. קיצור טקסט ארוך עם שלוש נקודות

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

אם כל מה שאתם רוצים לעשות הוא לוודא שהטקסט לא יתפרס על שתי שורות, תוכלו להשתמש בשלושה כללי css כדי לפתור את הבעיה:

  1. white-space:nowrap - מוודא שהטקסט לא עובר לשורה חדשה
  2. overflow:hidden - מוודא שהטקסט החורג מרוחב האלמנט יוסתר
  3. text-overflow:ellipsis - יוסיף שלוש נקודות היכן שהטקסט נחתך, אם הטקסט באמת נחתך

בעוד ששני הכללים הראשונים עובדים בכל הדפדפנים - הוספת שלושת הנקודות תעבוד רק בדפדפנים מודרניים (כולל אקספלורר 9 ומעלה). שימו לב שצריך גם להוסיף שורה עם קידומת ms כדי שזה יעבוד באקספלורר. ראו דוגמה שהכנתי ב-codepen.

<p class="ellipsis">הטקסט שמופיע בפסקה זו ייחתך לאחר שלא יהיה לו יותר מקום בשורה. נסו לשנות את גודל החלון ותראו שהמשפט מקבל סימן של שלוש נקודות היכן שהוא נחתך.</p>
p.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
Screen Shot 2013-12-17 at 18.53.28
הטקסט יחתך לפי רוחב האלמנט ובסופו יהיו שלוש נקודות. (לחצו לצפיה בדוגמה החיה ב-codepen)

תגובות

נעול לתגובות.