במאמר הקודם למדנו על פסאודו אלמנטים ב-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="https://internet-israel.com/internet_files/css3/nwmatcher-1.2.2.js"></script>
<script type="text/javascript" src="https://internet-israel.com/internet_files/css3/selectivizr.js"></script>
ו… זהו! אפשר להשתמש בכל הטוב שיש בסלקטורים של CSS3 גם באינטרנט אקספלורר.
חשוב לציין מספר דגשים:
1. לא כל ספריות ה-JavaScript תומכות בכל התכונות, בעמוד הראשון באתר Selectivizr יש רשימה של כל הסלקטורים הנתמכים.
2. Selectivizr תומך רק ב-CSS שמוטמע כ-link, לא ב-inline style.
במאמר הבא אנו נדון בתכונות חדשות שיש ב-CSS3 שמהן אפשר להנות ובראשן פינות עגולות וגרדיאנטים.