MARQUEE בעידן HTML5 ו CSS3

אלה מכם שכתבו HTML במשך זמן רב עשויים לזכור את האלמנט. זה היה אלמנט ספציפי לדפדפן שיצר כרזה של טקסט גלילה על פני המסך. אלמנט זה מעולם לא נוסף למפרט HTML והתמיכה בו השתנתה באופן נרחב בין דפדפנים. אנשים היו לעתים קרובות דעות מאוד חזק על השימוש של אלמנט זה - הן חיוביות ושליליות. אבל אם אתה אוהב או שונא את זה, זה היה לשרת את המטרה של יצירת תוכן כי overflowed גבולות תיבת גלוי.

חלק מהסיבה היא מעולם לא יושמה במלואה על ידי הדפדפנים, מלבד דעה אישית חזקה, היה זה נחשב אפקט חזותי וככזה, זה לא צריך להיות מוגדר על ידי ה- HTML, אשר מגדיר את המבנה. במקום זאת, אפקטים חזותיים או מצגות צריכים להיות מנוהלים על ידי CSS. ו- CSS3 מוסיף את מודול האוהל כדי לקבוע כיצד הדפדפנים מוסיפים את אפקט האוהל למרכיבים.

תכונות CSS3 חדשות

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

גלישה בסגנוןה גלישה בסגנון רכוש (שבו דנתי גם במאמר CSS Overflow) מגדיר את הסגנון המועדף לתוכן העולה על תיבת התוכן. אם תגדיר את הערך מארקי-ליין או בלוק התוכן שלך יחליק פנימה והחוצה שמאלה / ימינה (מארקי-ליין) או למעלה / למטה (בלוק).

בסגנון מארקימאפיין זה מגדיר כיצד התוכן יעבור אל התצוגה (ולצאת).

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

לבסוף, חלופי מחזיר את התוכן מצד לצד, מחליק קדימה ואחורה.

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

כיוון האוהלאתה יכול גם לבחור את הכיוון כי התוכן צריך לגלול על המסך. הערכים קדימה ו הפוך מבוססים על כיווניות של הטקסט כאשר גלישה בסגנון J מארקי-ליין וכן למעלה או למטה כאשר גלישה בסגנון J בלוק.

פרטים על כיוון מארקי

גלישה בסגנון	כיוון שפה	קדימה	הפוך
מארקי-ליין	ltr	שמאלה	ימין
	rtl	ימין	שמאלה
בלוק		למעלה	מטה

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

תמיכה בדפדפן של המאפיינים מארקי

ייתכן שיהיה עליך להשתמש בקידומת הספק כדי לקבל את רכיבי CSS של האוהל כדי לעבוד. הם כדלקמן:

CSS3	קידומת ספק
Overflow-x: marquee-line;	overflow-x: -webkit-marquee;
בסגנון מארקי	-וייטקיט-בסגנון מארקי
ספירת מחזה	- חזרות - חזרה על האוהל
מארק-כיוון: קדימה;	-webkit-marqueee-לכיוון: קדימה אחורה;
מהירות מארקי	-webkit-מהירות האוהל
לא שווה ערך	-webkit-marqueee-extra

המאפיין האחרון מאפשר לך להגדיר כמה גדול או קטן הצעדים צריך להיות כמו תוכן מגילות על המסך של האוהל.

כדי שהמערך שלך יעבוד, עליך למקם תחילה את ערכי הקידומת של הספק ולאחר מכן לבצע אותם עם ערכי מפרט CSS3. לדוגמה, הנה CSS עבור אוהל כי מגילות הטקסט חמש פעמים משמאל לימין בתוך תיבת 200x50.

{ רוחב: 200px; גובה: 50px; White-space: nowrap; overflow: hidden; overflow-x: -webkit-marquee; -webkit-marqueee לכיוון: קדימה; -webitit בסגנון marquee: גלילה; -webkit-מהירות האוהל: רגיל; -webkit-marqueee-extrament: קטן; -webkit-marqueee-repetition: 5; Overflow-x: marquee-line; מארק-כיוון: קדימה; בסגנון מרקי: גלילה; מהירות מארקי: רגילה; מחזה-משחק-ספירה: 5;}