गैर-मानक विशेषताएँ HTML टैग पर। अच्छी बात? बुरी बात? तुम्हारे विचार?


92

HTML (या शायद सिर्फ XHTML?) टैग पर गैर-मानक विशेषताओं की बात करते समय अपेक्षाकृत सख्त है। यदि वे युक्ति का हिस्सा नहीं हैं, तो आपका कोड गैर-अनुपालन माना जाता है।

हालाँकि, मेटा-डेटा के साथ जावास्क्रिप्ट में गुजरने के लिए गैर-मानक विशेषताएँ काफी उपयोगी हो सकती हैं। उदाहरण के लिए, यदि पॉपअप दिखाने के लिए कोई लिंक है, तो आप पॉपअप का नाम एक विशेषता में सेट कर सकते हैं:

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

वैकल्पिक रूप से, आप पॉपअप के लिए शीर्षक को एक छिपे हुए तत्व में स्टोर कर सकते हैं, जैसे स्पैन:

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

हालांकि मैं फटा हुआ हूं जो एक पसंदीदा तरीका होना चाहिए। पहली विधि अधिक संक्षिप्त है और, मैं अनुमान लगा रहा हूं, खोज इंजन और स्क्रीन पाठकों के साथ ज्यादा पेंच नहीं करता है। इसके विपरीत, दूसरा विकल्प बड़ी मात्रा में डेटा संग्रहीत करना आसान बनाता है और इस प्रकार, अधिक बहुमुखी है। यह मानकों के अनुरूप भी है।

मैं उत्सुक हूं कि इस समुदाय के विचार क्या हैं। आप इस तरह की स्थिति को कैसे संभालते हैं? क्या पहली विधि की सरलता संभावित डाउनसाइड्स से आगे निकल जाती है (यदि कोई हो)?


3
इन्हें "एक्सपैंडो" विशेषता कहा जाता है - यदि आप उनके बारे में अधिक जानना चाहते हैं।
जेसन बंटिंग

2
AFAIK, एक्सपेंडो विशेषताओं को जावास्क्रिप्ट का उपयोग करके रनटाइम पर सेट किया जाता है। वे स्वयं XHTML का हिस्सा नहीं हैं
फिलिप लेबेर्ट

जवाबों:


50

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


2
मैं अब इस समाधान का पालन करता हूं - भले ही यह मानकों के अनुरूप नहीं है।
टॉम रिटर

1
मैंने हमेशा इसे टाला है, क्योंकि यह मान्य नहीं है। लेकिन अब जब मैं इसके बारे में सोचता हूं, तो कक्षा में सब कुछ समेटना = "" विशेषता (जैसे कि jquery मेटाडेटा) जरूरी नहीं कि कोई बेहतर हो। <HTML5 भूमि में इस पद्धति के लिए कोई व्यावहारिक, वास्तविक दुनिया के नुकसान हैं? मूल रूप से - अब क्या समस्याएं पैदा होंगी? ऐसा लगता है कि यह आदर्श नहीं है, लेकिन इसका कोई दुष्प्रभाव नहीं है जिसके बारे में मैं सोच सकता हूं।
राकेटमोनकीज़

@Rocketmonkeys मुझे यकीन नहीं है, लेकिन मुझे लगता है कि एक वर्ग विशेषता के अंदर डेटा का उपयोग करना, ब्राउज़र को अपरिभाषित सीएसएस नियमों को एक तत्व पर लागू करने का प्रयास करने के लिए मजबूर कर सकता है, इससे कुछ समस्याएं या प्रदर्शन समस्या हो सकती है। फिर मुझे यकीन नहीं हो रहा है
Vitim.us

@ Vitim.us, अगर ऐसा कोई प्रदर्शन हिट होता है, तो यह नगण्य होगा। उस तरह की चीज़ों में ब्राउज़र बहुत कुशल होते हैं; वास्तव में शैलियों को लागू करने के लिए हिट अधिक होगा। और याद रखें, स्टाइल के उद्देश्य से कक्षाओं का आविष्कार नहीं किया जाता है, वे किसी भी अन्य विशेषता की तरह केवल तत्व डेटा हैं। चयनकर्ता में किसी भी विशेषता का उपयोग किया जा सकता है, इसलिए यदि ऐसा कोई प्रदर्शन होता है, तो यह शाब्दिक रूप से data-आपके द्वारा तत्व में जोड़े गए किसी भी विशेषता ( उपसर्ग सहित ) पर लागू होगा ।
आंखों की रोशनी

