tags ماهو - هل العناصر المخصصة صالحة لـ HTML5؟




شرح mdn (10)

لم أتمكن من العثور على إجابة محددة لما إذا كانت العلامات المخصصة صالحة في HTML5 ، على النحو التالي:

<greeting>Hello!</greeting>

لقد وجدت شيئا في المواصفات بطريقة أو بأخرى:

http://dev.w3.org/html5/spec/single-page.html

والعلامات المخصصة لا يبدو للتحقق من صحة مع مدقق W3C.


Answers

أود أن أشير إلى أن كلمة "صالح" يمكن أن يكون لها معنيان مختلفان في هذا السياق ، أيهما يحتمل أن يكون صحيحا.

  1. هل يجب اعتبار مستند HTML ذي العلامات المخصصة HTML5 صالحًا؟ الجواب على هذا بوضوح هو "لا". تسرد المواصفات بالضبط ما هي العلامات الصحيحة في السياقات. ولهذا السبب لن يقبل مدقق HTML وثيقة ذات علامات مخصصة ، أو مع علامات قياسية في الأماكن غير الصحيحة (مثل علامة "img" في العنوان).

  2. هل سيتم تحليل مستند HTML مع علامات مخصصة وعرضه بطريقة قياسية محددة بوضوح عبر المتصفحات؟ هنا ، ربما من المدهش ، أن الإجابة هي "نعم". على الرغم من أن المستند لن يعتبر من الناحية الفنية HTML5 ، إلا أن مواصفات HTML5 تحدد بالضبط المتصفحات التي من المفترض القيام بها عندما ترى علامة مخصصة: باختصار ، تعمل العلامة المخصصة مثل <span> - فهذا لا يعني شيئًا لا يفعل شيئًا افتراضيًا ، ولكن يمكن تنسيقه بواسطة HTML والوصول إليه بواسطة جافا سكريبت.


تعتبر عناصر HTML المخصصة معيار W3 جديد ساهمت فيه مما يتيح لك الإعلان عن العناصر المخصصة وتسجيلها باستخدام المحلل اللغوي ، يمكنك قراءة المواصفات هنا: dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/… . بالإضافة إلى ذلك ، تدعم Microsoft مكتبة (مكتوبة بواسطة برامج Mozilla السابقة) ، تسمى X-Tag - مما يجعل العمل مع Web Components أكثر سهولة.


هذا هو في الواقع نتيجة لتراكم نموذج المحتوى للعناصر.

على سبيل المثال ، يجب أن يكون عنصر الجذر عنصر html .

قد يحتوي عنصر html فقط على عنصر رئيسي متبوعًا بعنصر نص أساسي.

يمكن أن يحتوي عنصر النص الأساسي فقط على محتوى التدفق حيث يتم تعريف محتوى التدفق على أنه العناصر: a ، abbr ، address ، area (إذا كان سليلًا لأحد عناصر الخريطة) ، أو المقالة ، أو جانباً ، أو الصوت ، أو b ، أو bdi ، أو bdo ، أو blockquote ، أو br، button، canvas، cite، code، command، datalist، del، details، dfn، div dl، em، embed، fieldset، figure، footer، form، h1، h2، h3، h4، h5، h6، header، hgroup ، hr، i، iframe، img، input، ins، kbd، keygen، label، map، mark، math، menu، meter، nav، noscript، object، ol، output، p، pre، progress، q، ruby، s ، samp، script، section، select، small، span، strong، style (if the scoped attribute is present)، sub، sup، svg، table، textarea، time، u، ul، var، video، wbr and Text

وما إلى ذلك وهلم جرا.

في أي وقت ، يقول نموذج المحتوى "يمكنك وضع أي عناصر تريدها في هذا" ، والتي ستكون ضرورية للعناصر / العلامات المخصصة.


العناصر والسمات المخصصة الأساسية

تكون العناصر والسمات المخصصة صالحة في HTML ، بشرط:

  • أسماء العناصر صغيرة وتبدأ بـ x-
  • أسماء السمات صغيرة وتبدأ data-

على سبيل المثال ، <x-foo data-bar="gaz"/> أو <br data-bar="gaz"/> .

هناك اتفاقية مشتركة للعناصر هي x-foo ؛ ينصح x-vendor-feature .

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

عناصر وسمات مخصصة متقدمة

