Najnowsze trendy w HTML-u

Ten artykuł wyjaśnia najnowsze trendy w HTML-u.

To wyjaśnia znaczniki, które zostały stosunkowo niedawno dodane w HTML5.

YouTube Video

Najnowsze trendy w HTML-u

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

• Znacznik <template> służy do definiowania wielokrotnego użytku fragmentów HTML, które pozostają ukryte do momentu aktywacji za pomocą JavaScript.

• Używając tagu <template>, możesz dynamicznie tworzyć wielokrotnego użytku komponenty interfejsu użytkownika, takie jak karty lub elementy listy. Pomaga to również zmniejszyć powielanie kodu i poprawić utrzymanie w aplikacjach na dużą skalę.

• W tym przykładzie kliknięcie przycisku 'Użyj szablonu' wyświetla zawartość tagu <template>.

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

• Tag <slot> działa jako miejsce wstrzykiwania treści w komponencie sieciowym, aby wyświetlić treść przekazaną z elementu nadrzędnego.
  • Jeśli dla slotu nie zostanie dostarczona żadna treść, zostanie wyświetlona treść zastępcza (domyślna treść zapisana bezpośrednio wewnątrz tagu <slot>).
• W tym przykładzie nazwane sloty (header i footer) są zdefiniowane wewnątrz elementu <template>.
• <my-element> jest zdefiniowanym przez użytkownika niestandardowym elementem HTML. Atrybut slot w tagu <p> wewnątrz tego elementu określa nazwę slotu i treść, która ma być w niego wstawiona.

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

• Znacznik <dialog> służy do definiowania interaktywnych okien, takich jak modale lub wyskakujące okna. Możesz kontrolować otwieranie i zamykanie za pomocą JavaScript.

• W tym przykładzie kliknięcie przycisku 'Otwórz dialog' wyświetla okno dialogowe.

Atrybut inputmode w tagu <input>

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

• Atrybut inputmode w tagu <input> określa rodzaj wirtualnej klawiatury wyświetlanej na urządzeniach dotykowych, poprawiając tym samym doświadczenie użytkownika. Na przykład, inputmode="tel" wyświetla klawiaturę numeryczną do wprowadzania numeru telefonu.
• Atrybut inputmode służy jedynie do dostosowania wyświetlania wirtualnej klawiatury i nie weryfikuje wprowadzonej treści. Aby wymusić ograniczenia wprowadzania, musisz użyć atrybutu type lub walidacji w JavaScript.
• Ponieważ nie wszystkie przeglądarki i urządzenia w pełni to obsługują, najlepiej przygotować odpowiednie rozwiązania alternatywne.
• Atrybut inputmode może przyjmować następujące wartości. Każda wartość służy do wyświetlenia określonego typu wprowadzenia lub wirtualnej klawiatury.

Atrybut theme-color w znaczniku <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)">

• Atrybut theme-color w znaczniku <meta> służy do dostosowywania koloru paska adresu i interfejsu użytkownika w zgodnych przeglądarkach mobilnych.
• Na przykład może przełączać się między trybem ciemnym a jasnym, używając atrybutu media.

Te znaczniki i atrybuty są rozwinięciem HTML5 i stały się podstawowymi elementami nowoczesnego tworzenia stron internetowych. Zaleca się sprawdzenie wsparcia i zgodności z konkretnymi przeglądarkami podczas ich używania.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video