- Web’de JS’ye bağımlı işlevleri HTML/CSS ile değiştirmek için güncel yöntemler tanıtılıyor
details·summary, datalist, popover gibi standart öğeler kullanılarak akordeon, otomatik tamamlama, modal ve ekran dışı gezinme uygulanabiliyor- Bu yaklaşım indirme·değerlendirme·bellek kullanımını azaltarak performansı ve kullanıcı deneyimini iyileştiriyor
- Her özellik için CodePen örnekleri, MDN belgeleri, tarayıcı uyumluluk bilgileri birlikte sunuluyor
- JS yalnızca gerçekten gerekli alanlarda kullanılmalı ve HTML/CSS’nin gelişmiş yeteneklerinden aktif biçimde yararlanılmalı
HTML ve CSS ile JS işlevlerini değiştirmek
- Uzun süre boyunca JavaScript, HTML ve CSS ile gerçekleştirilemeyen işlevleri üstlendi
- Ancak HTML ve CSS’nin yetenekleri genişledikçe, bazı JS işlevleri yerel web teknolojileriyle değiştirilebiliyor
- JS; indirme, açma, değerlendirme ve bellekte tutulma gerektirdiğinden, mümkün olan işlevleri HTML/CSS’ye taşımak daha verimli
- Önerilen yön, JS’nin karmaşık mantığa odaklanması ve basit UI kontrolünün HTML/CSS’ye bırakılması
Akordeon / genişletilebilir içerik paneli
details ve summary öğeleriyle JS olmadan akordeon uygulanabiliyor
- İçerik tıklamayla açılıp kapanabiliyor ve varsayılan durum
open özniteliğiyle belirlenebiliyor
- Aynı
name özniteliği kullanılırsa aynı anda yalnızca bir panel açık kalıyor
- CSS ile stil verilebilir veya JS ile açılma/kapanma kontrol edilebilir
- İlgili kaynaklar: MDN
details belgesi, CodePen örneği, tarayıcı uyumluluk tablosu
Otomatik tamamlama önerili giriş alanı
input ve datalist birleşimiyle otomatik filtrelenen açılır liste uygulanabiliyor
- Yazı girildiğinde öneri listesi otomatik olarak filtreleniyor
- Metin dışında
number, time gibi çeşitli giriş türleri de destekleniyor
- Firefox şu anda yalnızca metin tabanlı girişleri destekliyor ve mobil erişilebilirlik kısıtları bulunuyor
- İlgili kaynaklar: MDN
datalist belgesi, SitePoint eğitimi, tarayıcı uyumluluk tablosu
Modal / popover
popover ve popovertarget öznitelikleriyle JS’siz modal ve popover uygulanabiliyor
auto, hint, manual olmak üzere üç mod sunuluyorauto, dışarı tıklama veya ESC ile kapanıyor; manual ise yalnızca elle kapatılıyor
- Firefox ve iOS,
hint modunu desteklemiyor
- İlgili kaynaklar: MDN
popover belgesi, Chrome blogu, CodePen örneği, erişilebilirlikle ilgili video
Ekran dışı gezinme / içerik
popover özelliği kullanılarak ekran dışı gezinme menüsü uygulanabiliyor
- Anlamsal yapı için
nav öğesi kullanılıyor, CSS translate ile ekran içine ve dışına taşınıyor
- Dışarı tıklanınca kapanıyor;
popover="manual" ile elle kapatma ayarlanabiliyor
- Arka planı yarı saydam yapmak için
::backdrop sözde öğesi kullanılabiliyor
- İlgili kaynaklar: MDN Popover API, Chrome blogu, CodePen örneği
Sonuç
- JS’nin gücü kabul edilse de, yalnızca gerekli yerlerde kullanılmalı
- HTML/CSS’deki son gelişmelerle birlikte JS’siz birçok alternatif ortaya çıktı
- Daha fazla örnek, yazarın “Replace JS with No-JS or Lo-JS Options” başlıklı blog yazısında görülebilir
- JS’yi en aza indirme ve performans optimizasyonu yoluyla kullanıcı deneyiminin iyileştirilmesi vurgulanıyor
5 yorum
Böyle girişimler bazen benim de gereğinden fazla mühendislik yapıp yapmadığımı sorgulamamı sağlıyor, ama zengin gereksinimlerin olduğu gerçek iş pratiği açısından bakınca daha çok bir güç gösterisine benziyor.
> ** ve ** öğeleriyle JS olmadan akordeon uygulanabiliyor
Sanki içeriğin bir kısmı kesilmiş gibi görünüyor
Düzelttim~!
Sınırları oldukça belirgin ve yapay zeka devreye girdiği anda... böyle bir refactoring yapmaya gerçekten gerek var mı?
JS içeriğini engelleme gibi kısımlar da dikkate alındı mı?
Hacker News yorumları
CodePen bağlantısı yerine HTML alternatif örnekleri doğrudan sayfaya koysaydı çok daha ikna edici olurdu
<details>/<summary>etiketlerinin potansiyeli gerçekten çok büyükNeredeyse her şeyi yapabiliyorlar ama çoğu bileşen kütüphanesi bunu görmezden geliyor
aria özniteliklerine de gerek yok ve erişilebilirlik varsayılan olarak geliyor
<details>, GitHub gibi Markdown tabanlı sitelerde de çalışıyor. Uzun log'ları katlayıp düzenli biçimde paylaşabiliyorsun“You Don’t Need JavaScript” kitabını yazarken hissettiğim şey, JS'nin yeni özellikler eklemekten çok platformun mevcut yeteneklerini tamamlaması olduğu yönündeydi
<input>ve<datalist>gerçek kullanımda yetersiz kalıyorKullanıcılar yazım hatası toleransı, yardımcı metin, mobil UX gibi şeyler bekliyor ama datalist bunları karşılamıyor
value) ayıramamak en sinir bozucu şeyHTML'in anlamsal kullanımı ya da erişilebilirlik neredeyse hiç önemsenmiyor
“Sadece HTML ile yapalım” diyen bir yazının harici bir servise dayanması çelişkili hissettiriyor
WHATWG stage 3'te ve JS tabanlı dropdown'ların kabus gibi implementasyonlarının yerini alabilir gibi görünüyor
Ayrıntı için Chrome blog yazısına bakılabilir
HTMX ya da Phoenix LiveView gibi alternatifleri de kullandım ama onlar da tam çözüm değil
Sonunda modern JS'yi kabullenmenin daha gerçekçi olduğu hissine kapılıyorum
<marquee>etiketi e-ticaret sitelerindeki yatay kaydırma için uygundu ama şimdi bunu zorla JS ile yapıyoruz. Keşke HTML daha fazla UI desenini yerleşik olarak destekleseKarmaşık web uygulamaları için JS şart ama sadece HTML ile de yapılabilecek çok alan var
Ama JS artık veri toplama ve reklam takibinin temel aracı hâline geldi
JS olmadan da büyük teknoloji şirketlerinin aynı düzeyde gözetim ve reklam hizmeti sunup sunamayacağını merak ediyorum
Sonuçta JS'ye duyulan tepki, basit bir teknik meseleden ziyade reklam ekosistemine duyulan güvensizlikten kaynaklanıyor