HTML hidden ve inert Öznitelikleri: Gizlemek ile Etkisiz Kılmak

hidden özniteliğinin değerleri

hidden numaralandırılmış (enumerated) bir özniteliktir ve şu değerlerden birini alır: hidden anahtar sözcüğü, until-found anahtar sözcüğü ya da boş değer. Geçersiz değerler de öğeyi gizli duruma sokar. Bu yüzden aşağıdaki dört satırın hepsi aynı sonucu verir:

<span hidden>Gizli</span>
<span hidden="">Bu da gizli</span>
<span hidden="hidden">Bu da gizli</span>
<span hidden="muz">Geçersiz değer, yine gizli</span>

<span hidden="until-found">Bulunana kadar gizli</span>

Son satır farklıdır: until-found öğeyi "hidden until found" durumuna sokar. Bu iki durumun davranışı oldukça farklı olduğu için ayrı başlıklarda inceleyelim.

Gizli durum (hidden state)

Gizli durum, öğenin sayfa için şu anda ilgili olmadığını ya da sayfanın başka bölümlerinin yeniden kullanacağı içeriği taşıdığını ve kullanıcıya doğrudan sunulmaması gerektiğini anlatır. MDN'nin örneği, kullanıcı oturum açmadan kullanılamayacak bölümlerdir. Tarayıcı gizli durumdaki öğeleri çizmez.

Tarayıcılar bu durumu display: none ile uygulayabilir; bu durumda öğe sayfa düzenine hiç katılmaz, kutusu oluşmaz. Önemli bir yan etki: CSS ile öğenin display değerini değiştirirseniz gizli durum geçersiz kalır. Örneğin bir stil kuralı öğeye display: block verirse hidden olsa bile öğe görünür. Bir öğenin neden gizlenmediğini araştırırken ilk bakılacak yer budur.

<div>Görünen kutu</div>
<div hidden>Bu kutu çizilmez, yer de kaplamaz.</div>
<div>Görünen ikinci kutu</div>

Bulunana kadar gizli: hidden="until-found"

Bu durumda öğe gizlidir, ancak içeriği tarayıcının "Sayfada bul" özelliğine ve parça (fragment) gezintisine açıktır. Bu özelliklerden biri sayfayı gizli alt ağaçtaki bir öğeye kaydırmak istediğinde tarayıcı sırasıyla şunları yapar:

• Gizli öğede bir beforematch olayı tetikler.
• Öğeden hidden özniteliğini kaldırır.
• Sayfayı öğeye kaydırır.

Böylece bir bölümü daraltılmış tutup kullanıcının arama ya da bağlantı ile yine de bulmasını sağlayabilirsiniz. Tarayıcılar bu durumu genellikle content-visibility: hidden ile uygular. Bunun sonucu olarak, düz gizli durumdan farklı olarak öğenin kutusu oluşur: sayfa düzenine katılır, kenar boşluğu, kenarlığı, iç boşluğu ve arka planı çizilir. Yalnızca içerik görünmez.

<a href="#iade-kosullari">İade koşullarına git</a>

<h2>Sık sorulanlar</h2>
<div id="iade-kosullari" hidden="until-found">
  <p>Ürünü 14 gün içinde faturasıyla birlikte iade edebilirsiniz.</p>
</div>

Bu örnekte bağlantıya tıklanınca tarayıcı parça gezintisi başlatır, beforematch olayı tetiklenir, öznitelik kaldırılır ve bölüm görünür hâlde ekrana kaydırılır. Kullanıcı aynı bölümü "Sayfada bul" ile "14 gün" yazarak da açabilir. Olayı dinlemek için kısa bir betik yeterlidir:

const bolum = document.querySelector("#iade-kosullari");
bolum.addEventListener("beforematch", () => {
  console.log("Bölüm açılıyor");
});

Aynı ihtiyaç için details ve summary öğeleri de bir seçenektir; aralarındaki fark, <details> öğesinin kullanıcıya kendi aç-kapat denetimini sunması, hidden="until-found" özniteliğinin ise açma arayüzünü size bırakmasıdır.

hidden kullanırken uyulacak kurallar

• hidden içeriği yalnızca bir sunumdan gizlemek için kullanılmaz. Gizlenen öğe ekran okuyucular dahil tüm sunumlardan gizlenir.
• Gizli öğelere, until-found dışında, görünen öğelerden bağlantı verilmemelidir. Örneğin hidden taşıyan bir bölüme href ile bağlantı vermek yanlıştır; içerik ilgili değilse bağlantısı da olmamalıdır.
• Gizli bir açıklamaya aria-describedby ile başvurmak ise uygundur; açıklama kendi başına gerekli olmasa da bu başvuru aracılığıyla bağlam sağlar. Bkz. aria-describedby.
• Gizli bir <canvas> öğesi bir çizim motoru için ekran dışı tampon olarak, gizli bir form öğesi de başka bir denetimin form özniteliğiyle başvurduğu öğe olarak kullanılabilir.
• Gizli öğenin alt öğeleri hâlâ etkindir: içindeki <script> öğeleri çalışır, form öğeleri gönderilir.