@eyelidlessness यह एक अच्छा तर्क है, मुझे सहमत होना होगा, यहां तक ​​कि मैं जावास्क्रिप्ट के अंदर ठीक से डेटा संरचना का उपयोग करता हूं मैंने पाया कि कुछ मामलों में डेटा विशेषता का उपयोग करना उपयुक्त है। मैं राकेटमोनकीज की तरह कहे जाने वाले जैकी से बचता हूं। मुझे वास्तव में सूक्ष्म अनुकूलन के बारे में लोगों को परेशान करना बंद करने की आवश्यकता है।
विटिम।

27

कस्टम विशेषताएँ क्लाइंट पक्ष को अतिरिक्त डेटा ले जाने के लिए एक सुविधाजनक तरीका प्रदान करती हैं। Dojo टूलकिट नियमित रूप से कर रहा है और यह बताया गया है ( Dojo टूलकॉक मिथक को जारी करते हुए ):

कस्टम विशेषताएँ हमेशा मान्य HTML होती हैं, वे केवल DTD के विरुद्ध परीक्षण करने पर मान्य नहीं होती हैं। [...] HTML विनिर्देश बताता है कि मान्यता प्राप्त किसी भी विशेषता को उपयोगकर्ता एजेंटों में HTML रेंडरिंग इंजन द्वारा नजरअंदाज नहीं किया जाता है, और Dojo वैकल्पिक रूप से इसका लाभ उठाते हैं ताकि विकास में आसानी हो।


9

एक अन्य विकल्प जावास्क्रिप्ट में इस तरह से कुछ परिभाषित करना होगा:

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

फिर आप इसे बाद में अपने जावास्क्रिप्ट कोड में उपयोग कर सकते हैं, यह मानते हुए कि आपके लिंक में एक आईडी है जो इस हैशटेब में आईडी से मेल खाती है।

इसमें अन्य दो विधियों के नुकसान नहीं हैं: कोई गैर-मानक विशेषताएँ और न ही बदसूरत छिपी हुई अवधि।

नुकसान यह है कि यह आपके उदाहरण के रूप में सरल चीजों के लिए एक ओवरकिल का एक सा हो सकता है। लेकिन अधिक जटिल परिदृश्यों के लिए, जहां आपके पास पास करने के लिए अधिक डेटा है, यह एक अच्छा विकल्प है। विशेष रूप से यह देखते हुए कि डेटा को JSON के रूप में पास किया जा रहा है, इसलिए आप जटिल वस्तुओं को आसानी से पास कर सकते हैं।

इसके अलावा, आप डेटा को फ़ॉर्मेटिंग से अलग रखते हैं, जो स्थिरता के लिए एक अच्छी बात है।

आपके पास कुछ ऐसा भी हो सकता है (जो आप वास्तव में अन्य तरीकों से नहीं कर सकते हैं):

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

और जब से आप शायद कुछ सर्वर-साइड प्रोग्रामिंग भाषा का उपयोग करते हैं, तो यह हैश तालिका गतिशील रूप से उत्पन्न करने के लिए तुच्छ होनी चाहिए (बस इसे JSON पर क्रमबद्ध करें और इसे पृष्ठ के शीर्ष लेख अनुभाग में थूक दें)।


4

वैसे इस मामले में, इष्टतम समाधान है

<a href="#" alt="" title="Title of My Pop-up">click</a>

और शीर्षक विशेषता का उपयोग करना।

कभी-कभी मैं कल्पना को तोड़ देता हूं यदि मुझे वास्तव में इसकी आवश्यकता है। लेकिन शायद ही कभी, और केवल अच्छे कारण के लिए।

संपादित करें: यह निश्चित नहीं है कि -1 क्यों, लेकिन मैं इंगित कर रहा था कि कभी-कभी आपको लगता है कि आपको कल्पना को तोड़ने की आवश्यकता है, जब आप नहीं करते हैं।


4

