html5 - ماهو - weschool html




هل العناصر المخصصة صالحة لـ HTML5؟ (8)

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

<greeting>Hello!</greeting>

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

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

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


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

تكون العناصر والسمات المخصصة صالحة في 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


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

<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.

بعض الموارد


لإعطاء إجابة محدثة تعكس الصفحات الحديثة.

علامات مخصصة صالحة إذا ،

1) تحتوي على شرطة

<my-element>

2) هم جزءا لا يتجزأ من XML

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

هذا يفترض أنك تستخدم HTML5 doctype <!doctype html>

بالنظر إلى هذه القيود البسيطة ، من المنطقي الآن أن تبذل قصارى جهدك للحفاظ على ترميز HTML الخاص بك (يرجى التوقف عن إغلاق العلامات مثل <img> و <hr> ، إنه سخيف وغير صحيح ما لم تستخدم نوع XHTML ، والذي ربما لا تحتاج إليه ).

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


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

يجب على وكلاء المستخدم التعامل مع العناصر والسمات التي لا يفهمونها على أنها محايدة دلاليًا ؛ تركهم في 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 (مدونتي)


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

على سبيل المثال ، يجب أن يكون عنصر الجذر عنصر 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

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

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


data-* تكون الصفات صالحة في HTML5 وحتى في HTML4 تستخدم جميع متصفحات الويب لاحترامها. تعد إضافة علامات جديدة أمرًا فنيًا جيدًا ، ولكن لا يوصى بها نظرًا لأن:

  1. قد تتعارض مع شيء مضاف في المستقبل ، و
  2. يجعل مستند HTML غير صالح ما لم تتم إضافته ديناميكيًا عبر JavaScript.

أستخدم علامات مخصصة فقط في الأماكن التي لا تهتم بها Google ، بالنسبة إلى العينة في iframe لمحرك الألعاب ، فقد قمت بعمل علامة <log> تحتوي على <msg> و <error> و <warning> - ولكن من خلال JavaScript فقط. وكان صحيحا تماما ، وفقا لمصدق. حتى أنه يعمل في Internet Explorer بتصميمه! .]





custom-element