6 דברים שאפשר לעשות ב-css אחרי סוף עידן ie6

והרי החדשות: אקספלורר 6 חלף מהעולם. אפילו בישראל גולשים בו רק 1.6% מהגולשים. בתור בוני אתרים, יכול להיות שכבר מזמן הפסקתם לבדוק את האתרים שלכם בדפדפן הזה. בכל אופן, העלמותו של ie6 מאפשרת לנו לעשות עוד כמה דברים ב-css.

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

סלקטורים מתקדמים

סלקטורים מאפשרים לנו לבחור את האלמנטים שאנחנו רוצים לעצב. לפעמים אנחנו מוסיפים class או id כדי שנוכל לבחור אלמנט מסויים. עם הסלקטורים המתקדמים אפשר להזדקק קצת פחות לשני אלה.

1. סלקטור בן

כולנו רגילים להשתמש בסלקטור הצאצא 95% מהזמן. כשאנו כותבים משהו כמו:

#main_nav a{
  color:#333;
}

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

#content>div{
  float:right;
}

2. סלקטור attribute

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

א. עיצוב שדות טקסט באופן מסויים:

 input[type=text]{
  width:200px;
 }

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

html[lang=en] #content>div{
  float:left;
}

ג. עיצוב שונה לקישורי הורדה של קבצי pdf:

a[href$=".pdf"]{
  background:url(pdf.png) right 0 no-repeat;
  padding-right:20px;
}

3. סלקטור first-child

סלקטור לבחירת הבן הראשון בלבד. אמנם לא בתמיכה מושלמת באקספלורר 7 (לא עובד אם תוסיפו בן ראשון בג'ייקוורי), אך עדיין שווה. לדוגמה, בסרגל ניווט אופקי שבו יש קו מפריד רק בין הפריטים:

#main_nav li{
border-right:1px solid #333;
}
#main_nav li:first-child{
border:none;
}

4. סלקטור אח

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

p{
text-indent:20px;
}
h3+p,h2+p,h1+p{
text-indent:0;
}
  

כללי עיצוב

5. רוחב/גובה מינימלי/מקסימלי

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

  #container{
  min-height:400px;
  }

6. תמונות png-24

אי התמיכה של אקספלורר ב-png-24 היתה אחד הדברים המתסכלים ביותר בדפדפן הזה. כדי להתמודד עם הבעיה אפשר היו כמה פתרונות, אחד מהם הוא להשתמש בAlphaImageLoader - מה שמכביד מאוד על הביצועים של כל האקספלוררים. אם אתם עושים שימוש ב-fancybox, בסוף קובץ ה-css של הפלאגין יש הרבה שורות כאלו:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale');

מומלץ בחום להסיר את כל כללי ה-AlphaImageLoader מ-fancybox. הם לא נחוצים יותר בעולם שאחרי אקספלורר 6.

אקספלורר 6 - סופו של עידן

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