السمات

تمت مناقشة السمات بإيجاز في مقالة نظرة عامة على HTML. حان وقت التعرّف على التفاصيل.

السمات هي ما يجعل HTML قويًا للغاية. السمات هي أسماء مفصولة بمسافات وأزواج من الأسماء والقيم تظهر في علامة الفتح، وتوفّر معلومات عن العنصر ووظائفه.

تحدّد السمات سلوك العناصر وعلاقاتها ووظائفها. بعض السمات عامة، ما يعني أنّه يمكن أن تظهر ضمن علامة فتح أي عنصر. تنطبق سمات أخرى على عدة عناصر وليس كلها، بينما تكون سمات أخرى خاصة بعنصر معيّن، أي ذات صلة بعنصر واحد فقط. في HTML، تتطلّب جميع السمات قيمة، باستثناء السمات المنطقية والسمات المُعدَّدة إلى حدّ ما.

إذا كانت قيمة السمة تتضمّن مسافة أو رموزًا خاصة، يجب وضع القيمة بين علامات اقتباس. لهذا السبب ولتحسين سهولة القراءة، ننصحك دائمًا باستخدام علامات الاقتباس.

مع أنّ HTML غير حسّاسة لحالة الأحرف، إلا أنّ بعض قيم السمات حسّاسة لها. القيم التي تشكّل جزءًا من مواصفات HTML غير حساسة لحالة الأحرف. إنّ قيم السلاسل المحدّدة، مثل أسماء الفئات وأرقام التعريف، حسّاسة لحالة الأحرف. إذا كانت قيمة السمة حساسة لحالة الأحرف في HTML، ستكون حساسة لحالة الأحرف عند استخدامها كمحدّد سمة في CSS وفي JavaScript، وإلا لن تكون كذلك.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the ID attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

السمات المنطقية

إذا كانت هناك سمة منطقية، تكون قيمتها دائمًا صحيحة. تتضمّن السمات المنطقية autofocus وinert وchecked وdisabled وrequired وreversed وallowfullscreen وdefault, وloop وautoplay وcontrols وmuted وreadonly وmultiple, وselected. إذا كانت إحدى هذه السمات (أو أكثر) متوفّرة، يكون العنصر غير مفعّل أو مطلوبًا أو للقراءة فقط، وما إلى ذلك. وإذا لم تكن متوفّرة، لا يكون كذلك.

يمكن حذف القيم المنطقية أو ضبطها على سلسلة فارغة أو أن تكون اسم السمة، ولكن ليس من الضروري ضبط القيمة على السلسلة true. ستؤدي جميع القيم، بما في ذلك true وfalse و😀، إلى القيمة "صحيح" حتى لو كانت غير صالحة.

العلامات الثلاث التالية متكافئة:

<input required>
<input required="">
<input required="required">

إذا كانت قيمة السمة هي "false"، احذف السمة. إذا كانت السمة صحيحة، أدرِج السمة ولكن لا تقدّم قيمة. على سبيل المثال، required="required" ليست قيمة صالحة في HTML، ولكن بما أنّ required قيمة منطقية، يتم حل القيم غير الصالحة إلى "صحيح". ولكن بما أنّ السمات العددية غير الصالحة لا تؤدي بالضرورة إلى القيمة نفسها التي تؤدي إليها القيم غير المتوفّرة، من الأسهل أن تعتاد على حذف القيم بدلاً من تذكُّر السمات المنطقية مقابل السمات العددية واحتمال تقديم قيمة غير صالحة.

عند التبديل بين "صحيح" و"خطأ"، أضِف السمة وأزِلها بالكامل باستخدام JavaScript بدلاً من تبديل القيمة.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

السمات المُعدَّدة

يحدث أحيانًا خلط بين السمات المُعدّدة والسمات المنطقية. وهي سمات HTML تتضمّن مجموعة محدودة من القيم الصالحة المحدّدة مسبقًا. وكما هي الحال مع السمات المنطقية، تتضمّن هذه السمات قيمة تلقائية إذا كانت السمة متوفّرة ولكن القيمة غير متوفّرة. على سبيل المثال، إذا أدرجت <style contenteditable>، سيتم تلقائيًا استخدام <style contenteditable="true">.

