السمات

لقد ناقشنا السمات بشكل موجز في مقالة نظرة عامة على 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 و😀، إلى true حتى إذا كانت غير صالحة.

هذه العلامات الثلاث متكافئة:

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

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

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

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

يُرجى العلم أنّه في لغات XML، مثل SVG، يجب أن تتضمّن جميع السمات قيمة، بما في ذلك السمات المنطقية.

السمات المُدرَجة

في بعض الأحيان، يتم الخلط بين السمات المُدرَجة والسمات المنطقية. وهي سمات 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 ليس جزءًا من معرّف المقطع. يكون معرّف المقطع دائمًا هو الجزء الأخير من عنوان URL ولا يتم إرساله إلى الخادم.

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

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

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

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

ترميز صورة مفتاح التبديل هو: html <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 js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

يحتوي عنصر HTML <label> على سمة 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> أو جداول الأنماط. وبما أنّ القيمة تتضمّن ما يعادل محتوًى لوحدة نمط واحدة يتم تطبيقها على هذا العنصر فقط، لا يمكن استخدامها للمحتوى الذي تم إنشاؤه أو لإنشاء صور متحرّكة للّقطات الرئيسية أو لتطبيق أي قواعد at-rules أخرى.

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

tabindex

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

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

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

<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 لضمان توفّر وظائف الزر، بما في ذلك معالجة أحداث click وkeydown بالإضافة إلى معالجة ضغطات مفتاحَي Enter وSpace.

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

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

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

role

إنّ سمة role هي جزء من مواصفات ARIA، وليست من مواصفات HTML في WHATWG. يمكن استخدام سمة 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، و عدة سمات أخرى خاصة بالعناصر أثناء إلقاء نظرة أعمق على الروابط.

التحقّق من فهمك

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