סלקטורים ב-CSS3 שעובדים באינטרנט אקספלורר

במאמר הקודם למדנו על פסאודו אלמנטים ב-CSS3. כידוע, הסלקטורים, הפסאודו קלאסים והפסאודו אלמנטים לא עובדים באינטרנט אקספלורר 6,7 וכמובן 8. (באינטרנט אקספלורר 9 אמורה להיות תמיכה מלאה ב-CSS3 – נחכה ונראה). בדיוק בשביל זה יש לנו את Selectivizr.

Selectivizr הוא פתרון מבוסס JavaScript שמתלבש על ספריות JavaScript שונות – כמו jQuery או MooTools ומאפשר תמיכה בחלק מהסלקטורים של CSS3. איך זה עובד? פשוט מאד, בוחרים ספריה (או לוקחים את זו שגם ככה עובדים איתה) ואז מציבים את Selectivizr (שוקלת רק 4kb) ואז הכל עובד גם באקספלורר המאוס לסוגיו השונים.

בואו וניקח כדוגמא את הסלקטור nth-child. באופן טבעי, לא עובד באקספלורר, אבל כאן הוא יעבוד:


#selectme01 li:nth-child(3) {
color:red;
}

והנה הדוגמא החיה, אתם מוזמנים לסתום את האף ולפתוח את העמוד הזה באינטרנט אקספלורר:

  • פריט ראשון
  • פריט שני
  • פריט שלישי
  • פריט רביעי
  • פריט חמישי

איך עושים את זה? במקרה הזה השתמשתי בספרית NWMatcher שמאפשרת את כל הסלקטורים וכמובן ב-Selectivizr. באופן הבא:


<script type="text/javascript" src="http://www.internet-israel.com/internet_files/css3/nwmatcher-1.2.2.js"></script>
<script type="text/javascript" src="http://www.internet-israel.com/internet_files/css3/selectivizr.js"></script>

ו… זהו! אפשר להשתמש בכל הטוב שיש בסלקטורים של CSS3 גם באינטרנט אקספלורר.

חשוב לציין מספר דגשים:

1. לא כל ספריות ה-JavaScript תומכות בכל התכונות, בעמוד הראשון באתר Selectivizr יש רשימה של כל הסלקטורים הנתמכים.
2. Selectivizr תומך רק ב-CSS שמוטמע כ-link, לא ב-inline style.

במאמר הבא אנו נדון בתכונות חדשות שיש ב-CSS3 שמהן אפשר להנות ובראשן פינות עגולות וגרדיאנטים.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (2 הצבעות, ממוצע: 4.50 מתוך 5)

תגיות: פורסם בקטגוריה: CSS3

אל תשארו מאחור! יש עוד מה ללמוד!