السمات

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

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

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

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

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

السمات العددية

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

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

وتعتمد القيمة التلقائية على السمة. على عكس القيم المنطقية، لا تكون السمات تلقائيًا "true" إن وجدت. إذا كنت تضمين <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>

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

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

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

style

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

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

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

tabindex

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

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

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

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

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

role

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

هناك بعض أدوات واجهة المستخدم الشائعة، مثل مربعات التحرير والسرد، وأشرطة القوائم وقوائم الجدولة وtreegrid، التي لا تحتوي على مكافئ 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. والعديد من السمات الأخرى الخاصة بالعناصر بينما نلقي نظرة أعمق على الروابط.

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

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