اعتبارًا من عام 2014 ، هناك طريقة جديدة محسّنة كثيرًا لتسجيل العناصر والسمات المخصصة. لن تعمل في المتصفحات القديمة مثل IE 9 أو Chrome / Firefox 20. ولكنها تسمح لك باستخدام واجهة HTMLElement القياسية ، ومنع التصادمات ، واستخدام أسماء HTMLElement x-* و HTMLElement ، وتحديد السلوك المخصص وبناء الجملة للمتصفح على الاحترام. إنها تتطلب القليل من جافا سكريبت الفارغ ، كما هو مفصل في الروابط أدناه.

html5rocks.com/en/tutorials/webcomponents/customelements
WebComponents.org - مقدمة لعناصر مخصصة
W3C - مكونات الويب: عناصر مخصصة

فيما يتعلق بصلاحية بناء الجملة الأساسية

كان استخدام data-* لأسماء السمات المخصصة ساريًا تمامًا لبعض الوقت ، بل ويعمل أيضًا مع الإصدارات الأقدم من HTML.

W3C - HTML5: قابلية التوسعة

أما بالنسبة لأسماء العناصر المخصصة (غير المسجلة) ، فإن W3C توصي بشدة ضدها وتعتبرها غير مطابقة. ولكن المتصفحات مطلوبة لدعمها ، ولن تتعارض معرفات x-* مع مواصفات HTML المستقبلية ، ولن تتعارض معرفات x-vendor-feature مع مطورين آخرين. يمكن استخدام DTD مخصص للتغلب على أي متصفحات صغيرة.

إليك بعض المقتطفات ذات الصلة من المستندات الرسمية:

"قد تطبّق المواصفات القابلة للتطبيق محتوى جديدًا للوثيقة (على سبيل المثال عنصر foobar) [...]. إذا لم يتغير بناء الجملة والدلالات الخاصة بمستند HTML5 المطابق المحدد باستخدام المواصفة (المواصفات) المطبقة ، فسيظل هذا المستند HTML5 متوافقًا وثيقة ".

"يجب على وكلاء المستخدم التعامل مع العناصر والسمات التي لا يفهمونها على أنها محايدة دلالة ؛ تركهم في DOM (لمعالجات DOM) ، وتصفيفهم وفقًا لـ CSS (لمعالجات CSS) ، ولكن لا يستنتجون أي معنى منها."

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

"يجب استخدام واجهة HTMLUnknownElement لعناصر HTML التي لم يتم تعريفها بواسطة هذه المواصفات."

W3C - HTML5: مطابقة المستندات
WhatWG - HTML Standard: DOM Elements


من الممكن والمسموح به:

يجب على وكلاء المستخدم التعامل مع العناصر والسمات التي لا يفهمونها على أنها محايدة دلاليًا ؛ تركهم في DOM (لمعالجات DOM) ، وتصفيفها وفقًا لـ CSS (لمعالجات CSS) ، ولكن دون استنتاج أي معنى منها.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

ولكن ، إذا كنت تنوي إضافة تفاعلية ، فستحتاج إلى جعل المستند الخاص بك غير صالح (ولكن لا يزال يعمل بشكل كامل) لاستيعاب IE في 7 و 8.

راجع http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (مدونتي)


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

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

سيعمل بشكل جيد تمامًا (في الإصدارات الأحدث من Google Chrome و IE و FireFox و Safari للجوّال حتى الآن). كل ما تحتاجه هو مجرد حرف ألفا (az ، AZ) لبدء العلامة ، وبعد ذلك يمكنك استخدام أي من أحرف غير ألفا بعد. إذا كنت في CSS ، فيجب استخدام "\" (الشرطة المائلة للخلف) للعثور على العنصر ، مثل ما تحتاجه Query \ ^ {...}. لكن في JS ، أنت فقط تسميها كيف تراها. آمل أن يساعد هذا. انظر المثال here

-Mink CBOS


العلامات المخصصة غير صالحة في HTML5. لكن المتصفحات حاليًا تدعم تحليلها ويمكنك أيضًا استخدامها باستخدام css. لذا إذا كنت تريد استخدام علامات مخصصة للمتصفحات الحالية ، فيمكنك ذلك. ولكن قد يتم سحب الدعم بمجرد أن تنفذ المتصفحات معايير W3C بشكل صارم من أجل تحليل محتوى HTML.


تتوفر مواصفات Custom Elements في Chrome و Opera ، وتصبح متاحة في المتصفحات الأخرى . يوفر وسيلة لتسجيل العناصر المخصصة بطريقة رسمية.

العناصر المخصصة هي أنواع جديدة من عناصر DOM التي يمكن تعريفها بواسطة المؤلفين. على عكس decorators ، التي هي عديمة الجنسية وعابرة ، يمكن للعناصر المخصصة تغليف الحالة وتوفير واجهات البرامج النصية.

