26 באוג׳ 2012

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

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

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





CSS Selectors

סלקטורים משורשרים  - chain selectors

דוגמא:
.class1.class2{some-style: font:16px;}
ישפיע על אלמנט HTML אשר יש לו את שני הCLASSים
דוגמא:
<div class="class1 class2">some content</div>

סלקטורים אחים קרובים -  sibling selectors

דוגמא:
h2 + div{color : red;}
ישפיע על אלמנט HTML השני שבא  אחרי כותרת בלבד
דוגמא:
<h2>some content</h2>
<div>some content2</div>

סלקטורים אחים בכל מרחק -  sibling selectors

דוגמא:
h2 ~ h3{color : red;}
ישפיע על אלמנט HTML שקיים באותה הירכיה אחריו, לא משנה באיזה מרחק.
דוגמא:
<h2>some content</h2>
<div>some content2</div>
<h3> some content3 </h3> 


סלקטורים של Atributes

דוגמא:
input[type="text"]{border: solid 2px black;}
ישפיע על אלמנט HTML מסוג input שהוא עם attribute מסוג type עם ערך של טקסט
דוגמא:
<input type="text" />
<input type="password" />
<input type="radio" />

  • ניתן לחפש לחפש גם שם attribute בלי ערך לדוגמא:
 input[type]{border: solid 2px black;}

סלקטורים עם בן ישיר

דוגמא:
h2 > span{color : red;}
ישפיע רק על אלמנט HTML שנמצא בתוך תגית span שנמצאת בתוך כותרת מסוג h2, ובהירכיה ישירה.

דוגמא:
<h2><span> text will be in red</span> more text</h2>
<h2><div><span> wont be color in red</span></div> more text</h2>


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

היה קיים בדפדנים ישנים כגון אקספלורר 6, אך היה עובד רק על תגיות a, מ IE7 עובד על כל תגית גם לא בהירכיה אחרונה.

דוגמא למעבר עכבר שלא בהירכיה אחרונה:
h2:hover  span{color : red;}
ישפיע רק על אלמנט HTML שנמצא בתוך תגית span במעבר עכבר על כותרת h2.

דוגמא:
<h2><span> text will be in red</span> more text</h2>
<h2>><div><span> text will be in red</span></div> more text</h2>


סלקטור פסאדו first-child

מחזיר אלמנט ראשון בתוך הירכיה, השימוש הנכון בו הוא לבחירה של אייטם ראשון מתוך רשימה, או בטבלאות בחירה של תא ראשון בשורה,או בחירת שורה ראשונה בטבלה.

דוגמא:
ul>li:first-child{color : red;}
ישפיע רק על אלמנט li הראשון  שנמצא בתוך תגית ul, ובהירכיה ישירה.

דוגמא:
<ul>
    <li>first item of li in red</li>
    <li>second</li>
    <li>third</li>
</ul>



CSS Styles

עיצובים עם הגדרת מינמום ומקסימום גודל 

 max-width , min-width , max-height , min-height

דוגמא:
span{display:inline-block;min-width:100px;max-width:300px;}

גודל האלמנט יתחיל ב 100 פיקסלים גם עם גדול הטקסט קטן מ 100פיקסלים,ובמידה והטקסט יהיה ארוך מ 300 פיקסלים, הטקסט ישבור שורה.

position:fixed 

 ימקם לנו אלמנט במקום קבוע בדף, בלי להתחשב אם קיימים אלמנטים מתחת(טוב לפופאפים, פרסומות שזזות תוך כדי גלילה בצד)

דוגמא:
.banner{position:fixed;left:20px;top:10px;}

ה HTML עם CLASS  מסוג banner, יתמקם לנו קבוע בחלק העליון מצד שמאל,עם המרחקים שקבענו.

  צבע שקוף ל Border 

* ניתן להשתמש ב border בצבע שקוף.

דוגמא:

.banner{border:solid 2px transparent;}