Недавние тенденции в 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