<div hidden>
  <script>
    console.warn("Gizliyim ama çalışıyorum");
  </script>
</div>

Son kural sık gözden kaçar. hidden bir güvenlik ya da devre dışı bırakma aracı değildir; yalnızca sunumu etkiler. Gizlenmiş bir formdaki alanlar gönderime katılır, gizlenmiş bir bölümdeki betik çalışır.

MDN: içerik kategorileri sayfasındaki "palpable content" kuralı da bu öznitelikle ilgilidir: akış ya da ifade içeriği kabul eden öğelerin içinde, hidden taşımayan en az bir somut içerik düğümü bulunması gerekir. Yani içeriğinin tamamı gizli olan bir paragraf yazmak bu genel kurala aykırıdır.

inert özniteliği: görünür ama etkileşimsiz

inert mantıksal bir özniteliktir ve öğeyi ve düz ağaçtaki (flat tree) tüm alt öğelerini inert yapar. Bağlantılar, düğmeler ve form denetimleri gibi normalde etkileşimli öğeler dahil, bölümün tamamı odak alamaz ve tıklanamaz hâle gelir. MDN'ye göre inert öğeler ve alt öğeleri:

• Tıklandığında click olayı almaz.
• Odaklanamaz ve focus olayı tetiklenmez; sekme sırasından çıkar.
• Tarayıcının sayfada bul özelliğinde aranamaz, içerikleri eşleşmez.
• İçindeki metin seçilemez.
• Normalde düzenlenebilen içerik, örneğin metin <input> alanları ve contenteditable taşıyan öğeler, düzenlenemez.
• Erişilebilirlik ağacından çıkarıldığı için yardımcı teknolojilere görünmez.

<div>
  <label for="dugme1">Düğme 1</label>
  <button id="dugme1">Etkin düğme</button>
</div>
<div inert>
  <label for="dugme2">Düğme 2</label>
  <button id="dugme2">Inert düğme</button>
</div>

İkinci <div> ekranda görünmeye devam eder ama içindeki düğmeye tıklanamaz, Tab ile ulaşılamaz. Aynı durumu JavaScript ile HTMLElement.inert özelliğiyle, CSS tarafında ise interactivity özelliğiyle de oluşturmak mümkündür.

inert ve modal dialog

showModal() ile açılan modal dialog öğeleri inertlikten kaçar: atalarından inertliği devralmazlar, ancak üzerlerine açıkça inert yazılırsa inert olabilirler. Başka hiçbir öğe inertlikten kaçamaz. Modal pencere açıkken pencere dışındaki her şeyin inert olması gerekir ve showModal() kullanıldığında bunu tarayıcı sağlar; bu yüzden modal pencere için sayfanın geri kalanına elle inert eklemeniz gerekmez.

Tek bir denetim için disabled daha uygundur

inert her öğeye eklenebilse de genellikle içerik bölümleri için kullanılır. Tek bir denetimi etkisiz kılmak istiyorsanız MDN disabled özniteliğini ve CSS :disabled stillerini önerir. disabled bir düğmenin basılmasını ve odaklanmasını engeller; form gönderiminde de devre dışı alanlar gönderilmez. Ayrıntılar button ve form doğrulama yazılarında.

hidden, inert, aria-hidden ve diğerleri: karşılaştırma

aria-hidden="true" öğeyi ve çocuklarını yalnızca erişilebilirlik ağacından çıkarır; görsel olarak hiçbir şeyi gizlemez. Odaklanabilir öğelere ya da odaklanabilir öğe içeren atalara eklenmemelidir. MDN ayrıca öğe zaten hidden özniteliği, display: none ya da visibility: hidden ile gizliyse aria-hidden eklemenin gereksiz olduğunu söyler, çünkü öğe zaten ağaçtan çıkmıştır. Ayrıntılar ARIA yazısında.

<input type="hidden"> ise bambaşka bir şeydir: kullanıcıya gösterilmeyen ama formla birlikte sunucuya gönderilen bir veri alanıdır, örneğin düzenlenen kaydın kimliği. MDN, değerin sayfa kaynağında ve geliştirici araçlarında görülebildiğini ve değiştirilebildiğini, bu yüzden güvenlik amacıyla güvenilmemesi gerektiğini vurgular. Form türleri için input türleri yazısına bakın.

Adım adım örnek: oturum açınca görünen bölüm

