👩🏼‍🎤 🍁 👩‍👩‍👧 डेटा के लिए एक पूर्ण मार्गदर्शिका- * HTML विशेषताएँ 🔪 💑 🏦

हम आपका ध्यान विशेषताओं के उपयोग पर लेख का अनुवाद प्रस्तुत करते हैं data-*। ये ऐसी विशेषताएँ हैं, जिनका उपयोग मानक HTML तत्वों में विभिन्न उपयोगी जानकारियों को आसानी से संग्रहीत करने के लिए किया जा सकता है। यह जानकारी, विशेष रूप से, जावास्क्रिप्ट और सीएसएस में उपयोग की जा सकती है।

सामान्य जानकारी

HTML तत्वों में ऐसी विशेषताएँ हो सकती हैं, जिनका उपयोग विभिन्न समस्याओं को हल करने के लिए किया जाता है - सहायक तकनीकों को डेटा प्रदान करने से लेकर स्टाइलिंग तत्वों तक।

<!--  `class`      CSS,  `role`    -->
<div class="names" role="region" aria-label="Names"></div>

अपनी खुद की विशेषताओं को बनाने या उन तरीकों से मौजूदा विशेषताओं को लागू करने की अनुशंसा नहीं की जाती है, जिनके लिए वे डिज़ाइन नहीं किए गए हैं।

<!-- `highlight`   HTML--->
<div highlight="true"></div>

<!-- `large`      `width` -->
<div width="large">

यह कई कारणों से खराब है। HTML गलत तरीके से उत्पन्न किया गया है। और यद्यपि इसके वास्तविक नकारात्मक परिणाम नहीं हो सकते हैं, यह डेवलपर को इस तथ्य के कारण होने वाली गर्म भावना से वंचित करता है कि वह वैध HTML कोड बनाता है। लेकिन मुख्य कारण आपको ऐसा नहीं करना चाहिए क्योंकि HTML एक ऐसी भाषा है जो लगातार विकसित हो रही है। नतीजतन, अगर आज भाषा में एक निश्चित विशेषता का उपयोग नहीं किया जाता है, तो इसका मतलब यह नहीं है कि भविष्य में कुछ भी नहीं बदलेगा।

सच है, अगर किसी को ऐसी विशेषताओं का उपयोग करने की आवश्यकता है, तो उसके पास ऐसा करने का पूरी तरह से सामान्य तरीका है। यह आपकी अपनी विशेषताओं को बनाने के बारे में है, जिनमें से नाम एक उपसर्ग के साथ शुरू होते हैं data-। आप आसानी से इन विशेषताओं के साथ काम कर सकते हैं, उन्हें प्रोग्रामर की ज़रूरत के अनुसार लागू कर सकते हैं।

वाक्य - विन्यास

अपनी स्वयं की HTML विशेषताएँ बनाने और उन्हें डेटा लिखने की क्षमता अत्यंत उपयोगी हो सकती है। यह, जैसा कि आप जानते हैं, विशेषताओं के कारण संभव है data-*। यह इसके लिए है कि ऐसी विशेषताओं का इरादा है। यह इस तरह दिख रहा है:

<!--      -->
<div data-foo></div>

<!-- ...     -->
<div data-size="large"></div>

<!--      HTML,    HTML-, , ,      -->
<li data-prefix="Careful with HTML in here."><li>

<!--   -      -->
<aside data-some-long-attribute-name><aside>

ये विशेषताएँ, ठीक है क्योंकि वे हमेशा एक उपसर्ग के साथ शुरू होती data-हैं, जिन्हें अक्सर गुण data-*या डेटा विशेषताएँ कहा जाता है । इन विशेषताओं के नाम बनाते समय, शब्द पहले आता है data, फिर डैश ( -), और फिर शेष नाम, डेवलपर की आवश्यकता के रूप में व्यवस्थित किया जाता है।

क्या मैं डेटा नामक विशेषता का उपयोग कर सकता हूं?

यहां एक नमूना कोड दिया गया है, जो एक विशेषता का नाम देता है data:

<div data=""></div>

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

आपको डेटा- * विशेषताओं के साथ क्या नहीं करना चाहिए

ऐसी विशेषताओं में ऐसी सामग्री नहीं होनी चाहिए जो सहायक तकनीकों के लिए सुलभ होनी चाहिए। यदि कुछ डेटा पृष्ठ पर दिखाई दे, या स्क्रीन से पढ़ने के लिए साधनों के लिए सुलभ होना चाहिए, तो यह केवल विशेषता में डालने के लिए पर्याप्त नहीं है data-*। इस तरह के डेटा को नियमित HTML मार्कअप में भी दिखाई देना चाहिए।

