السمات

تمت مناقشة السمات بإيجاز في قسم نظرة عامة على ترميز 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">

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

في حال وجود سمة منطقية، تكون true دائمًا. تشمل السمات المنطقية 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">

إذا كانت قيمة السمة خاطئة، احذفها. إذا كانت السمة صحيحة، يجب تضمين السمة ولكن لا تقدّم قيمة. على سبيل المثال، لا تعتبر 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 واحدًا: قيمة العنصر الواحد الذي يتم التركيز عليه (يمكن التركيز على عنصر واحد فقط في كل مرة).

ملاحظة: باستخدام aria-labelledby، يمكنك إنشاء ارتباط عكسي من عنصر تحكّم في نموذج إلى تصنيفات متعددة، بما في ذلك النص غير المضمّن في <label>، سواء كانت التصنيفات النصية أكثر من عنصر تحكّم واحد للنموذج أم لا. إذا كان عنصر التحكّم يحتوي على كل من <label> وaria-labelledby، تكون الأولوية لـ aria-labelledby، ولن يسمع المستخدمون النص <label> ما لم يتضمن aria-labelledby معرّف التصنيف.

class

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

ملاحظة: يمكن اختيار العناصر باستخدام أدوات اختيار CSS وطرق DOM استنادًا إلى أسماء العناصر والسمات وقيم السمات وموضعها في شجرة نموذج العناصر في المستند (DOM) وما إلى ذلك. توفّر لغة HTML الدلالية عناصر جذب ذات مغزى، ما يجعل إضافة أسماء الفئات غير ضرورية غالبًا. الفرق الفريد بين تضمين اسم فئة واستخدام document.getElementsByClassName() مقابل عناصر الاستهداف استنادًا إلى السمات وبنية الصفحة باستخدام document.querySelectorAll() الأكثر فعالية هو أنّ الأولى تعرض قائمة عُقد مباشرة، في حين أنّ الثانية ثابتة.

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

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

style

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

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

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

tabindex

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

تأخذ السمة tabindex قيمتها عددًا صحيحًا. القيمة السالبة (الاصطلاح هو استخدام -1) تجعل العنصر قادرًا على تلقي التركيز، مثل عن طريق JavaScript، ولكنه لا يضيف العنصر إلى تسلسل علامات التبويب. في حال ضبط قيمة tabindex في 0 على العنصر، يمكن التركيز عليه والوصول إليه من خلال مفتاح التبويب (Tab)، ما يؤدي إلى إضافته إلى ترتيب علامات التبويب التلقائي للصفحة بترتيب رمز المصدر. تضع القيمة 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 لضمان الالتزام بوظائف الزر، بما في ذلك التعامل مع حدثَي النقر والنقر على المفتاح، بالإضافة إلى التعامل مع الضغطات على مفتاحَي Enter وSpace.

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

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

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

role

تشكّل السمة role جزءًا من مواصفات ARIA، بدلاً من مواصفات whatWG HMTL. يمكن استخدام السمة role لتوفير معنى دلالي للمحتوى، ما يتيح لبرامج قراءة الشاشة إبلاغ مستخدمي الموقع الإلكتروني بالتفاعل المتوقّع مع المستخدم.

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

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

contenteditable

يمكن تعديل عنصر تم ضبط السمة contenteditable عليه على true ويمكن التركيز عليه وتتم إضافته إلى ترتيب التنقل بـ Tab كما لو تم ضبط 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، والعديد من السمات الأخرى الخاصة بالعناصر بينما نفحص الروابط بالتفصيل.

التحقّق من استيعابك

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

يجب أن يكون id فريدًا في المستند.

خطأ

يُرجى إعادة المحاولة.

صحيح

إجابة صحيحة

اختَر السمة المخصّصة بالتنسيق الصحيح.

data-birthday

صحيح

birthday

يُرجى إعادة المحاولة.

data:birthday

إعادة المحاولة