Daraltılmış içeriği private=until-found ile erişilebilir hale getirme

Joey Arhar

Bazen akordeon olarak tanımlanan daraltılabilir içerik bölümleri, yaygın bir kullanıcı arayüzü kalıbıdır. Ancak daraltılmış bölümlerde gizlenen içeriğin sayfa içinde arama özelliği kullanılarak aranması mümkün olmaz. Ayrıca, daraltılmış bölgelerdeki metin parçalarına bağlantı vermek mümkün değildir.

hidden=until-found HTML özelliği ve beforematch etkinliği bu sorunları çözebilir. Gizli içeriğinizin kapsayıcısına hidden=until-found ekleyerek tarayıcının bu gizli bölgede metin aramasını ve eşleşme bulunursa bölümü göstermesini sağlarsınız.

Bu özellikler Chrome 102'den itibaren kullanılabilir. Şimdi bunların nasıl çalıştığına bakalım.

Kullanım şekli

Web sitenizde, arama yapılabilir hale getirmek istediğiniz daraltılabilir bölümler varsa bölümü gizli yapan stilleri hidden=until-found özelliğiyle değiştirin. Sayfanızda, bölümünüzün gösterilip gösterilmeyeceğiyle senkronize tutulması gereken başka bir durum da varsa hidden=until-found öğesi tarayıcı tarafından gösterilmeden hemen önce hidden=until-found öğesinde tetiklenecek bir beforematch etkinlik dinleyicisi ekleyin.

Uyarılar

Tutarlı bir kullanıcı deneyimi için hidden=until-found içeriği, sayfa içinde arama özelliği kullanılmadan gösterilebilmelidir. Tüm kullanıcılar sayfa içinde arama özelliğini kullanmaz. hidden=until-found'ü desteklemeyen tarayıcılar, sayfa içinde arama özelliğinin gizli içerikleri göstermemesi nedeniyle gizli içeriklerin orijinal deneyimini yaşar.

Gizli içeriğinizin hidden=until-found'yi desteklemeyen tarayıcılarda aranabilir olduğundan emin olmak istiyorsanız bu tarayıcılarda gizli içeriği dilediğiniz zaman genişletebilirsiniz. Özellik algılama, beforematch etkinlik işleyicisinin varlığı kontrol edilerek yapılabilir:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

hidden=until-found, normal gizli özelliğin uyguladığı display:none mülkü yerine content-visibility:hidden CSS mülkünü uygular. Bu, kapalıyken içeriği aramak için gereklidir ancak aşağıdaki yan etkilere de sahiptir:

• getBoundingClientRect gibi bazı düzen API'leri, hidden=until-found öğesindeki gizli içeriğin yer kapladığını ve sayfadaki bir konuma sahip olduğunu bildirir.
• hidden=until-found öğesinin alt düğümleri oluşturulmaz ancak hidden=until-found öğesinin kendisinde bir kutu bulunur. Bu, çerçeve ve açık boyut gibi CSS özelliklerinin oluşturmayı etkilemeye devam edeceği anlamına gelir.

Buna örnek olarak aşağıdaki demoda, hidden=until-found uygulanmış öğeye kenar boşluğu, kenarlık ve dolgu eklenmiştir. Gizli içeriğin gösterileceği yerde gri kenarlıklı bir kutu bulunur. Gizli içerik gösterildiğinde bu kutu doldurulur. Bu, gizli öğenin kutusudur.

Bu sorunu önlemek için kenarlığı, kapsayıcının içine yerleştirilmiş ve hidden=until-found içeren bir öğeye ekleyin.