<!--      ,     -->
<div data-name="Chris Coyier"></div>

<!--      ,       ,    ... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

वेब पेज एलिमेंट्स को छिपाने के तरीके पर सामग्री दी गई है ।

डेटा का उपयोग कर स्टाइलिंग तत्व- * विशेषताएँ

CSS में, आप विशेषताओं और उनके मूल्यों के आधार पर HTML तत्वों का चयन कर सकते हैं।

/*      ,    */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/*    , ,  -  */
button[data-type="download"] { }
.card[data-pad="extra"] { }

यह दिलचस्प लग सकता है। HTML / CSS में स्टाइलिंग के लिए, कक्षाओं का उपयोग मुख्य रूप से किया जाता है। और यद्यपि कक्षाएं एक अद्भुत उपकरण हैं (वे विशिष्टता के औसत स्तर में भिन्न हैं, तो आप तत्वों की संपत्ति के माध्यम से सुविधाजनक जावास्क्रिप्ट विधियों का उपयोग करके उनके साथ काम कर सकते हैं classList), एक तत्व में एक निश्चित वर्ग हो सकता है या नहीं (यानी तत्व में वर्ग या तो शामिल है) , या "बंद")। विशेषताओं का उपयोग करते समय data-*, डेवलपर के पास कक्षाओं ("चालू / बंद") और विशेषता के मूल्य के आधार पर तत्वों का चयन करने की क्षमता होती है, जो कि उनकी विशिष्टता के समान स्तर पर होती है।

/*  ,      */
[data-size] { }

/*  ,      */
[data-state="open"],
[aria-expanded="true"] { }

/*  " ",      ,    "3",    -   ,   3 -  "3.14" */
[data-version^="3"] { }
/*  ""   ,      -    */
[data-company*="google"] { }

विशेषता चयनकर्ताओं की विशिष्टता

विशेषता चयनकर्ताओं की विशिष्टता कक्षाओं के लिए समान है। विशिष्टता को अक्सर 4-भाग मूल्य के रूप में माना जाता है:

इनलाइन शैली
आईडी
कक्षाएं और विशेषताएँ
टैग

नतीजतन, यदि आप एक आइटम के लिए विशिष्टता के मूल्य की कल्पना करते हैं जो केवल एक विशेषता चयनकर्ता का उपयोग करके स्टाइल की जाती है, तो यह ऐसा दिखेगा 0, 0, 1, 0।

और यहाँ एक और चयनकर्ता है:

div.card[data-foo="bar"] { }

