HTML'deki Son Eğilimler

Bu makale, HTML'deki son eğilimleri açıklamaktadır.

Bu, HTML5'e nispeten yakın bir zamanda eklenmiş etiketleri açıklar.

YouTube Video

HTML'deki Son Eğilimler

<template> Etiketi

 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> etiketi, JavaScript ile etkinleştirilene kadar gizli kalan, yeniden kullanılabilir HTML parçalarını tanımlamak için kullanılır.

• <template> etiketini kullanarak, kartlar veya liste öğeleri gibi yeniden kullanılabilir dinamik UI bileşenleri oluşturabilirsiniz. Bu aynı zamanda büyük ölçekli uygulamalarda kod yinelenmesini azaltır ve sürdürülebilirliği artırır.

• Bu örnekte, 'Şablonu Kullan' düğmesine tıklamak <template> etiketinin içeriğini gösterir.

<slot> etiketi

 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> etiketi, ana öğeden geçen içeriği göstermek için bir web bileşeni içinde yer tutucu görevi görür.
  • Bir slot için içerik sağlanmazsa, yedek içerik (doğrudan <slot> etiketinin içine yazılan varsayılan içerik) görüntülenir.
• Bu örnekte, <template> elementi içinde adlandırılmış slotlar (header ve footer) tanımlanmıştır.
• <my-element> kullanıcı tarafından tanımlanan özel bir HTML öğesidir. Bu öğe içerisindeki <p> etiketindeki slot özelliği, slot adını ve slota eklenmesi gereken içeriği belirler.

<dialog> Etiketi

 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> etiketi, modal veya pop-up gibi etkileşimli pencereleri tanımlamak için kullanılır. Açılıp kapanmayı JavaScript kullanarak kontrol edebilirsiniz.

• Bu örnekte, 'Diyaloğu Aç' düğmesine tıklamak diyaloğu gösterir.

<input> etiketinin inputmode özelliği

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

• <input> etiketinin inputmode özelliği, dokunmatik cihazlarda görüntülenen sanal klavye türünü belirler ve kullanıcı deneyimini geliştirir. Örneğin, inputmode="tel" telefon numarası girişi için bir sayısal klavye görüntüler.
• inputmode özelliği yalnızca sanal klavye görünümünü ayarlamak içindir ve giriş içeriğini doğrulamaz. Giriş kısıtlamalarını uygulamak için type özelliğini veya JavaScript doğrulamasını kullanmanız gerekir.
• Tüm tarayıcılar ve cihazlar bunu tam olarak desteklemediği için uygun yedekler hazırlamak en iyisidir.
• inputmode özelliği şu değerleri alabilir. Her bir değer, belirli bir giriş türünü veya sanal klavyeyi görüntülemek için kullanılır.

<meta> etiketinin theme-color özelliği

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)">

• <meta> etiketinin theme-color özelliği, uyumlu mobil tarayıcılarda adres çubuğunun ve kullanıcı arayüzünün rengini özelleştirmek için kullanılır.
• Örneğin, media özelliğini kullanarak karanlık mod ve aydınlık mod arasında geçiş yapabilir.

Bu etiketler ve özellikler, HTML5'ten gelen gelişmelerdir ve modern web geliştirmede temel öğeler haline gelmiştir. Kullanırken belirli tarayıcı desteğini ve uyumluluğunu kontrol etmeniz önerilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video