2009-06-12 16 views
17

क्या इनलाइन छद्म शैलियों को बनाना संभव है?क्या इनलाइन छद्म शैलियों को बनाना संभव है?

उदाहरण के लिए, क्या मैं निम्न की तरह कुछ कर सकता हूं?

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a> 

इस के पीछे कारण मुझे लगता है कि UI तत्व बनाता है एक .NET पुस्तकालय के विकास कर रहा हूँ है। मैं उन HTML तत्वों का उत्पादन करना चाहता हूं जिनके होवर स्टेट सेट को बाहरी स्टाइल शीट के उपयोग के बिना सेट किया जा सकता है।

+1

@robbotic: (स्ट्रिंग यू, स्ट्रिंग color1, स्ट्रिंग रंग 2) जो उत्पादन Coding Horror इनलाइन मंडराना शैलियों का उपयोग आसान है मान लीजिए वह एक समारोह foo था। यह एक अच्छा विचार है? मैं सिर्फ इतना ही काम करता हूं जो शैली में लिया जाता है ... लेकिन यह लोगों को मेरी कक्षा का उपयोग स्वयं सीएसएस का उपयोग करने के लिए करता है, जो अल्प अवधि में तैनाती को और अधिक काम करता है। – Brian

+1

@ ब्रायन मैं जब भी संभव हो इनलाइन शैलियों से बचने की कोशिश करता हूं। मुझे पता है कि वे स्थापित करने के लिए तेज़ हैं, लेकिन मुझे लगता है कि अगर आपको कभी भी उसी शैली को डुप्लिकेट करने की ज़रूरत है तो आप हार जाते हैं। मेरे पास मेरी साइट पर सभी शैलियों के साथ एक बड़ी सीएसएस फ़ाइल (या एकाधिक सीएसएस फाइलें) होंगी। इस तरह से मैं जो भी आसानी से चाहता हूं उसे एक्सेस कर सकता हूं और मैं अपनी पूरी साइट पर जो कुछ भी करना चाहता हूं उसे एक बदलाव और प्रभाव डाल सकता हूं। –

+0

इसका उद्देश्य क्या है? इनलाइन स्टाइल चिंताओं को अलग करने का एक जहरीला उल्लंघन है। इसे सीएसएस पर छोड़ दें। – annakata

उत्तर

13

दुर्भाग्य से नहीं, आप इनलाइन सीएसएस का उपयोग करके होवर प्रभाव लागू नहीं कर सकते हैं।

इस समस्या के लिए एक (गरीब) कार्य-आसपास है कि आपके नियंत्रण प्रदान किए जाने पर स्टाइल ब्लॉक प्रस्तुत करें। उदाहरण के लिए, अपने नियंत्रण प्रस्तुत करना सकता है के रूप में:

<style type="text/css"> 
    .custom-class { background-color:green; } 
    .custom-class:hover { background-color:Red; } 
</style> 
<a href="#" class="custom-class">Coding Horror</a> 

आप अपने उपयोगकर्ताओं को अपने पृष्ठों के शीर्ष पर एक "शैली नियंत्रण" ड्रॉप करने के लिए मजबूर कर सकता है तुम वहाँ अपने सभी कस्टम वर्गों प्रस्तुत करना सकता है बजाय उन्हें प्रत्येक के बगल में प्रतिपादन नियंत्रण, जो एक बहुत ही बुरी चीज होगी (ब्राउज़र स्टाइल ब्लॉक में आने पर हर बार प्रतिपादन को पुनरारंभ करेगा, जिसमें आपके पृष्ठ के चारों ओर बिखरे हुए कई स्टाइल ब्लॉक धीमे प्रतिपादन का कारण बनेंगे)।

दुर्भाग्य से इस समस्या का कोई सुरुचिपूर्ण समाधान नहीं है।

+0

यह एक 'गरीब' कामकाज क्यों है ... बिल्कुल सीएसएस छद्म शैलियों का कारण नहीं है? – dsdsdsdsd

-1

या आप jQuery के hover फ़ंक्शन का उपयोग कर सकते हैं और पृष्ठभूमि रंग सेट कर सकते हैं।

+1

हां, क्योंकि इसके लिए एक जेएस समाधान की आवश्यकता है:/ – annakata

5

यह एक कैच -22 स्थिति है।

एक ओर, आप पेज में अपना तत्व कहां डाले जाने से पहले एक स्टाइल ब्लॉक जोड़ सकते हैं, लेकिन क्रिस पेबल उस समस्या को इंगित करता है। (यदि आप इस पर निर्णय लेते हैं, तो सुनिश्चित करें कि आप अपने तत्वों के लिए अद्वितीय आईडी चुनते हैं ताकि आपके चयनकर्ता गलती से किसी अन्य चीज़ का चयन या शैली न करें)। के रूप में यह मार्कअप, प्रस्तुति, व्यवहार, और अन्य चीजों की एक पूरी गुच्छा एक साथ बांध कि अपने आप में बुरा है

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a> 

लेकिन,:

दूसरी ओर, आप कुछ इस तरह कर सकता है।

आप लिंक टैग लिखकर या दस्तावेज़ में हेरफेर करके पृष्ठ में स्टाइलशीट भी इंजेक्ट कर सकते हैं। स्टाइलशीट्स, लेकिन यह एक डाउनलोड ट्रिगर करने जा रहा है।

मैंने आमतौर पर पहली विधि (स्टाइल ब्लॉक जोड़कर) को बड़े पैमाने पर देखा है। "मॉड्यूलर" पोर्टल साइटें इस तरह की चीज करती हैं, तो हो सकता है कि यह डी-फैक्टो मानक है (यह कम से कम अधिक पठनीय है और वहां जावास्क्रिप्ट क्रैमिंग की तुलना में बनाए रखना आसान हो सकता है?)। ऐसा लगता है कि जावास्क्रिप्ट विधि DOM और समग्र पृष्ठ पर कम से कम प्रभाव डालती है क्योंकि आप अपनी प्रस्तुति स्वयं को रखते हैं।

यह उन फ्रंट-एंड देव मोरस में से एक है जहां आपके द्वारा चुने गए प्रत्येक उत्तर कुछ हद तक गलत है, इसलिए विकल्पों का वजन लें और चुनें कि आपके लिए निर्माण और रखरखाव करना सबसे आसान है।

+0

हां, मुझे लगता है कि आपका अंतिम अनुच्छेद इसे बताता है :) –

0

मैं गतिशील रूप से एक सीएसएस फ़ाइल बनाउंगा क्योंकि मैं सभी नियंत्रणों का विश्लेषण करता हूं, और मैं होवर या अन्य स्यूडोक्लस शैलियों वाले नियंत्रणों में सर्वर साइड विशेषता जोड़ दूंगा।

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a> 

आपका कोड इन विशेषताओं के लिए देखो और मक्खी

#a1:hover { 
    color:blue 
} 

मैं नहीं जानता कि यदि नेट आप विशेषताओं की पार्स के इस प्रकार करने के लिए के लिए अनुमति देता है पर एक सीएसएस फ़ाइल उत्पन्न कर सकते हैं, लेकिन मैं php के लिए बनाए गए ढांचे में कुछ ऐसा करता हूं।

संबंधित मुद्दे