यह पहले से ही अर्थ द्वारा वर्णित किया जाएगा 0, 0, 2, 1। यहां संख्या 2दिखाई देती है क्योंकि एक वर्ग ( .card) और एक विशेषता दोनों है ([data-foo="bar"]। और 1यहां, इस तथ्य के कारण कि केवल एक टैग ( div) है।

यहाँ, इसे स्पष्ट करने के लिए, इन तर्कों का एक सचित्र संस्करण।

1 टैग, 1 वर्ग और 1 विशेषता

गुण चयनकर्ताओं के लिए, पहचानकर्ताओं (ID) कीतुलना में विशिष्टता कम है, लेकिन टैग (तत्वों) की तुलना में अधिक है। उनकी विशिष्टता वर्गों की विशिष्टता के बराबर है।

केस असंवेदनशील गुण मान

यदि आप चयनकर्ताओं को उन विशेषताओं का चयन करना चाहते हैं जिनके मूल्य में लोअरकेस और अपरकेस अक्षरों के विभिन्न संयोजनों का उपयोग करके लिखे गए तार हो सकते हैं, तो आप केस असंवेदनशील चयनकर्ता विकल्प का उपयोग कर सकते हैं।

/*     
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

यह व्यवहार सुनिश्चित करता है कि चयनकर्ता में एक चरित्र का उपयोग किया जाता है i।

डेटा में संग्रहीत डेटा प्रदर्शित करें- * विशेषताएँ

सीएसएस आपको विशेषता मान प्राप्त करने data-*और उन्हें पृष्ठ पर प्रदर्शित करने की अनुमति देता है ।

/* <div data-emoji=":-)"> */

[data-emoji]::before {
  content: attr(data-emoji); /*  ':-)' */
  margin-right: 5px;
}

डेटा का उपयोग करने के उदाहरण- * शैली तत्वों के लिए विशेषता

विशेषताओं data-*का उपयोग यह इंगित करने के लिए किया जा सकता है कि gridकंटेनर में कितने कॉलम होने चाहिए । यहाँ HTML कोड है:

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

यहाँ प्रासंगिक सीएसएस है:

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

और यहां परिणामी पृष्ठ का एक टुकड़ा है।

ग्रिड कंटेनर, जो डेटा- * विशेषताओं का उपयोग करके कॉन्फ़िगर किए गए हैं। आप

इस उदाहरण के साथCodePen परप्रयोग कर सकते हैं ।

डेटा के साथ काम करना- * जावास्क्रिप्ट में विशेषताएँ

डेटा पढ़ने के लिए विधि और लिखने के लिए data-*विधि का उपयोग करते हुए, अन्य गुणों के मूल्यों की तरह, मूल्यों को प्राप्त किया जा सकता है ।getAtributesetAttribute

//   
let value = el.getAttribute("data-state");

//   .

//  data-state   "collapsed"
el.setAttribute("data-state", "collapsed");

हालांकि, विशेषताओं data-*का अपना विशेष एपीआई है। मान लें कि हमारे पास कई विशेषताओं वाला एक तत्व है data-*(जो पूरी तरह से सामान्य है):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon=":-)"
></span>

यदि इस तत्व का कोई लिंक है, तो आप इसकी विशेषताओं के मूल्यों को पढ़ और लिख सकते हैं:

// 
span.dataset.info; // 123
span.dataset.index; // 2

// 
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";

ध्यान दें कि JS कोड की अंतिम पंक्ति CamelCase शैली विशेषता नाम प्रविष्टि का उपयोग करती है। सिस्टम स्वचालित रूप से कबाब शैली में लिखे गए HTML विशेषताओं के नाम को ऊंट शैली में लिखे गए नामों में परिवर्तित करता है। वह है - यह में data-this-little-piggyबदल जाता है dataThisLittlePiggy।

यह API, ज़ाहिर है, नहीं के रूप में आसान एपीआई के रूप में है classList , जैसे स्पष्ट तरीकों का समर्थन add, remove, toggleऔर replace, लेकिन यह अभी भी बेहतर कुछ नहीं से है।

जावास्क्रिप्ट में, आप तत्वों में एम्बेडेड डेटा सेट के साथ काम कर सकते हैं:

<img align="center" src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
<h2><font color="#3AC1EF">JSON-   data-*</font></h2>
<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

data-*JSON डेटा को विशेषता पर क्यों नहीं लिखा जाता है ? आखिरकार, ये केवल तार हैं जिन्हें वैध JSON डेटा (दिए गए उद्धरण चिह्न और अधिक) के रूप में स्वरूपित किया जा सकता है। यदि आवश्यक हो, तो यह डेटा विशेषता से निकाला जा सकता है और पार्स किया जा सकता है।

const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

डेटा का उपयोग करने के बारे में- * जावास्क्रिप्ट में विशेषताएँ

यहाँ विचार data-*HTML कोड में डेटा रखने के लिए विशेषताओं का उपयोग करना है जो कुछ कार्यों को करने के लिए जावास्क्रिप्ट से एक्सेस किया जा सकता है।

इस परिदृश्य का एक सामान्य कार्यान्वयन डेटाबेस के साथ काम के आयोजन के उद्देश्य से है। मान लीजिए हमारे पास एक बटन है Like:

<button data-id="435432343">Like</button>

इस बटन में एक क्लिक हैंडलर हो सकता है जो सर्वर के लिए एक AJAX अनुरोध करता है। हैंडलर, यदि उपयोगकर्ता बटन का उपयोग करके कुछ पसंद करता है, तो सर्वर डेटाबेस में पसंद की संख्या बढ़ जाती है। हैंडलर जानता है कि किस विशेष रिकॉर्ड को अपडेट करने की आवश्यकता है, क्योंकि यह इस बारे में विशेषता से जानकारी लेता है data-*।

सारांश

यहां , यहां और यहां विशेषता चयनकर्ताओं से जुड़े मानक हैं data-*। यहाँ Caniuse वेबसाइट पर, आप विशेषताओं के लिए data-*ब्राउज़र समर्थन के बारे में जान सकते हैं । यदि आपने पहले इन विशेषताओं का उपयोग नहीं किया है, तो हमें उम्मीद है कि इस सामग्री ने आपको विचार के लिए भोजन दिया है।

प्रिय पाठकों! आप डेटा का उपयोग कैसे करते हैं- * HTML विशेषताएँ?

डेटा के लिए एक पूर्ण मार्गदर्शिका- * HTML विशेषताएँ