على عكس السمات المنطقية، لا يعني حذف السمة أنّ قيمتها خاطئة. لا تكون السمة الحالية التي لا تتضمّن قيمة صحيحة بالضرورة، ولا يكون الإعداد التلقائي للقيم غير الصالحة هو نفسه السلسلة الخالية بالضرورة. بالاستناد إلى المثال السابق، يتم تلقائيًا ضبط قيمة contenteditable على inherit في حال عدم توفّرها أو عدم صلاحيتها، ويمكن ضبطها بشكل صريح على false.

تعتمد القيمة التلقائية على السمة. على عكس القيم المنطقية، لا تكون السمات "صحيحة" تلقائيًا في حال توفّرها. إذا تضمّنت <style contenteditable="false">، لن يكون العنصر قابلاً للتعديل. إذا كانت القيمة غير صالحة، مثل <style contenteditable="😀">، أو <style contenteditable="contenteditable">، ستكون القيمة غير صالحة وسيتم ضبطها تلقائيًا على inherit.

في معظم الحالات التي تتضمّن سمات تعدادية، تكون القيم المفقودة وغير الصالحة هي نفسها. على سبيل المثال، إذا كانت السمة type في <input> غير متوفّرة أو متوفّرة بدون قيمة أو تتضمّن قيمة غير صالحة، سيتم ضبطها تلقائيًا على text. مع أنّ هذا السلوك شائع، إلا أنّه ليس قاعدة. لهذا السبب، من المهم معرفة السمات المنطقية مقابل السمات المُعدَّدة، وحذف القيم إذا أمكن حتى لا تخطئ فيها، والبحث عن القيمة عند الحاجة.

السمات العامة

السمات العامة هي سمات يمكن ضبطها على أي عنصر HTML، بما في ذلك العناصر في <head>. هناك أكثر من 30 سمة عامة. على الرغم من إمكانية إضافة كل هذه السمات نظريًا إلى أي عنصر HTML، لا يكون لبعض السمات العامة أي تأثير عند ضبطها على بعض العناصر، مثلاً، لا يتم عرض ضبط hidden على <meta> كمحتوى وصفي.

id

تُستخدَم السمة العامة id لتحديد معرّف فريد لعنصر. ويخدم أغراضًا عديدة، منها:

• تمثّل هذه السمة هدف معرّف الجزء من الرابط.
• تحديد عنصر لإنشاء البرامج النصية
• ربط عنصر نموذج بالتصنيف الخاص به
• توفير تصنيف أو وصف للتكنولوجيات المساعدة
• استهداف الأنماط باستخدام (مستوى عالٍ من التحديد أو كمحدّدات سمات) في CSS

قيمة id هي سلسلة بدون مسافات. إذا كان الاسم يتضمّن مسافة، لن يتعطّل المستند، ولكن عليك استهداف id باستخدام أحرف إلغاء في HTML وCSS وJS. جميع الأحرف الأخرى صالحة. يمكن أن تكون قيمة id هي 😀 أو .class، ولكن هذا ليس خيارًا جيدًا. لتسهيل البرمجة عليك في الوقت الحالي وفي المستقبل، اجعل الحرف الأول من id حرفًا، واستخدِم أحرف ASCII والأرقام و_ و- فقط. من الممارسات الجيدة وضع اصطلاح تسمية id ثم الالتزام به، لأنّ قيم id حسّاسة لحالة الأحرف.

يجب أن يكونid فريدًا للمستند. من غير المحتمل أن يتعطّل تخطيط صفحتك إذا تم استخدام id أكثر من مرة، ولكن قد لا تعمل JavaScript والروابط وتفاعلات العناصر على النحو المتوقّع.

معرّف جزء الرابط

