Generated Content in IE8
היכולת להוסיף מידע לפני ואחרי אלמנטים.
בהמשך לפוסטים על
IE8 - נראה הפעם כיצד נוכל בעזרת content להוסיף מידע לפני ואחרי אלמנטים.
ב - IE8 נוספו מספר אלמנטים מעניינים שנותנים יכולות חדשות.
-
before, after
-
counter
-
quotes
נתחיל עם before, after
נוכל בעזרת CSS פשוט להוסיף לכל אלמנט שה - class שלו הוא note סוגריים לפני ואחרי
<style type="text/css">
div.note:before
{
content: '{';
}
div.note:after
{
content: '}';
}
</style>
נמשיך עם counter (שזה הרבה יותר מעניין)
הפעם אני אציג קוד ותוצאה ולאחר מכן אני אסביר איך זה עובד.
קוד:
<style type="text/css">
BODY
{
counter-reset: chapter; /* Create a chapter counter */
}
H1
{
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H1:before
{
content: "Chapter " counter(chapter) ". ";
}
H2
{
counter-increment: section;
}
H2:before
{
content: counter(chapter) "." counter(section) " ";
}
</style>
<div>
<h1>
Shlomo</h1>
<h2>
noam</h2>
<h2>
microsoft</h2>
<h2>
sela</h2>
<h1>
tomer</h1>
<h2>
yossi</h2>
</div>
תוצאה:
מעניין, לא ?
אז איך זה עובד.
בעזרת counter-reset אפשר להגדיר סוג של משתנים שמקבלים את הערך 0 (כברירת מחדל)
בעזרת counter-increment מוספים מספר למשתנה.
בעזרת before מדפיסים ומקדמים את המשתנה.
ונסיים עם quotes
בעזרתו נוכל לתת בצורה אוטומטית גרשיים לפי תחילת ציטוט (למשל)
<style>
/* Define quote characters */q
{
quotes: '"' '"';
}
/* Define pseudo-class triggers */q:before
{
content: open-quote;
}
q:after
{
content: close-quote;
}
</style>