מגמות עדכניות ב-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 Video