🙏🏾 🙀 🈲 دليل كامل لسمات البيانات * HTML 🧔 🍦 👨🏿‍💼

نقدم انتباهكم إلى ترجمة المقالة حول استخدام السمات data-*. هذه هي السمات التي يمكن استخدامها لتخزين معلومات مفيدة متنوعة بسهولة في عناصر HTML القياسية. يمكن استخدام هذه المعلومات على وجه الخصوص في JavaScript و CSS.

معلومات عامة

يمكن أن تحتوي عناصر 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 ، يتم استخدام الفئات بشكل أساسي. وعلى الرغم من أن الفئات هي أداة رائعة (تختلف في متوسط مستوى الخصوصية ، يمكنك العمل معها باستخدام طرق JavaScript مناسبة من خلال خاصية العناصر 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).

هنا ، لجعلها أكثر وضوحا ، نسخة مصورة من هذه الحجج.

علامة واحدة وفئة واحدة وسمة واحدة

بالنسبة إلى محددات السمات ، تكون الخصوصية أقل من المحددات (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.

عرض البيانات المخزنة في البيانات * السمات

يسمح لك CSS باسترداد قيم السمات 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>

إليك CSS ذات الصلة:

[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.

العمل مع سمات البيانات * في JavaScript

قيم السمة data-*يمكن الوصول إليها، مثل قيم سمات أخرى، وذلك باستخدام طريقة getAtributeلقراءة البيانات وطريقة setAttributeللكتابة.

//   
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، بطبيعة الحال، ليس سهلا كما في API classList ، ودعم أساليب واضحة مثل add، remove، toggleو replace، لكنه ما زال أفضل من لا شيء.

في JavaScript ، يمكنك العمل مع مجموعات البيانات المضمنة في العناصر:

<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

حول استخدام سمات البيانات * في JavaScript

الفكرة هنا هي استخدام السمات data-*لوضع البيانات في كود HTML يمكن الوصول إليها من JavaScript لتنفيذ إجراءات معينة.

يهدف التنفيذ المشترك لهذا السيناريو إلى تنظيم العمل مع قواعد البيانات. افترض أن لدينا زر Like:

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

قد يحتوي هذا الزر على معالج نقر يقوم بتنفيذ طلب AJAX إلى الخادم. المعالج ، إذا أحب المستخدم شيئًا ما باستخدام الزر ، فإنه يزيد عدد الإعجابات في قاعدة بيانات الخادم. يعرف المعالج أي سجل محدد يجب تحديثه ، لأنه يأخذ معلومات حول هذا من السمة data-*.

ملخص

هنا ، هنا و هنا هي المعايير المرتبطة محددات السمة data-*. هنا على موقع Caniuse ، يمكنك التعرف على دعم data-*المتصفح للسمات . إذا لم تكن قد استخدمت هذه السمات من قبل ، نأمل أن تكون هذه المادة قد أعطتك غذاء للتفكير.

القراء الأعزاء! كيف تستخدم سمات البيانات * HTML؟

دليل كامل لسمات البيانات * HTML