कस्टम DTD में popup_title विशेषता की घोषणा क्यों नहीं की गई? यह समस्या को मान्यता के साथ हल करता है। मैं हर गैर-मानक तत्वों, विशेषताओं और मूल्यों के साथ ऐसा करता हूं और धन्यवाद देता हूं कि यह मान्यता मुझे अपने कोड के साथ केवल वास्तविक समस्याएं दिखाती है। यह किसी भी ब्राउज़र त्रुटियों को ऐसे HTML के साथ कम संभव बनाता है।


2

आप लंगर तत्व में छिपे इनपुट तत्वों को घोंसला कर सकते हैं

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

तब आप आसानी से डेटा को बाहर खींच सकते हैं

$('#anchor_id .articleid').val()

1
हां, लेकिन इसका सबसे अच्छा तरीका उपयोग करना है <input type="hidden" title="article_id" value="5" />:। चूंकि वर्ग CSS के लिए कुछ है, वास्तव में अमान्य कोड दे रहा है यदि वर्ग शैली की जानकारी में नहीं है। भले ही JS या CSS बंद हो जाए, डेटा छिपा रहेगा।
यति

1
@Yeti, वर्ग CSS के लिए कुछ नहीं है और न ही अमान्य अगर यह शैलियों में प्रकट नहीं होता है। यह किसी भी अन्य विशेषता की तरह, तत्व पर सिर्फ डेटा है। CSS के साथ संबंध यह है कि यह एक अच्छी तरह से समर्थित चयनकर्ता है।
पलकविहीनता

0

अंत में मेरा समाधान अतिरिक्त डेटा को किसी प्रकार के सीमांकक द्वारा अलग किए गए आईडी टैग में छिपाना था (एक अंडरस्कोर एक स्थान है, दो उस arg का अंत है), दूसरा arg एक आईडी है:

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

बदसूरत, और यह मानता है कि आप पहले से ही आईडी टैग का उपयोग किसी और चीज़ के लिए नहीं कर रहे हैं, लेकिन यह हर ब्राउज़र के अनुरूप है।


-1

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


10
SPAN मार्ग टैग का दुरुपयोग है, यद्यपि। यह सत्यापन मानकों को पूरा कर सकता है, लेकिन यह सिमेंटिक मानकों को पूरा नहीं करता है।
ceejayoz

-1

मैं इस पर भी अपना दिमाग चला रहा हूं। मुझे गैर-मानक विशेषताओं की पठनीयता पसंद है, लेकिन मुझे यह पसंद नहीं है कि यह मानक को तोड़ देगा। छिपी हुई स्पैन उदाहरण के अनुरूप है, लेकिन यह बहुत पठनीय नहीं है। इस बारे में क्या:

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

यहाँ कोड बहुत पठनीय है, क्योंकि JSON की कुंजी / मूल्य युग्म संकेतन है। आप बता सकते हैं कि यह मेटा डेटा है, जो सिर्फ इसे देखकर लिंक से संबंधित है। एकमात्र दोष जिसे मैं "rel" विशेषता के अपहरण के बगल में देख सकता हूं, वह यह है कि यह जटिल वस्तुओं के लिए गड़बड़ हो जाएगा। मैं वास्तव में ऊपर वर्णित "डेटा-" उपसर्ग विशेषताओं का विचार पसंद करता हूं। क्या कोई वर्तमान ब्राउज़र इसका समर्थन करता है?

यहाँ सोचने के लिए कुछ और है। एसईओ पर कोड का कितना असर नहीं पड़ता?


7
रिले विशेषता वर्तमान पृष्ठ और लिंक किए गए संसाधन के बीच संबंध का वर्णन करती है। यह एक जेनेरिक "स्टोर नहीं है जो भी डेटा आपको पसंद है" विशेषता। तो यह भयानक है।
क्वेंटिन

1
क्या कोई वर्तमान ब्राउज़र इसका समर्थन करता है? - समर्थन करने के लिए क्या है? ब्राउज़र्स पहले से ही गैर अनुपालन कोड को सहन कर सकते हैं। यह देखते हुए कि यह नए एचटीएमएल 5 का हिस्सा है, डेटा को जोड़ने के बारे में डरने की कोई बात नहीं है- जैसे आप किसी अन्य कस्टम विशेषता को जोड़ेंगे।
स्लाव
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.