14 באוק׳ 2012

דברים שנתמכים ב CSS מאקספלורר 8 - שלא הכרתם


IE7 new support
אקספלורר 7 איבד ומאבד אחוזי שימוש בשנה האחרונה. וברב האתרים התחיל לרדת מתחת ל 5 אחוזי שימוש מכלל הגולשים, מה שמאפשר לשקול לבטל את התמיכה בו.
(IE = INTERNET EXPLORER)

הנה ריכוז של חלק מהדברים החדשים שנתמכים מאקספלורר 8 ומעלה וכמובן בשאר הדפדפנים האחרים, שכדאי שתכירו.





המאמר הזה הינו מאמר המשך ל דברים שנתמכים ב CSS מאקספלורר 7 - שלא הכרתם, לכל מי שלא קרא אותו לפני כן אני ממליץ לקרוא אותו. ישנם הרבה דברים מגניבים שנתמכים מאקספלורר 7, שהמון אנשים לא מכירים.

אז בואו נתחיל!

CSS Styles

הגדרות DISPLAY חדשות

החשוב מביניהם, inline-block, שמאפשר לתת גדלים רוחב וגובה לאלמנט, ולהתהנהג כביכול כאלמנט טקסטואלי. דבר  המאפשר זרימה של אלמנטים בצורה שהטקטס מתנהג עם יתרונות של מתן נפח לאלמנטים כמו באלמנטים מסוג block, וכל זה עם הימנעות בשימוש ב floats. אומנם inline-block נתמך כבר באקספלורר 6 ו 7, אך רק לאלמנטים שהברירת מחדל שלהם היו inline כגון span,a,label. החל מאקספלורר 8 נתמך על כל סוגי האלמנטים.
בנוסף נתמכים בצורה מלאה, האפשריות הטבלאיות (table-caption,table-cell,table-column,table-column-group,table-,footer-group,table-header-group,table-row,table-row-group),מה שמאפשר ליצור טבלאות ב divים וכו, ולהשתמש ביתרונות שלהם, ולהימנע מהחסרונות שלהם, ומבחינה סמנטית לכתוב HTML נכון.

דוגמא:
div{displayinline-block;}


הגדרות OUTLINE לכל התגיות (לא רק לתגית a)

outline הוא העיצוב המקוקו שאתם נתקלים במעבר/לחיצה על תגיות A. ה outline, מתנהג ברובו דומה להגדרות ה border, הכתיבה של הערכים שלו זהה ל border. ההבדל ביניהם שה outline בשונה מהborder אינו תופס נפח בדף HTML ואינו חלק מה box-model. השימוש העיקרי שאני משתמש בoutline כיום, הוא מתן תמיכה חלקית למשהוא שיהיה דומה לצל באקספלורר 8, כאשר לא משפיע על גודל האלמנטים בדף (בדומה לצל).

דוגמא:
div{outlinesolid 3px gray;}




הצגת תאים רקים בטבלה

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

דוגמא:
table td{empty-cells: show;}


אפשריות פסאודו קלאס/אלמנט חדשות שנתמכות החל מאקספלורר 8

* מי שלא מכיר פסאודו קלאס/אלמנט מוזמן לקרוא את המאמר הבא - הכל על פסאודו Pseudo Class\Element ב CSS.

סלקטור פסאודו focus

מאפשר לכם לדעת שאתם נמצאים בפוקוס על אלמנט מסוים, משתמשים בזה בדרך כלל בפקדים (input),
דוגמא:
input[type="text"]:focus{background-color: yellow;}

ישפיע רק על אלמנט input מסוג טקסט שנמצא בפוקוס.

סלקטור פסאודו before & after

מאפשרים ליצור אלמנטים וירטואלים ביחס לאלמנט מסוים.

דוגמא:
div:before{content:"*"; border: solid 1px black; background-color:green;}

יצור לנו אלמנט בתוך ההתחלה של הdiv, עם תוכן טקסטואלי *, border שחור וצבע רקע ירוק.
מאמר מורחב על פסאודו אלמנט מהסוג הזה - פסאודו אלמנט before & after והעוצמה שחבויה בהם!

סיכום: אלה הדברים החשובים שכדאי תשכירו שנתמכים החל מאקספלורר 8, ישנם דברים נוספים כגון ערך inherit  ,border-spacing, caption-side, clip ועוד כמה שפחות רלונטים לשימוש היום יומי ולכן נמנעתי מלציינם.