تعد العناصر المخصصة جزءًا من مواصفات W3 أكبر تسمى مكونات الويب ، بالإضافة إلى النماذج و HTML الواردات و Shadow DOM.

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

ومع ذلك ، من هذه الجولة الممتازة عبر المقالة حول Google Developers حول Custom Elements v1:

يجب أن يحتوي اسم عنصر مخصص على شرطة ( - ). لذلك ، <x-tags> ، <my-element> ، و <my-awesome-app> كلها أسماء صالحة ، بينما <tabs> و <foo_bar> ليسا كذلك. هذا المطلب هو أن محلل HTML يمكن أن يميز العناصر المخصصة من العناصر العادية. كما يضمن توافقًا للأمام عند إضافة علامات جديدة إلى HTML.

بعض الموارد


نقلا عن قسم القابلية للتوسعة في مواصفات HTML5 :

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

لذلك إذا كنت تستخدم تسلسل XML لـ HTML5 ، فيمكنك إجراء شيء مثل هذا:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

ومع ذلك ، إذا كنت تستخدم بناء جملة HTML فأنت أكثر محدودية في ما يمكنك القيام به.

بالنسبة لميزات مستوى الترميز التي تم تصميمها للاستخدام مع بناء جملة HTML ، يجب أن تقتصر الامتدادات على السمات الجديدة للنموذج "x-vendor-feature" [...] يجب ألا يتم إنشاء أسماء عناصر جديدة.

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

بالنسبة للمؤلف ، على الرغم من أنه قد يكون قانونيًا تضمين عنصر مخصص في الصفحة (على الأقل في عملية تحويل البيانات إلى ملف XML) ، فلن تحصل على أي شيء أكثر من عقدة في DOM. إذا كنت تريد أن يقوم عنصرك المخصص بالفعل بعمل شيء ما ، أو أن يتم عرضه بطريقة خاصة ، يجب أن تبحث في dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/… .

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

على سبيل المثال ، قد يبدو تعريف بسيط لعنصر greeting شيئًا كالتالي:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

هذا يخبر المتصفح بعرض محتوى العنصر بين علامتي تنصيص ، مسبوقًا بالنص "سيمون يقول:" وهو مصمم بلون رمادي. عادةً ما يتم تخزين تعريف عنصر مخصص مثل هذا في ملف html منفصل يمكنك استيراده باستخدام ارتباط.

<link rel="import" href="greeting-definition.html" />

على الرغم من أنه يمكنك أيضًا تضمينها مضمنة إذا كنت تريد ذلك.

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


أفضل حل هو استخدام إدخال النص وإضافة السمة inputmode = "url" لتوفير تسهيلات لوحة مفاتيح URL. تم التفكير في مواصفات HTML5 لهذا الغرض. إذا كنت تحتفظ type = "url" فإنك تحصل على التحقق من بناء الجملة الذي لا يفيد في كل حالة (من الأفضل التحقق مما إذا كانت ترجع خطأ 404 بدلاً من بناء الجملة الذي يكون متسامحا تماما وليس من مساعدة كبيرة).

لديك أيضًا إمكانية تجاوز النقش الافتراضي باستخدام نمط السمة = "https؟: //.+" على سبيل المثال ليكون أكثر تسامحًا.

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

يعد استخدام jQuery لتعطيل التحقق من الصحة حلاً سيئًا لأنه يجب أن يعمل بدون JavaScript.

في حالتي ، أضع عنصر تحديد مع خيارين (http: // أو https: //) قبل إدخال عنوان URL لأنني أحتاج فقط إلى مواقع الويب (وليس ftp: // أو أشياء أخرى). بهذه الطريقة ، أتجنب كتابة هذه البادئة الغريبة (وهي الأسف الأكبر لـ Tim Berners-Lee وربما المصدر الرئيسي لأخطاء بنية عنوان URL) ، وأستخدم إدخال نص بسيط مع inputmode = "url" مع العناصر النائبة (بدون HTTP). أستخدم نصوص jQuery و server الجانبية للتحقق من الوجود الحقيقي لموقع الويب (لا 404) ولإزالة البادئة HTTP إذا تم إدخالها (أتجنب استخدام نمط مثل pattern = "^ ((؟ http).) * $" لمنع وضع البادئة لأنني أعتقد أنه من الأفضل أن تكون أكثر تسامحًا)





html5 tags element custom-element