Bazen akordeon olarak da adlandırılan daraltılan içerik bölümleri yaygın bir kullanıcı arayüzü kalıbıdır. Ancak daraltılmış bölümlerde gizlenen içerikler, sayfada bul aramasıyla arama yapılamaz. Ayrıca, daraltılmış bölgelerin içindeki metin parçalarına bağlantı oluşturmak 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ölgedeki metinlerde arama yapmasını ve eşleşme bulunursa ilgili bölümü göstermesini sağlarsınız.
Bu özellikler Chrome 102 sürümünde kullanılabildiği için nasıl çalıştıklarına göz atalım.
Kullanım şekli
Web sitenizde aranabilir hale getirmek istediğiniz daraltılabilir bölümler varsa bölümü gizleyen stilleri hidden=until-found özelliğiyle değiştirin. Sayfanızda, bölümünüzün gösterilip gösterilmeyeceğiyle senkronize edilmesi gereken başka bir durum varsa hidden=until-found öğesi tarayıcı tarafından gösterilmeden hemen önce tetiklenecek bir beforematch etkinlik işleyicisi ekleyin.
Uyarılar
Tutarlı bir kullanıcı deneyimi için hidden=until-found içeriği, sayfada bul özelliği kullanılmadan görünür olmalıdır. Tüm kullanıcılar sayfada bul özelliğini kullanmayacaktır ve hidden=until-found özelliğini desteklemeyen tarayıcılar, sayfada bul özelliği gösterilmeden gizli içeriğin orijinal deneyimini yaşayacaktır.
Gizli içeriğinizin hidden=until-found özelliğini desteklemeyen tarayıcılarda aranabilir olduğundan emin olmak istiyorsanız bu tarayıcılarda gizli içeriği istediğiniz zaman genişletebilirsiniz. Özellik algılama, beforematch etkinlik işleyicinin olup olmadığı kontrol edilerek yapılabilir:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found, normal gizli özelliğin uygulandığı display:none özelliği yerine content-visibility:hidden CSS özelliğini uygular. Bu işlem, kapalıyken içerikte arama yapmak için gereklidir, ancak aşağıdaki yan etkileri de vardır:
getBoundingClientRectgibi bazı düzen API'leri,hidden=until-foundöğesi içindeki gizli içeriğin yer kapladığını ve sayfada bir konuma sahip olduğunu bildirir.hidden=until-foundöğesinin alt düğümleri oluşturulmaz ancakhidden=until-foundöğesinin kendisinde bir kutu kalır. Bu, kenarlık ve açık boyut gibi CSS özelliklerinin, oluşturmayı yine de etkileyeceği anlamına gelir.
Buna örnek olarak aşağıdaki demo, hidden=until-found uygulanmış öğeye kenar boşluğu, kenarlık ve dolgu ekler. Gizli içeriğin görüneceği yerde gri kenarlıklı bir kutu bulunur. Bu kutu, gösterildiğinde gizli içerikle doldurulur. Bu, gizli öğenin kutusudur.
Bu sorunu önlemek için kenarlığı, hidden=until-found içeren kapsayıcının içine yerleştirilmiş bir öğeye ekleyin.
Thomas Bormans'ın lokomotif resmi.