MDN'nin hidden için verdiği tipik senaryo, kullanıcı oturum açmadan kullanılamayacak sayfa bölümleridir. Bir hesap sayfası düşünelim: oturum açma formu başlangıçta görünür, hesap paneli gizlidir. Oturum açılınca form gizlenir, panel gösterilir.

<section id="giris">
  <h2>Oturum açın</h2>
  <form action="/giris" method="post">
    <label for="kullanici">Kullanıcı adı</label>
    <input type="text" id="kullanici" name="kullanici">
    <button type="submit">Giriş</button>
  </form>
</section>

<section id="panel" hidden>
  <h2>Hesap paneli</h2>
  <p>Son siparişleriniz burada listelenir.</p>
</section>

Burada hidden doğru araçtır, çünkü panel oturum açılana kadar sayfa için gerçekten ilgisizdir. Panelin içeriği ekran okuyuculara da sunulmaz; bu da istenen davranıştır. inert bu senaryo için uygun olmazdı: panel görünür kalır ama kullanılamaz, ayrıca görsel bir işaret yoksa kullanıcı neden tıklayamadığını anlamaz. aria-hidden ise paneli yalnızca yardımcı teknolojilerden gizler ve gören kullanıcıya her şeyi gösterirdi; iki grup için farklı sayfalar ortaya çıkardı.

Bir ayrıntıya dikkat edin: gizli paneldeki bir formun alanları yine de gönderime katılır ve içindeki bir betik yine çalışır. Bu yüzden hidden bir erişim denetimi değildir. Kullanıcının görmemesi gereken veri sayfaya hiç yazılmamalı, sunucu tarafında korunmalıdır.

JavaScript ile göster ve gizle

Öznitelikler JavaScript tarafında aynı adlı özelliklere yansır. element.hidden = false öğeyi gösterir, true gizler; MDN'nin düğme örneğinde bir uyarı paragrafı bu yolla açılıp kapatılır. element.inert = true bir bölümü etkileşimsiz yapar.

const uyari = document.querySelector(".uyari");
uyari.hidden = false; // uyarı görünür olur

const panel = document.querySelector("#yan-panel");
panel.inert = true; // panel tıklanamaz ve odak alamaz

Sık yapılan hatalar

• CSS ile display verip hidden özniteliğinin neden çalışmadığını merak etmek. display değeri gizli durumu geçersiz kılar.
• hidden="false" yazarak öğeyi göstermeye çalışmak. Geçersiz değer de gizli durum demektir; göstermek için özniteliği tamamen kaldırın.
• Gizli bir formdaki alanların gönderilmeyeceğini sanmak.
• hidden="until-found" öğesini satır içi bir öğeye vermek; arama onu açamaz.
• Bir bölümü inert yapıp kullanıcıya hiçbir görsel işaret vermemek.
• Odaklanabilir bir düğmeye aria-hidden="true" eklemek; ekran okuyucu kullanıcısı adı olmayan bir öğeye odaklanır.

Sık Sorulan Sorular

hidden ile CSS display: none arasında fark var mı?

Görsel sonuç çoğu zaman aynıdır, çünkü tarayıcılar gizli durumu display: none ile uygulayabilir. Fark anlamdadır: hidden içeriğin şu anda ilgisiz olduğunu HTML düzeyinde söyler ve CSS yüklenmese de geçerlidir. Ancak CSS ile display değeri verilirse öznitelik etkisini kaybeder.

Gizli bir bölüme bağlantı verebilir miyim?

Düz hidden taşıyan bir bölüme görünen bir bağlantıdan href ile bağlantı vermek MDN'ye göre yanlıştır; içerik ilgili değilse bağlantısı da olmamalıdır. Bağlantı vermek istiyorsanız hidden="until-found" kullanın: bağlantıya tıklanınca tarayıcı beforematch olayını tetikler, özniteliği kaldırır ve bölüme kaydırır.

inert ile disabled arasında hangisini seçmeliyim?

Tek bir form denetimi için disabled, bir bölümün tamamı için inert uygundur. disabled yalnızca bu özniteliği destekleyen öğelerde (düğmeler ve form denetimleri) çalışır.

hidden="until-found" arama motorları için ne anlama gelir?

MDN bu konuda bir şey söylemez; belgede anlatılan davranış tarayıcının "Sayfada bul" özelliği ve parça gezintisiyle sınırlıdır. Bu yüzden arama motorlarıyla ilgili bir varsayım yapmayın.

Modal pencere açıkken arka plana inert eklemem gerekir mi?

Hayır. showModal() ile açılan bir <dialog> için tarayıcı pencere dışındaki içeriği kendiliğinden inert yapar. Kendi pencere bileşeninizi başka öğelerle yazıyorsanız bu davranışı inert ile sizin sağlamanız gerekir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · global öznitelikler · details ve summary · dialog etiketi · tabindex ve klavye erişimi · ARIA nedir