Şablon ve noscript
<template> ve <noscript> ile progressive enhancement kurarsın.
Template ve progressive enhancement
Bu derste <template> ve <noscript> ile progressive enhancement kuracaksın. Sayfa JavaScript olmadan da çalışmalı; JavaScript etkinse ek özellik gelir.
<template> etiketi içeriği inert tutar: tarayıcı ayrıştırır ama render etmez. JavaScript etkin olduğunda klonlanıp sayfaya eklenir. Web bileşenlerinde <slot> ile birlikte kullanıldığında dışarıdan içerik yerleştirilebilir. Bu projede son dakika haberleri için bir şablon hazırlayacaksın.
noscript ile yedek içerik
<noscript> etiketi, tarayıcıda JavaScript kapalıyken gösterilen yedek içeriği taşır. Ziyaretçiye JavaScript gerekli olan bir özelliği açıkça belirtmenin standart yoludur.
Bu projede son dakika haberleri <template> içinde tutulur. JavaScript etkinse klonlanıp gösterilir; değilse <noscript> içindeki uyarı gösterilir. Böylece her iki durumda da ziyaretçi bilgilendirilir; sayfa JavaScript'siz de anlamlıdır.
Uygulama main içine template ve noscript ekle
Önceki dersin article içeren main'ini al. <article>'den sonra bir <template> ekle; id="son-dakika-sablonu" özniteliğiyle işaretle. Template'nin içine bir <article> koy, article'ın içine h2 (örnek Son dakika başlığı) ve p (örnek Detaylar yükleniyor...) ekle. Template'den sonra bir <noscript> ekle; içine bir <p> koy (örnek Son dakika haberleri için JavaScript'i etkinleştirin.).
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hızlı Haber - Ana sayfa</title>
<link rel="preconnect" href="https://cdn.hizlihaber.com">
<link rel="dns-prefetch" href="https://cdn.hizlihaber.com">
<link rel="preload" as="image" href="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp">
</head>
<body>
<header>
<h1>Hızlı Haber</h1>
<p>Türkiye'nin hızlı haber kaynağı</p>
</header>
<main>
<article>
<h2>Borsa rekor tazeledi</h2>
<img src="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp"
srcset="https://cdn.hizlihaber.com/kapak/ana-haber-480.webp 480w,
https://cdn.hizlihaber.com/kapak/ana-haber-960.webp 960w,
https://cdn.hizlihaber.com/kapak/ana-haber-1440.webp 1440w"
sizes="(max-width: 600px) 100vw, 50vw"
width="960" height="540"
alt="Borsa ekranında yükselen grafik"
loading="lazy" decoding="async">
</article>
<template id="son-dakika-sablonu">
<article>
<h2>Son dakika başlığı</h2>
<p>Detaylar yükleniyor...</p>
</article>
</template>
<noscript>
<p>Son dakika haberleri için JavaScript'i etkinleştirin.</p>
</noscript>
</main>
</body>
</html>Kendini test et
-
<noscript> etiketinin içeriği ne zaman gösterilir?
- Sayfa yüklenirken her zaman
- Yalnızca mobil cihazlarda
- CSS kapalıyken
- Tarayıcı JavaScript'i desteklemiyorsa veya kapalıysa
Cevabı göster
Tarayıcı JavaScript'i desteklemiyorsa veya kapalıysa — Doğru. noscript içeriği yalnızca JavaScript kapalıyken veya desteklenmediğinde gösterilir.
-
noscript içeriğini tamamla
<noscript> ____ </noscript>Cevabı göster
<noscript> <p>JavaScript gerekli</p> </noscript> -
Etiketi rolüyle eşleştir
- template
- İçeriği inert tutar
- noscript
- JavaScript'siz yedek
- slot
- Şablon içine içerik yeri
- script
- JavaScript kodu taşır