يتضمّن شريط التنقّل أربعة روابط. سنتناول عنصر الرابط لاحقًا، ولكن في الوقت الحالي، يجب أن تعرف أنّ الروابط لا تقتصر على عناوين URL المستندة إلى HTTP، بل يمكن أن تكون معرّفات أجزاء تشير إلى أقسام من الصفحة في المستند الحالي (أو في مستندات أخرى).

في الموقع الإلكتروني الخاص بورشة عمل تعلُّم الآلة، يتضمّن شريط التنقّل في رأس الصفحة أربعة روابط:

توفّر السمة href الرابط التشعّبي الذي يؤدي تفعيله إلى توجيه المستخدم إليه. عندما يتضمّن عنوان URL علامة تجزئة (#) متبوعة بسلسلة من الأحرف، تكون هذه السلسلة معرّفًا لكسر. إذا كانت السلسلة تطابق id أحد العناصر في صفحة الويب، يكون الجزء عبارة عن رابط أو إشارة إلى هذا العنصر. سينتقل المتصفّح إلى النقطة التي تم فيها تحديد الرابط الثابت.

تشير هذه الروابط الأربعة إلى أربعة أقسام من صفحتنا تم تحديدها من خلال السمة id. عندما ينقر المستخدم على أي من الروابط الأربعة في شريط التنقل، يتم عرض العنصر المرتبط بمعرّف الجزء، أي العنصر الذي يحتوي على المعرّف المطابق بدون #.

يتضمّن <main> محتوى ورشة عمل تعلُّم الآلة أربعة أقسام تتضمّن معرّفات. عندما ينقر زائر الموقع الإلكتروني على أحد الروابط في <nav>، يتم الانتقال إلى القسم الذي يتضمّن معرّف الجزء هذا. يكون الترميز مشابهاً لما يلي:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

عند مقارنة معرّفات الأجزاء في روابط <nav>، ستلاحظ أنّ كل معرّف يتطابق مع id في <section> ضمن <main>. يوفّر لنا المتصفّح رابطًا مجانيًا "في أعلى الصفحة". سيؤدي ضبط href="#top" أو href="#" أو href="#top" (مع تجاهل حالة الأحرف) إلى نقل المستخدم إلى أعلى الصفحة.

الفاصلة التي تتضمّن علامة التجزئة في href ليست جزءًا من معرّف الجزء. معرّف الجزء هو دائمًا الجزء الأخير من عنوان URL ولا يتم إرساله إلى الخادم.

أدوات اختيار لغة CSS

في CSS، يمكنك استهداف كل قسم باستخدام أداة اختيار، مثل #feedback. للحصول على خصوصية أقل، استخدِم أداة اختيار السمات، [id="feedback"]، مع مراعاة حساسية حالة الأحرف.

نص الفيديوهات

على MLW.com، هناك مفاجأة مخفية لمستخدمي الماوس فقط. يؤدي النقر على مفتاح الإضاءة إلى تفعيل الصفحة أو إيقافها.

في ما يلي الترميز الخاص بصورة مفتاح الإضاءة:

<img src="svg/switch2.svg" id="switch"
  alt="light switch" class="light" />

يمكن استخدام السمة id كمَعلمة لطريقة getElementById()، ويمكن استخدامها مع البادئة # كجزء من مَعلمة لطريقتَي querySelector() وquerySelectorAll().

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

تستفيد إحدى دوال JavaScript من هذه الإمكانية لاستهداف العناصر حسب سمة id الخاصة بها:

<script>
  /* Switch is a reserved word in JavaScript, so instead, we use onoff */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

يحتوي عنصر <label> في HTML على السمة for التي تأخذ id لعنصر التحكّم في النموذج المرتبط بها كقيمة لها. يضمن إنشاء تصنيف واضح من خلال تضمين id في كل عنصر تحكّم في النموذج وربط كل عنصر بسمة for الخاصة بالتصنيف أنّ كل عنصر تحكّم في النموذج يتضمّن تصنيفًا مرتبطًا به.

على الرغم من أنّه يمكن ربط كل تصنيف بعنصر تحكّم واحد في النموذج، قد يتضمّن عنصر التحكّم في النموذج أكثر من تصنيف واحد مرتبط به.

إذا كان عنصر التحكّم في النموذج مضمّنًا بين علامتَي الفتح والإغلاق <label>، لن تكون السمتان for وid ضروريتَين، ويُطلق على ذلك اسم التصنيف "الضمني". تتيح التصنيفات لجميع المستخدمين معرفة الغرض من كل عنصر تحكّم في النموذج.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

يؤدي الربط بين for وid إلى إتاحة المعلومات لمستخدمي التكنولوجيات المساعدة. بالإضافة إلى ذلك، يؤدي النقر في أي مكان على تصنيف إلى توجيه التركيز إلى العنصر المرتبط، ما يؤدي إلى توسيع مساحة النقر الخاصة بعنصر التحكّم. وهذه الميزة لا تساعد فقط الأشخاص الذين يعانون من مشاكل في البراعة اليدوية وتجعل استخدام الماوس أقل دقة، بل تساعد أيضًا جميع مستخدمي الأجهزة الجوّالة الذين لديهم أصابع أعرض من زر الاختيار.

في مثال الرمز البرمجي هذا، السؤال الخامس الوهمي في اختبار وهمي هو سؤال بخيارات متعدّدة يمكن اختيار إجابة واحدة فقط. يحتوي كل عنصر تحكّم في النموذج على تصنيف واضح، مع id فريد لكل عنصر. لضمان عدم تكرار رقم التعريف عن طريق الخطأ، تكون قيمة رقم التعريف مزيجًا من رقم السؤال والقيمة.

عند تضمين أزرار الاختيار، وبما أنّ التصنيفات تصف قيمة أزرار الاختيار، فإنّنا نضمّن جميع الأزرار التي تحمل الاسم نفسه في <fieldset> مع <legend> الذي يمثّل التصنيف أو السؤال للمجموعة بأكملها.

استخدامات أخرى لتسهيل الاستخدام

لا يقتصر استخدام id في تسهيل الاستخدام وإمكانية الوصول على التصنيفات فقط. في مقدمة إلى النص، تم تحويل <section> إلى معلم منطقة من خلال الإشارة إلى id الخاص بـ <h2> كقيمة aria-labelledby الخاص بـ <section> لتوفير الاسم المناسب لذوي الاحتياجات الخاصة:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

هناك أكثر من 50 aria-* حالة وسمة يمكن استخدامها لضمان تسهيل الاستخدام. تأخذ aria-labelledby وaria-describedby وaria-details وaria-owns كقيمة لها قائمة مراجع id مفصولة بمسافات. تأخذ السمة aria-activedescendant، التي تحدّد العنصر الفرعي الذي تم التركيز عليه، كقيمة لها مرجع id واحد، وهو مرجع العنصر الفردي الذي تم التركيز عليه (يمكن التركيز على عنصر واحد فقط في كل مرة).

class

تقدّم السمة class طريقة إضافية لاستهداف العناصر باستخدام CSS (وJavaScript)، ولكنّها لا تخدم أي غرض آخر في HTML (على الرغم من أنّ أُطر العمل ومكتبات المكوّنات قد تستخدمها). تأخذ سمة الفئة كقيمة لها قائمة بالفئات الحساسة لحالة الأحرف الخاصة بالعنصر، وتكون الفئات مفصولة بمسافات.

يؤدي إنشاء بنية دلالية سليمة إلى إتاحة استهداف العناصر استنادًا إلى موضعها ووظيفتها. تتيح بنية الصوت استخدام محدّدات العناصر التابعة، والمحدّدات العلائقية، ومحدّدات السمات. أثناء التعرّف على السمات، فكِّر في كيفية تصميم العناصر التي تتضمّن السمات أو قيم السمات نفسها. لا يعني ذلك أنّه لا يجب استخدام سمة الفئة، بل إنّ معظم المطوّرين لا يدركون أنّهم لا يحتاجون إليها في كثير من الأحيان.

حتى الآن، لم تستخدم MLW أي فئات. هل يمكن إطلاق موقع إلكتروني بدون اسم فئة واحد؟ سنرى.

style

تتيح السمة style تطبيق أنماط مضمّنة، وهي أنماط يتم تطبيقها على العنصر الفردي الذي تم ضبط السمة عليه. تأخذ السمة style كقيمة لها أزواجًا من قيم خصائص CSS، ويكون بناء الجملة الخاص بالقيمة هو نفسه محتوى قالب نمط CSS: تتبع الخصائص علامة النقطتين الرأسيتين، تمامًا كما في CSS، وتنهي الفواصل المنقوطة كل تعريف، وتأتي بعد القيمة.

لا يتم تطبيق الأنماط إلا على العنصر الذي تم ضبط السمة عليه. ترث العناصر التابعة قيم السمات الموروثة، ما لم يتم تجاهلها من خلال تعريفات أنماط أخرى على العناصر المتداخلة أو في كتل <style> أو أوراق الأنماط. بما أنّ القيمة تتضمّن ما يعادل محتوى كتلة نمط واحدة يتم تطبيقها على هذا العنصر فقط، لا يمكن استخدامها للمحتوى الذي يتم إنشاؤه أو لإنشاء رسوم متحركة بإطارات مفتاحية أو لتطبيق أي قواعد أخرى تبدأ بعلامة @.

على الرغم من أنّ style هي سمة عامة، لا يُنصح باستخدامها. بدلاً من ذلك، حدِّد الأنماط في ملف أو ملفات منفصلة. ومع ذلك، يمكن أن تكون السمة style مفيدة أثناء التطوير لتفعيل تنسيق سريع، مثل أغراض الاختبار. بعد ذلك، خذ نمط "الحل" وأضِفه إلى ملف CSS المرتبط.

tabindex

يمكن إضافة السمة tabindex إلى أي عنصر لتمكينه من تلقّي التركيز. تحدّد قيمة tabindex ما إذا كان سيتم إضافتها إلى ترتيب علامات التبويب، ويمكن أيضًا إضافتها إلى ترتيب علامات تبويب غير تلقائي.

تتلقّى السمة tabindex عددًا صحيحًا كقيمة لها. تتيح القيمة السلبية (يتم عادةً استخدام -1) أن يتلقّى العنصر التركيز، مثلاً باستخدام JavaScript، ولكنّها لا تضيف العنصر إلى تسلسل التنقّل باستخدام المفتاح Tab. تؤدي قيمة tabindex التي تبلغ 0 إلى جعل العنصر قابلاً للتركيز عليه ويمكن الوصول إليه باستخدام مفتاح Tab، ما يؤدي إلى إضافته إلى ترتيب علامات التبويب التلقائي للصفحة بترتيب رمز المصدر. تؤدي القيمة 1 أو أكثر إلى وضع العنصر في تسلسل تركيز ذي أولوية، ولا يُنصح بذلك.

في هذه الصفحة، تتوفّر وظيفة مشاركة تستخدم عنصرًا مخصّصًا من النوع <share-action> يعمل كـ <button>. يتم تضمين القيمة tabindex للسمة tabindex بهدف إضافة العنصر المخصّص إلى ترتيب الانتقال التلقائي باستخدام مفتاح Tab في لوحة المفاتيح:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

يُعلم role button مستخدمي قارئات الشاشة بأنّ هذا العنصر يجب أن يتصرف كزر. يتم استخدام JavaScript لضمان الوفاء بوعد وظيفة الزر، بما في ذلك معالجة حدثَي النقر والضغط على المفتاح، بالإضافة إلى معالجة الضغط على مفتاحَي Enter والمسافة.

يمكن أن تتلقّى عناصر التحكّم في النماذج والروابط والأزرار وعناصر المحتوى القابل للتعديل التركيز، وعندما يضغط مستخدم لوحة المفاتيح على مفتاح التبويب، ينتقل التركيز إلى العنصر التالي القابل للتركيز كما لو تم ضبط tabindex="0". ولا يمكن التركيز على العناصر الأخرى تلقائيًا. تتيح إضافة السمة tabindex إلى هذه العناصر إمكانية التركيز عليها في الحالات التي لا يمكن فيها ذلك.

إذا كان المستند يتضمّن عناصر ذات tabindex بقيمة 1 أو أكثر، سيتم تضمينها في تسلسل علامات تبويب منفصل. في CodePen، يبدأ التنقّل باستخدام مفتاح Tab في تسلسل منفصل، بترتيب القيم من الأدنى إلى الأعلى، قبل الانتقال إلى التسلسل العادي بالترتيب الوارد في المصدر.

يمكن أن يؤدي تغيير ترتيب الانتقال بين علامات التبويب إلى تقديم تجربة سيئة للغاية للمستخدم. ويصعّب ذلك الاعتماد على التكنولوجيا المساعدة، مثل لوحات المفاتيح وبرامج قراءة الشاشة، للتنقل في المحتوى. ويصعب أيضًا على المطوّر إدارتها وصيانتها. التركيز مهم، وهناك وحدة كاملة تناقش التركيز وترتيب التركيز.

role

إنّ السمة role هي جزء من مواصفات ARIA، وليس من مواصفات WHATWG HTML. يمكن استخدام سمة role لتوفير معنى دلالي للمحتوى، ما يتيح لبرامج قراءة الشاشة إعلام مستخدمي الموقع بالتفاعل المتوقّع مع أحد العناصر.

هناك بعض عناصر واجهة المستخدم الشائعة، مثل مربّعات التحرير والسرد وأشرطة القوائم وقوائم علامات التبويب وجداول البيانات الشجرية، التي ليس لها مكافئ أصلي في HTML. على سبيل المثال، عند إنشاء نمط تصميم بعلامات تبويب، يمكن استخدام الأدوار tab وtablist وtabpanel. يتعلّم الشخص الذي يمكنه رؤية واجهة المستخدم من خلال التجربة كيفية التنقّل في الأداة وجعل اللوحات المختلفة مرئية من خلال النقر على علامات التبويب المرتبطة بها. يتيح تضمين الدور tab مع <button role="tab"> عند استخدام مجموعة من الأزرار لعرض لوحات مختلفة لمستخدم قارئ الشاشة معرفة أنّ <button> الذي يتم التركيز عليه حاليًا يمكنه تبديل لوحة ذات صلة إلى العرض بدلاً من تنفيذ وظيفة نموذجية تشبه وظيفة الزر.

لا تغيّر السمة role سلوك المتصفّح أو تعدّل التفاعلات مع لوحة المفاتيح أو جهاز التأشير، فإضافة role="button" إلى <span> لا تحوّله إلى <button>. لهذا السبب، ننصح باستخدام عناصر HTML الدلالية للغرض المخصّص لها. ومع ذلك، عندما لا يكون استخدام العنصر الصحيح ممكنًا، تتيح السمة role إعلام مستخدمي برامج قراءة الشاشة عندما يتم تعديل عنصر غير دلالي ليصبح عنصرًا دلاليًا.

contenteditable

يكون العنصر الذي تم ضبط سمة contenteditable فيه على true قابلاً للتعديل، وقابلاً للتركيز، ويتم إضافته إلى ترتيب علامات التبويب كما لو تم ضبط tabindex="0". ‫Contenteditable هي سمة تعدادية تقبل القيمتين true وfalse، وتكون القيمة التلقائية لها inherit إذا لم تكن السمة متوفّرة أو كانت تتضمّن قيمة غير صالحة.

علامات الفتح الثلاث التالية متكافئة:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

في حال تضمين <style contenteditable="false">، لا يمكن تعديل العنصر (إلا إذا كان قابلاً للتعديل تلقائيًا، مثل <textarea>). إذا كانت القيمة غير صالحة، مثل <style contenteditable="😀"> أو <style contenteditable="contenteditable">، يتم ضبط القيمة تلقائيًا على inherit.

للتنقل بين الحالات، استعلم عن قيمة السمة HTMLElement.isContentEditable للقراءة فقط.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

بدلاً من ذلك، يمكن تحديد هذه السمة من خلال ضبط editor.contentEditable على true أو false أو inherit.

يمكن تطبيق السمات العامة على جميع العناصر، حتى عناصر <style>. يمكنك استخدام السمات وبعض CSS لإنشاء محرِّر CSS مباشر.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

يُرجى محاولة تغيير color الخاص بـ style إلى قيمة أخرى غير inherit. بعد ذلك، حاوِل تغيير style إلى أداة اختيار p. لا تُزِل خاصية العرض وإلا سيختفي قسم الأنماط.

سمات مخصصة

لقد تطرّقنا إلى أساسيات السمات العامة في HTML. هناك المزيد من السمات التي تنطبق على عنصر واحد فقط أو مجموعة محدودة من العناصر. حتى مع توفّر مئات السمات المحدّدة، قد تحتاج إلى سمة غير مضمّنة في المواصفات. يمكنك استخدام HTML.

يمكنك إنشاء أي سمة مخصّصة تريدها عن طريق إضافة البادئة data-. يمكنك تسمية السمة بأي اسم يبدأ بـ data- متبوعًا بأي سلسلة من الأحرف الصغيرة لا تبدأ بـ xml ولا تحتوي على نقطتين رأسيتين (:).

مع أنّ HTML يتسامح مع الأخطاء ولن يتوقف إذا أنشأت سمات غير متوافقة لا تبدأ بـ data، أو حتى إذا بدأت سماتك المخصّصة بـ xml أو تضمّنت :، إلا أنّ إنشاء سمات مخصّصة صالحة تبدأ بـ data- له فوائد. باستخدام سمات البيانات المخصّصة، ستتأكّد من أنّك لا تستخدم اسم سمة حالية عن طريق الخطأ. تضمن سمات البيانات المخصّصة عدم حدوث مشاكل في المستقبل.

على الرغم من أنّ المتصفّحات لن تنفّذ سلوكيات تلقائية لأي سمة محدّدة تبدأ بالبادئة data-، تتوفّر واجهة برمجة تطبيقات مدمجة لمجموعة البيانات للتكرار خلال سماتك المخصّصة. السمات المخصّصة هي طريقة ممتازة لنقل المعلومات الخاصة بالتطبيق في JavaScript. أضِف سمات مخصّصة إلى العناصر في شكل data-name، ويمكنك الوصول إليها من خلال DOM باستخدام dataset[name] على العنصر المعنيّ.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

يمكنك استخدام getAttribute() باستخدام اسم السمة الكامل، أو يمكنك الاستفادة من الخاصية الأبسط dataset.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

تعرض السمة dataset عنصر DOMStringMap يتضمّن سمات data- لكل عنصر. هناك عدّة سمات مخصّصة في <blockquote>. تعني سمة مجموعة البيانات أنّه ليس عليك معرفة ماهية هذه السمات المخصّصة من أجل الوصول إلى أسمائها وقيمها:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

السمات الواردة في هذه المقالة هي سمات عامة، ما يعني أنّه يمكن تطبيقها على أي عنصر HTML (مع أنّها لا تؤثر جميعها في تلك العناصر). في ما يلي، سنلقي نظرة على السمتَين target وhref من الصورة التمهيدية اللتين لم نتطرّق إليهما، بالإضافة إلى عدة سمات أخرى خاصة بالعناصر، وذلك أثناء إلقاء نظرة أكثر تفصيلاً على الروابط.

اختبِر معلوماتك

اختبِر معلوماتك حول السمات.