Noscript ve progressive
<noscript> ile yedek içerik yazmayı öğrenirsin.
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