आप में से जो लंबे समय से एचटीएमएल लिख रहे हैं वे तत्व को याद कर सकते हैं। यह ब्राउज़र-विशिष्ट तत्व था जिसने स्क्रीन पर स्क्रॉलिंग टेक्स्ट का बैनर बनाया था। यह तत्व एचटीएमएल विनिर्देशन में कभी नहीं जोड़ा गया था और इसके लिए समर्थन व्यापक रूप से ब्राउज़र भर में भिन्न था। लोगों को अक्सर इस तत्व के उपयोग के बारे में बहुत मजबूत राय थी - सकारात्मक और नकारात्मक दोनों। लेकिन चाहे आप इसे प्यार करते या नफरत करते हैं, यह उस सामग्री को बनाने का उद्देश्य प्रदान करता है जो बॉक्स सीमाओं को दिखाई देता है।
मजबूत व्यक्तिगत राय के अलावा ब्राउज़र द्वारा इसे पूरी तरह कार्यान्वित नहीं किया गया था, इसका एक कारण यह था कि इसे एक दृश्य प्रभाव माना जाता है और इस तरह, इसे HTML द्वारा परिभाषित नहीं किया जाना चाहिए, जो संरचना को परिभाषित करता है। इसके बजाय, दृश्य या प्रस्तुति प्रभाव सीएसएस द्वारा प्रबंधित किया जाना चाहिए। और CSS3 मार्की मॉड्यूल को नियंत्रित करता है कि ब्राउज़र कैसे तत्वों के लिए मार्की प्रभाव जोड़ते हैं।
नई CSS3 गुण
CSS3 मार्की में आपकी सामग्री को प्रदर्शित करने में सहायता के लिए पांच नई गुण जोड़ता है: अतिप्रवाह-शैली, मार्की-शैली, मार्की-प्ले-गिनती, मार्की-दिशा और मार्की-स्पीड।
अतिप्रवाह शैली
ओवरफ्लो-स्टाइल प्रॉपर्टी (जिसे मैंने लेख सीएसएस ओवरफ्लो में भी चर्चा की है) सामग्री बॉक्स को ओवरफ्लो करने वाली सामग्री के लिए पसंदीदा शैली को परिभाषित करता है। यदि आप मान को मार्की-लाइन या मार्की-ब्लॉक पर सेट करते हैं तो आपकी सामग्री बाएं / दाएं (मार्की-लाइन) या ऊपर / नीचे (मार्की-ब्लॉक) में स्लाइड और आउट हो जाएगी।
मार्की शैली
यह संपत्ति परिभाषित करती है कि सामग्री कैसे देखें (और बाहर)।
विकल्प स्क्रॉल, स्लाइड और वैकल्पिक हैं। स्क्रॉल पूरी तरह से स्क्रीन से सामग्री के साथ शुरू होता है, और फिर यह दृश्य क्षेत्र में तब तक चलता है जब तक यह पूरी तरह से स्क्रीन से पूरी तरह से बंद न हो जाए। स्लाइड पूरी तरह से स्क्रीन से सामग्री के साथ शुरू होती है और तब तक यह तब तक चलता है जब तक सामग्री स्क्रीन पर पूरी तरह से स्थानांतरित नहीं हो जाती है और स्क्रीन पर स्लाइड करने के लिए कोई और सामग्री नहीं छोड़ी जाती है।
आखिरकार, वैकल्पिक रूप से दूसरी ओर स्लाइडिंग, सामग्री को आगे और पीछे स्लाइडिंग करता है।
मार्की खेलने गिनती
मार्की तत्व का उपयोग करने की कमी में से एक यह है कि मार्की कभी नहीं रुकती है। लेकिन स्टाइल प्रॉपर्टी मार्की-प्ले-गिनती के साथ आप विशिष्ट समय के लिए सामग्री को चालू और बंद करने के लिए मार्की सेट कर सकते हैं।
मार्की-दिशा
आप उस दिशा को भी चुन सकते हैं जिस पर सामग्री स्क्रीन पर स्क्रॉल होनी चाहिए। मूल्य आगे और विपरीत मूल्य टेक्स्ट की दिशात्मकता पर आधारित होते हैं जब ओवरफ्लो-शैली मार्की-लाइन होती है और ओवरफ़्लो-शैली मार्की-ब्लॉक होने पर ऊपर या नीचे होती है।
मार्की-दिशा विवरण
| अतिप्रवाह शैली | भाषा निर्देश | आगे | उलटा |
|---|---|---|---|
| मार्की ऑनलाइन | एल टीआर | बाएं | सही |
| rtl | सही | बाएं | |
| मार्की-ब्लॉक | ऊपर | नीचे |
मार्की गति
यह संपत्ति निर्धारित करती है कि स्क्रीन पर सामग्री कितनी जल्दी स्क्रॉल करती है। मान धीमे, सामान्य और तेज़ होते हैं। वास्तविक गति सामग्री और ब्राउजर को प्रदर्शित करने पर निर्भर करती है, लेकिन मान धीमा होना चाहिए सामान्य से धीमा है जो तेजी से धीमा है।
मार्की गुणों का ब्राउज़र समर्थन
सीएसएस मार्की तत्वों को काम करने के लिए आपको विक्रेता उपसर्ग का उपयोग करने की आवश्यकता हो सकती है। वे निम्नानुसार हैं:
| CSS3 | विक्रेता उपसर्ग |
|---|---|
| अतिप्रवाह-एक्स: मार्की-लाइन; | अतिप्रवाह-एक्स: -वेबकिट-मार्की; |
| मार्की शैली | -webkit-मार्की शैली |
| मार्की खेलने गिनती | -webkit-मार्की-पुनरावृत्ति |
| मार्की-दिशा: आगे | रिवर्स; | -वेबिट-मार्की-दिशा: आगे | पीछे की ओर; |
| मार्की गति | -webkit-मार्की गति |
| कोई समकक्ष नहीं | -webkit-मार्की की वृद्धि दर्शाने |
अंतिम संपत्ति आपको यह निर्धारित करने की अनुमति देती है कि मार्की में स्क्रीन पर सामग्री स्क्रॉल के रूप में चरणों को कितना बड़ा या छोटा होना चाहिए।
अपने मार्की काम करने के लिए, आपको पहले विक्रेता प्रीफिक्स्ड मानों को रखना चाहिए और फिर CSS3 विनिर्देश मानों के साथ उनका पालन करना चाहिए। उदाहरण के लिए, यहां एक मार्की के लिए सीएसएस है जो 200x50 बॉक्स के अंदर बाएं से दाएं पाठ को पांच बार स्क्रॉल करता है।
{
चौड़ाई: 200 पीएक्स; ऊंचाई: 50 पीएक्स; सफेद अंतरिक्ष: अब्रैप;
छिपा हुआ सैलाब;
ओवरफ़्लो- एक्स: -webkit-मार्की;
-वेबिट-मार्की-दिशा: आगे;
-वेबिट-मार्की-शैली: स्क्रॉल;
-वेबिट-मार्की-गति: सामान्य;
-वेबिट-मार्की-वृद्धि: छोटा;
-वेबिट-मार्की-पुनरावृत्ति: 5;
अतिप्रवाह-एक्स: मार्की-लाइन;
मार्की-दिशा: आगे;
मार्की शैली: स्क्रॉल;
मार्की-गति: सामान्य;
मार्की-प्ले-गिनती: 5;
}