מארק ב- CSS - מדריך למתחילים
Marquee הוצג לראשונה ב- Internet Explorer והיה פופולרי מאוד בשנות ה -90 לפני W3C בסופו של דבר החליט להוציא אותו מהאלמנט הסטנדרטי HTML בשל בעיות השימושיות. מעצבי אתרים עודדו שלא להשתמש בתג.
באופן מפתיע, האוהל עושה עכשיו קאמבק, לא בתג פורמט כמו שהוא עשה, אבל מודול CSS. מודול זה זמין כחלק מפרט Webkit CSS ו- W3C עובד כרגע על מודול דומה. עם זאת, מאחר שגירסה W3C עדיין בשלב המלצה המועמד, זה עדיין לא ישים. אז, בשלב זה, אנחנו רק לכסות את אחד מפרט Webkit.
התחביר
קודם כל, את האוהל ניתן להגדיר באמצעות תחביר קצרנות.
-webkit-marquee: [כיוון] [תוספת] [חזרה] [סגנון] [מהירות]
כל אחד מהערכים הנדרשים בתחביר לעיל, אני מאמין, הוא די מובן מאליו, או שאתה יכול למצוא אותם מוסברים היטב בתיעוד זה. אז, אם אתה רוצה לחפור עמוק יותר איך זה תחביר זה הולך לעבוד אתה תמיד יכול להתייחס התיעוד הראשון.
לאחר מכן, הצטרף אלינו כפי שאנו ממשיכים ליצור כמה דוגמאות אמיתיות ולראות איך זה בפעולה.
דוגמה 1: גלילה של הטקסט
בסדר, בדוגמה הראשונה אנו ניצור את התנועה הקלאסית של האוהל כי יש להעביר את הטקסט מימין לשמאל.
בואו ניצור את סימון הטקסט שלנו, כמו להלן:
סוכריות על מקל, לימון, טיפות לימון, jujubes, breadakeake, טארט, ליקריץ, סומסום, snaps,.
לאחר מכן הגדר את האוהל עם התחביר הבא.
-webkit-marqueee: אוטומטי בינוני בינוני גלילה אינסופית; overflow-x: -webkit-marquee;
כאשר כיוון האוהל מוגדר אוטומטי, זה יהיה כברירת מחדל לעבור מימין לשמאל; לחלופין ניתן לשנות ערך זה ל שמאלה. כמו כן שים לב כי overflow-x יש להגדיר את המאפיין -webkit-marqueee כך התוכן תמיד לפעול כמו אחד. אם תשמיט את המאפיין הזה, הטקסט לא ימשיך הלאה.
ראה את ההדגמה.
דוגמה 2: קפיצה קדימה ואחורה
בדוגמה השנייה ננסה לתת סגנון שונה לאוהל. הפעם אנו משתמשים חלופי במקום גלול ולשנות את הערך לכיוון ימין. בדרך זו, האוהל יעבור משמאל לימין ואז להקפיץ קדימה ואחורה.
-webkit-marqueee: אוטומטי בינוני אינסופי חלופי רגיל; overflow-x: -webkit-marquee;
ראה את ההדגמה
דוגמה 3: העברת הטקסט כלפי מעלה
ובדוגמה האחרונה, נשנה את כיוון האוהל לנוע כלפי מעלה. יש שני כיוון ערכים לעשות זאת; אתה יכול לשנות את הערך ל למעלה או קדימה.
אישית אני לא מקבל למה Webkit סיפק שני ערכים כי בעצם לעשות את אותו הדבר מאז אני חושב שזה יכול לגרום לבלבול עבור אנשים מסוימים.
-webkit-marquee: עד בינוני בינוני גלילה אינסופית; overflow-x: -webkit-marquee;
ראה את ההדגמה
יתר על כן, יש לי כמה דוגמאות נוספות, אבל הם יהיו המכריע אם כולם מוסברים כאן.
אבל, אתה יכול להציג את כל ההדגמה ולהוריד את המקורות מהקישורים להלן.
- הדגמה
- הורד מקור
סופי המחשבה & הפניות
הופתעתי לראשונה שעדיין יש עניין באוהל, שחשבתי כי סיים את סופו. זה גם הוביל אותי לשאול איך מודול CSS כמו זה הולך להיות שימושי. למעשה כל דפדפן עדיין תומך מורשתו של תג.
אז מה אתה חושב? האם האוהל עדיין רלוונטי בגיל זה, והוא יהיה שימושי בעיצוב אתרים מודרני?
אם אתה עדיין סקרן לגבי האוהל הזה, אתה יכול לבקר כמה הפניות הבאות:
- ספארי CSS הפניה
- גנרטור Webkit
- תיעוד מקיף של הישן
התג מ. - ותמיד יש גנרטור כמעט לכל דבר, כולל מחולל האוהל הזה.
