Safari 27 ve iOS 27: Web Siteniz İçin Neler Değişti?

Ziyaretçilerinizden bir kısmı sitenize Safari ile girer; payını kendi analitiğinizden görebilirsiniz. Bu yüzden her Safari sürümü, yeni bir CSS ya da HTML özelliğinin gerçek ziyaretçide çalışıp çalışmayacağını ilgilendirir. WebKit blogunun beta yazısı Safari 27 için uzun bir liste verdi: biçimlendirilebilir select, dönüşüm farkındalıklı çıpa konumlandırma, kaydırma çıpalama, :heading sözde sınıfı, revert-rule, stretch anahtar sözcüğü ve başkaları.

Liste uzun görünse de hepsini bilmeniz gerekmez. Özelliklerin çoğu sitenin kodunu yazan kişinin işini kolaylaştırır; ziyaretçi bunları doğrudan görmez, yalnızca sayfaların daha az bozulduğunu fark eder. İş sahibi olarak şunu sorun: sitemde bu özelliklerden herhangi birine ihtiyaç duyan bir bölüm var mı? Cevap çoğu zaman form ve görsel alanlarıdır.

WebKit blogu, appearance: base-select ile açılır listelerin tamamen biçimlendirilebildiğini yazıyor. Şehir, hizmet ya da randevu saati seçtirdiğiniz bir liste, markanızın renk ve yazı tipiyle çizilebilir. Blog, klavye ve ekran okuyucu davranışının korunduğunu da belirtiyor; bu, listeyi sıfırdan yazılmış bir bileşenle değiştirmeye göre erişilebilirlik açısından daha sakin bir yol demek.

Bu bir zorunluluk değil. Mevcut listeniz çalışıyorsa dokunmayın. Yeni özellik en çok, özel görünümü olan ve şimdiye kadar kodla taklit edilen listeler için anlamlı. Başka tarayıcıların bu özelliği aynı biçimde destekleyip desteklemediği kaynaklarımızda yok; bu yüzden tasarımı, özellik olmayan yerde sade bir listeye düşecek biçimde yaptırın.

Görseller açısından en dikkat çekeni, img öğesindeki sizes özelliğine auto değeri verilebilmesi. WebKit blogu bunu, tembel yüklenen görsellerde tarayıcının boyutu kendisinin hesaplaması olarak anlatıyor; böylece her görsel için elle sizes değeri yazma yükü azalıyor. Yine blogdaki kaydırma çıpalama, sayfanın üst kısmına sonradan içerik yüklendiğinde okuduğunuz yerin kaymamasını sağlıyor.

Aşağıdaki liste, siteyi test ederken ya da yazılımcınıza sorarken işe yarayacak kalemleri topluyor. Görsel değişikliklerinin hıza etkisini rabbitclip'in site hızı aracıyla önce ve sonra ölçebilirsiniz.

• Biçimlendirilebilir açılır liste: form alanlarının markaya uyması
• img öğesinde sizes için auto değeri: tembel yüklenen görsellerde boyutun tarayıcıca hesaplanması
• Kaydırma çıpalama: yukarıda içerik yüklenince sayfanın zıplamaması
• model öğesi: iOS, iPadOS ve macOS'ta 3B içerik gösterimi
• Service Worker static routing API, ReadableStream.from() ve Cookie Store API'sindeki maxAge gibi geliştirici düzeyindeki eklemeler

9to5Mac, WebKit blogundan aktararak Safari 27'nin yerel bir MCP sunucusu içerdiğini yazıyor. Geliştirici ayarlarında uzaktan otomasyon açıldığında kodlama ajanları tarayıcı penceresini kullanabiliyor. MCP, yapay zekâ ajanlarının araçlara bağlanmasını sağlayan bir iletişim kuralıdır; burada araç, Safari'nin kendisi.

Site sahibi için doğrudan karşılığı şu: sitenizi bir ajan da gezebilir ve bir geliştirici bunu kendi makinesinde test için açmışsa gerçek bir tarayıcıyla yapar. Yazılımcınız bunu formlarınızı otomatik denemek için kullanabilir; bu bir olasılık, kaynakların vardığı bir sonuç değil. Aynı kaynak, Mac ve Xcode gerektirmeyen bir Safari web eklentisi paketleyicisinden de söz ediyor.

İlk hata, yeni bir özelliği haberi okur okumaz canlı siteye koymaktır. Bir özellik Safari 27'de çalışıyor diye her ziyaretçide çalışıyor demek değildir; eski sürümde kalan cihazlar da vardır. İkinci hata, çalışan bir açılır listeyi yalnızca yenisi çıktı diye değiştirip mobil formu bozmaktır.

Üçüncü hata, yalnızca masaüstünde denemektir. iPhone'daki görünüm, klavye ve ekran okuyucu davranışı ile dokunma alanları ayrıca sınanmalıdır.

• Yeni özelliği denemeden canlıya almak
• Çalışan bileşeni yalnızca yeni olduğu için değiştirmek
• Sadece masaüstü tarayıcıda denemek
• Özelliğin desteklenmediği yerde ne olacağını düşünmemek

Sitenizde özel biçimli bir form alanı, 3B içerik ya da karmaşık bir sayfa düzeni yoksa Safari 27 yüzünden yapacağınız bir iş yoktur. Küçük bir tanıtım sitesi için doğru adım, siteyi iPhone'da bir kez açıp formu ve görselleri gözle kontrol etmektir.

3B içerik için model öğesini denemek de herkese uygun değil. Ürününüzün 3B gösterimi satışa yardım etmiyorsa bu özellik yalnızca bakım yükü getirir. Önce ziyaretçinin ne yapmak istediğine bakın, sonra özelliği seçin.