אלו מכם שכותבים HTML זמן רב עשויים לזכור את האלמנט. זה היה אלמנט ספציפי לדפדפן שיצר כרזה של גלילת טקסט על פני המסך. אלמנט זה מעולם לא התווסף ל HTML המפרט והתמיכה בו השתנו מאוד בין הדפדפנים. לאנשים היו לעיתים קרובות דעות חזקות מאוד לגבי השימוש באלמנט זה - חיובי ושלילי. אך בין אם אהבתם או שנאתם אותו, הוא אכן שירת את המטרה להפוך תוכן שעולה על גבולות התיבה.
חלק מהסיבה שהוא מעולם לא יושם במלואו על ידי הדפדפנים, מלבד דעה אישית חזקה, היה זה זה נחשב לאפקט חזותי וככזה, אין להגדיר אותו על ידי ה- HTML שמגדיר את ה- מִבְנֶה. במקום זאת, אפקטים חזותיים או מצגתיים צריכים להיות מנוהלים על ידי CSS. ו- CSS3 מוסיף את מודול המרקיזה כדי לשלוט באופן שבו הדפדפנים מוסיפים את אפקט מרקיזה לאלמנטים.
מאפייני CSS3 חדשים
CSS3 מוסיף חמישה נכסים חדשים כדי לסייע בשליטה על הצגת התוכן שלך בריקוד: בסגנון הצפה, בסגנון מרקיזה, ספירת משחקי מרקיזה, כיוון מרקיזה ומהירות מרקיזה.
בסגנון הצפה
המאפיין בסגנון הצפה (עליו דנו גם במאמר הצפת CSS) מגדיר את הסגנון המועדף על תוכן העולה על תיבת התוכן. אם תגדיר את הערך ל- marquee-line או לחסימת marquee התוכן שלך יגלוש פנימה והחוצה שמאלה / ימינה (marquee-line) או למעלה / למטה (block marquee).
בסגנון מרקיזה
מאפיין זה מגדיר כיצד התוכן יעבור לתצוגה (והחוצה). האפשרויות הן גְלִילָה, החלק והחלף. הגלילה מתחילה עם התוכן לגמרי מחוץ למסך, ואז הוא עובר על פני השטח הגלוי עד שכולו שוב מחוץ למסך. השקופית מתחילה עם התוכן לגמרי מחוץ למסך ואז הוא עובר לרוחב עד שהתוכן עבר לגמרי למסך ולא נותר עוד תוכן להחליק על המסך. לבסוף, חלופי מקפיץ את התוכן מצד לצד, מחליק קדימה ואחורה.
אוהל-משחק-ספירה
אחד החסרונות בשימוש באלמנט MARQUEE הוא שהמרקיזה לעולם לא נעצרת. אך עם ספירת המאפיינים-משחק-סגנון המאפיינים בסגנון תוכלו להגדיר את המרקיזה לסובב את התוכן לסירוגין למספר פעמים ספציפי.
כיוון מרקיזה
ניתן גם לבחור בכיוון שהתוכן אמור לגלול על המסך. הערכים קדימה ואחורה מבוססים על כיווניות הטקסט כאשר סגנון הצפה הוא קו-מארק ומעלה או מטה כאשר סגנון-הצפה הוא חסימת מארק.
פרטי כיוון מארק
בסגנון הצפה |
כיוון שפה | קָדִימָה | לַהֲפוֹך |
|---|---|---|---|
קו מרקיזה |
ltr | שמאלה | ימין |
| rtl | ימין | שמאלה | |
חסימת מרקיזה |
לְמַעלָה | מטה |
מהירות מרקיזה
מאפיין זה קובע כמה מהר התוכן גולל על המסך. הערכים איטיים, נורמליים ומהירים. המהירות בפועל תלויה בתוכן ובדפדפן שמציג אותו, אך הערכים חייבים להיות איטיים הם איטיים מהרגיל וזה איטי מהיר.
תמיכה בדפדפן של מאפייני מארק
יתכן שתצטרך להשתמש קידומות ספק כדי לגרום לאלמנטים של מארזי CSS לעבוד. הם כדלקמן:
| CSS3 | קידומת הספק |
|---|---|
הצפה- x: קו מרקיזה; |
הצפה- x: -webkit-marquee; |
בסגנון מרקיזה |
-סגנון webkit-marquee |
אוהל-משחק-ספירה |
-חזרה על רשת מארק-מארז |
כיוון מרקיזה: קדימה | לאחור; |
-webkit-marquee-direction: קדימה | אחורה; |
מהירות מרקיזה |
-מהירות webkit-marquee |
| אין מקבילה | - תוספת של webkit-marquee |
המאפיין האחרון מאפשר לך להגדיר עד כמה הצעדים צריכים להיות גדולים או קטנים כאשר התוכן גולל על המסך בחגיגה.
על מנת שהמרקיזה שלך תעבוד, עליך למקם תחילה את ערכי הקידומת של הספק ואז לעקוב אחריהם עם ערכי המפרט CSS3. לדוגמה, הנה ה- CSS למרקיזה שמגלילה את הטקסט חמש פעמים משמאל לימין בתוך תיבה 200x50.
{
רוחב: 200 פיקסלים; גובה: 50 פיקסלים; חלל לבן: nowrap;
הצפה: מוסתרת;
הצפה- x: -webkit-marquee;
-כיוון-מארק-כיוון: קדימה;
-סגנון webkit-marquee: גלילה;
-מהירות מהבית - מארק: רגילה;
- תוספת webwit-marquee: קטנה;
-Webkit-Marquee-repetition: 5;
הצפה- x: קו מרקיזה;
כיוון מרקיזה: קדימה;
בסגנון מרקיזה: גלילה;
מהירות מרקיזה: רגילה;
מרקיז-משחק-ספירה: 5;
}