الاتجاهات الحديثة في HTML

تشرح هذه المقالة الاتجاهات الحديثة في HTML۔

يشرح هذا العلامات التي تم إضافتها مؤخرًا في HTML5۔

YouTube Video

الاتجاهات الحديثة في HTML

علامة <template>

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

• تُستخدم علامة <template> لتعريف أجزاء HTML القابلة لإعادة الاستخدام والتي تظل مخفية حتى يتم تنشيطها عبر JavaScript۔

• من خلال استخدام علامة <template>، يمكنك إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام ديناميكيًا، مثل البطاقات أو عناصر القائمة.۔ كما يساعد ذلك في تقليل تكرار الأكواد وتحسين قابلية الصيانة في التطبيقات واسعة النطاق.۔

• في هذا المثال، يؤدي النقر على زر 'استخدام القالب' إلى عرض محتوى وسم <template>۔

علامة <slot>

 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>

• تعمل علامة <slot> كحاوية داخل مكون ويب لعرض المحتوى الذي يتم تمريره من العنصر الرئيسي.۔
  • إذا لم يتم توفير محتوى لفتحة معينة، فسيتم عرض المحتوى الافتراضي (المكتوب مباشرة داخل علامة <slot>).۔
• في هذا المثال، يتم تعريف الفتحات المسماة (header وfooter) داخل عنصر <template>.۔
• <my-element> هو عنصر HTML مخصص تم تعريفه من قبل المستخدم.۔ تحدد خاصية slot في علامة <p> داخل هذا العنصر اسم الفتحة والمحتوى المراد إدراجه في تلك الفتحة.۔

علامة <dialog>

 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

• تُستخدم علامة <dialog> لتعريف النوافذ التفاعلية مثل النماذج المنبثقة أو نوافذ الحوار۔ يمكنك التحكم في الفتح والإغلاق باستخدام JavaScript۔

• في هذا المثال، يؤدي النقر على زر 'فتح الحوار' إلى عرض الحوار۔

خاصية inputmode في علامة <input>

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">

• تحدد خاصية inputmode في علامة <input> نوع لوحة المفاتيح الافتراضية التي تظهر على الأجهزة التي تعمل باللمس، مما يعزز تجربة المستخدم.۔ على سبيل المثال، inputmode="tel" يعرض لوحة مفاتيح رقمية لإدخال أرقام الهواتف.۔
• خاصية inputmode تُستخدم فقط لتعديل عرض لوحة المفاتيح الافتراضية ولا تقوم بالتحقق من صحة المحتوى المدخل.۔ لفرض قيود على المدخلات، تحتاج إلى استخدام خاصية type أو التحقق من خلال JavaScript.۔
• نظرًا لأن جميع المتصفحات والأجهزة لا تدعم هذه الخاصية بالكامل، فمن الأفضل تحضير حلول بديلة مناسبة.۔
• يمكن لخاصية inputmode أن تأخذ القيم التالية:۔ كل قيمة تُستخدم لعرض نوع معين من الإدخال أو لوحة المفاتيح الافتراضية.۔

سمة theme-color في وسم <meta>

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

• تُستخدم سمة theme-color في وسم <meta> لتخصيص لون شريط العنوان وواجهة المستخدم في متصفحات الهواتف المحمولة المتوافقة۔
• على سبيل المثال، يمكنه التبديل بين الوضع المظلم والوضع الفاتح باستخدام السمة media۔

هذه الأوسمة والسمات هي تحسينات من HTML5 وأصبحت عناصر أساسية في تطوير الويب الحديث۔ يوصى بالتحقق من دعم المتصفحات المحددة والتوافق عند استخدامها۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video