Noscript ve progressive

noscript ne işe yarar?

Bazı kullanıcılar JavaScript'i kapatır ya da tarayıcısı çalıştıramaz. <noscript> etiketi, tarayıcıya JavaScript olmadığında gösterilecek yedek içeriği verir. JavaScript açıksa bu içerik görünmez; kapalıysa görünür.

Örneğin bir harita widget'ın JavaScript ile çalışıyorsa, <noscript> içine bir statik bağlantı koyabilirsin: 'Harita açılmıyorsa buraya tıkla.' Bu, kullanıcıyı yarım bir sayfada bırakmamak için sade ama etkili bir yoldur. Progressive enhancement (aşamalı geliştirme) de bu fikir üzerine kuruludur.

noscript nereye konur?

<noscript> etiketinin yeri, içeriğine göre değişir. İçinde <p> ya da <a> gibi akış içeriği varsa <body> içine koyulur. İçinde <link> ya da <meta> gibi baş içi öğeleri varsa <head> içine koyulur.

Body içindeki noscript genellikle bir uyarı ya da yedek bağlantı taşır. Önemli olan, kullanıcının JavaScript'siz de bir şeyler yapabilmesini sağlamaktır. Tam sayfa çökmesini engellemek için noscript'i sayfanın önemli bölümlerine yakın tut.

Aşamalı geliştirme katmanları

Aşamalı geliştirme (progressive enhancement), üç katmanlı bir düşünce biçimidir. Alt katman HTML'dir: içeriği yapı ve anlamla sunar, JavaScript'siz de çalışır. Üzerine CSS gelir: görünüm ve düzen. En üstte JavaScript vardır: etkileşim ve canlandırma.

Her katman bir öncekine bağlıdır ama onsuz da çalışabilir. JavaScript çalışmazsa HTML ve CSS yine işini görür; CSS çalışmazsa HTML yine okunur. <noscript> bu yaklaşımın somut bir aracıdır: üst katman devrede değilken alt katmana bir köprü kurar.

Uygulama JS'li bir widget'a noscript yedek ekle

Body içine bir harita widget iskeleti yaz: id="map-widget" özniteliğine sahip bir <div> (içine dolu bir <p> koy, metin 'Harita yükleniyor'), ve hemen ardından bir <noscript> etiketi. noscript içine href'i dolu bir <a> bağlantısı koy (metin 'Harita açılmıyorsa tıkla'). Bağlantı /harita yolına gitsin.

Örnek çözümü göster

<body>
  <div id="map-widget">
    <p>Harita yükleniyor</p>
  </div>
  <noscript>
    <a href="/harita">Harita açılmıyorsa tıkla</a>
  </noscript>
</body>

Kendini test et

noscript ne zaman görünür olur?
- JavaScript açıkken
- JavaScript kapalıyken
- Yalnızca mobilde
- Yalnızca CSS ile
Cevabı göster

JavaScript kapalıyken — Doğru. noscript, JavaScript kapalı ya da çalışmıyorken görünür.

noscript etiketini tamamla

<____>JavaScript kapalıysa yedek içerik gösterilir.</noscript>

Cevabı göster

<noscript>JavaScript kapalıysa yedek içerik gösterilir.</noscript>

Kavramı rolüyle eşleştir

noscript

JS'siz yedek gösterir
Progressive enhancement

Önce HTML, sonra katman
Statik HTML

JS olmadan çalışır
Hydration

JS HTML'i canlandırır

Sıradaki ders: Özet - Bileşen iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler