Apple, Liquid Glass efektlerini web içeriğine ekleyen özel bir CSS özelliği sunuyor

• Apple, iOS 26'da kullanılabilen özel CSS özelliği -apple-visual-effect ekledi
• Bu özellik, Liquid Glass ve standart blur materyalleri gibi yeni tasarım efektlerinin web içeriğine de uygulanmasını sağlıyor
• Ancak bu özellik Safari tarayıcısında veya WKWebView'da varsayılan olarak etkin değil
• WKWebView'da kullanmak için useSystemAppearance adlı özel ayarı açmak gerekiyor; ancak bunu değiştirmek App Store onayını zorlaştırıyor
• Bu özellik büyük ölçüde Apple'ın kendi içinde kullandığı bir şey gibi görünüyor ve genel geliştiriciler şu an için bundan yararlanamıyor

---

Genel bakış

• Yazar, WebKit'in GitHub ChangeLog kayıtlarına hobi olarak sık sık göz atıp iOS'un bir sonraki güncellemelerini tahmin ediyor
• Kısa süre önce WWDC'nin hemen ardından WebKit'te “[Materials] Rename 'hosted blur' materials to reference 'glass'” başlıklı bir Pull Request fark etti
• 2025 WWDC'de öne çıkarılan Liquid Glass, iOS 7'den bu yana kullanıcı arayüzündeki (UI) en büyük değişiklik olarak görülüyor
• Bu tasarım değişikliği daha önce yalnızca native UI için geçerliyken, bu PR web view ile bağlantılı olabileceğine işaret ediyor

Apple'ın özel CSS özelliği

• PR, Apple'ın -apple-visual-effect adlı özel bir CSS özelliği sunduğunu ortaya koyuyor
• Bu özellikle iOS 26'da Liquid Glass efektlerinin (ör. -apple-system-glass-material) uygulanabildiği görülüyor
• Ayrıca tüm sürümlerde standart blur materyallerinin (-apple-system-blur-material-thin vb.) kullanılabilmesi de mümkün
• Resmî tasarım kılavuzu da bu tür materyallerden söz ediyor

Gerçek kullanım olasılığı

• Safari'de CSS'yi düzenleyip uygulamaya çalışsanız bile, web üzerinde çalışmıyor
• WKWebView tabanlı uygulamalarda da varsayılan olarak devre dışı
• Çalışması için WKPreferences içindeki useSystemAppearance değerinin true yapılması gerekiyor; ancak bu ayarın kendisi de özel olduğu için resmî yolla kullanılamıyor
• Gayriresmî şekilde hack'lenip bu değer etkinleştirildikten sonra aşağıdaki gibi bir CSS ile efekt görülebiliyor

  .toolbar {  
    border-radius: 50%;  
    -apple-visual-effect: -apple-system-glass-material;  
    height: 75px;  
    width: 450px;  
  }  
  

CSS örneği ve koşullu uygulama

• Apple bu efekti bir CSS özelliği olarak tanımlayarak, destek durumuna göre çeşitli kuralların kolayca belirlenmesini sağlıyor

• Örneğin @supports sorgusu kullanılarak -apple-visual-effect yalnızca destekleyen cihazlarda uygulanabiliyor

  .toolbar {  
    border-radius: 50%;  
    height: 75px;  
    width: 450px;  
    background: rgba(204, 204, 204, 0.7);  
  }  
  
  @supports (-apple-visual-effect: -apple-system-glass-material) {  
    background: transparent;  
    -apple-visual-effect: -apple-system-glass-material  
  }  
  

Anlamı ve sınırlamaları

• Apple içi kullanım dışında genel geliştiricilerin kullanamayacağı bir özellik
• Yine de bu durum, "uygulama içi webview'ların neden sık sık kötü bir üne sahip olduğu" sorusuna dair bir ipucu veriyor
• Sorunsuz biçimde iyi entegre edilen webview'lar, kullanıcı tarafından fark edilmediği için problemler daha az görünür hale geliyor
• Apple'ın bunu geliştirmiş olması, bunu kendi servislerinde veya uygulamalarında gerçekten kullandığını dolaylı olarak düşündürüyor
• Günlük hayatta farkında olmadan webview tabanlı arayüzlerle karşılaşıyor olabilirsiniz

[ahwjdekf]

Böyle saçma bir şeyi görmezden gelmeli ve kimse kullanmamalı.

[coremaker]

Apple Flash’i öldürürken çıkarlar örtüştüğü için alkışlamıştım,
şimdiki bu tercih ise mevcut ekosistemi görmezden gelen bir karar gibi hissedilmesi bakımından ironik.

IE’nin geri dönüşü mü?

[spp00]

IE’den sonra frontend geliştiriciler açısından IE pozisyonunda olan şey Chrome değil Safari oldu. Safari yüzünden frontend geliştiricileri pahalı Mac’ler almak zorunda kalıyor. Chrome ve Firefox’ta her şey çalışırken yalnızca Safari’de çalışmayan ya da garip görünen durumlar olabiliyor.

[GN⁺]

Hacker News görüşleri

• Bir işletim sistemi özelliğini yalnızca kendi uygulamalarına sunmak açıkça rekabeti engelleyen bir uygulamadır. Telefon ve işletim sistemi pazarındaki üstün konumu kullanıp, uygulama pazarında rakiplerine izin verilmeyen bir özelliği sadece kendisinin kullanması bunun net bir örneğidir
  • Aslında Apple’a kızmak istiyordum ama öyle hissetmiyorum. Sadece WinAPI dokümantasyonunu okusak bile tonla reserved parametresi görüyoruz. İşletim sistemi geliştiricileri sık sık yalnızca dahili kullanım için özellikler yapar. Bu seferki sadece bir UI iyileştirmesi olduğu için illa özel tutulması gerekmiyor diye düşünüyorum ama muhtemelen Apple bunu sürekli sürdürmek istemediği için özel bıraktı
  • Tüm standart dışı CSS özellikleri “rekabet karşıtı” mı sayılacak? Google’ın -webkit-tap-highlight-color özelliği de aynı şekilde eleştirilmeli mi merak ediyorum. Bu mantık, özel CSS özelliği oluşturma pratiğinin kendisinin yasaklanması gerektiğine çıkıyor; bana göre bu iddia abartılı
  • Hukuki anlamda gerçekten “açıkça rekabet karşıtı davranış” olup olmadığı net değil. ABD’de Sherman Act ve Clayton Act gibi rekabet yasaları uygulanır. Bu yasalardaki “kendiliğinden hukuka aykırı” (per se) davranışlar listesine girmediği için burada rule of reason uygulanacaktır. Bu durumda ancak davranışın doğrudan rekabete zarar verdiği, kayda değer olumlu etkisi olmadığı ve daha az kısıtlayıcı bir alternatif bulunmadığı gösterilirse kabul edilir. Bir CSS özelliğinin rekabete fiilen nasıl zarar verdiğini kanıtlamak zor ve isteyen biri “liquid glass” CSS’ini kendisi de yapabilir, kimse de bunu engellemiyor; o yüzden uygulanması zor görünüyor
  • Bilgisayar donanımı gibi çok daha kısıtlayıcı durumlar hakkında ne düşündüğünü merak ediyorum. Mesela oyun konsollarında tüm kodların kriptografik olarak imzalanması gerekir ve üreticinin izni olmadan üçüncü taraflar herhangi bir yazılım dağıtamaz
  • Eğer UI metnini daha zor okunur hale getirmenin rekabet avantajı olduğunu düşünürsek, o zaman öyle denebilir
• “Alastair’in uygulama içi webview büyük teorisi” hoşuma gitti: uygulama içi webview’ların kötü bir şöhrete sahip olmasının ana nedeni, iyi entegre edilmiş bir webview’ın kullanıcı tarafından fark edilmemesidir
  • Gerçekten webview uygulamış biriyle, web uygulamasını sadece bir native uygulamanın içine sarıp çıkmanın yeterli olduğunu duyan biri arasında büyük fark var. Çoğu kişi ikincisi
  • Muhtemelen bu özellik de bu yüzden geldi. Bir uygulamanın üçüncü taraf bir UI toolkit kullanıp kullanmadığını anlamanın ucuz yolu, sistem temasını değiştirip uygulamanın tema ya da renk/ölçek değişikliklerine düzgün uyum sağlayıp sağlamadığına bakmaktır. Apple’ın kendi sunduğu bazı uygulamalar bile temayı düzgün yansıtmadığı için sonunda özel bir CSS özelliği yapmış olmalı. Buna karşılık bazı diğer işletim sistemi üreticileri, farklı yarım kalmış toolkit’leri yönetme derdinden kaçınmak için tema kontrolünü tamamen kaldırıyor
  • Biri tek bir tane bile kusursuz entegre edilmiş webview uygulaması örneği verebilirse kabul ederim. Ortalama kullanıcı fark etmeyebilir ama gerçekten olsaydı Hacker News’ta mutlaka en az bir kez geçerdi. Webview tartışmalarında “ama Foo uygulaması da webview ile yapıldı ve gayet iyi çalışıyor” diye karşı örnek olarak kullanılırdı
  • Biraz “peruklar hep sahte görünür. Gerçek gibi duran bir peruk hiç görmedim” hissi veriyor
• “Apple’ın bunu kesin kullandığı için bu özellik yapılmıştır” deniyor ama nerede kullanıldığına dair kimsenin fikri yok. Tahmin edecek olursam muhtemelen iCloud ayarları (Ayarlar uygulaması içinde) ya da App Store/Music/TV uygulamalarındaki hesap sayfalarıdır (sağ üstteki profil simgesine dokununca açılan). Bu sayfalar çoğunlukla native görünmeye çalışan gizli webview’lar. Uzun basınca `` bağlantılarında web sayfası önizlemesi çıkması buna işaret ediyor. Tips uygulamasındaki kullanıcı kılavuzu da aday olabilir. İlk bakacağım yerler bunlar olurdu
• “Apple bunu bir yerde kullanacak” diye tahmin ediliyor ama aslında bunu tam olarak nerede kullandığını fark edememiş olmamız ilginç. Günlük hayatta iOS’ta sık sık webview’larla karşılaşıyoruz ama bunu hiç fark etmiyoruz
  • Özellikle Ayarlar uygulaması, hele hesap ya da iCloud tarafı, bana sık sık webview gibi geliyor. Yüklenirken simgelerin biraz geç görünmesi gibi küçük farklardan bunu tahmin edebiliyorum
  • App Store uygulaması da webview’ları çok yoğun kullanıyor gibi görünüyor
  • Mail ve Calendar uygulamalarının da epey webview kullandığını biliyorum
  • Bence bunu Apple.com’da da kullanacaklar. Geçmişte iOS’ta arka plan bulanıklığı için backdrop-filter kullanmalarıyla aynı mantık
  • Apple Music de oldukça fazla webview kullanıyor gibi
• Güzel bir keşif. Apple’ın yeni cam tarzı UI’ı çok eleştiriliyor ama ben aksine beğeniyorum. İşletim sistemi tekrar gerçek bir kişiliğe sahipmiş gibi hissettiriyor ve tekdüze, düz görünümden çıkıyor. Tıklanabilir alanlar daha kolay seçiliyor, düğmelerle normal metni görsel olarak ayırt etmek de kolaylaşıyor. Bence memnuniyetle karşılanacak bir değişim. Sadece “nostalji” yüzünden değil, gerçekten pratik bir değişiklik. iOS 26 Beta’yı erkenden kurup web sitelerini test ediyorum; birkaç sorun var ama genel olarak işletim sistemine daha fazla karakter kazandırma yönünün iyi olduğunu düşünüyorum. Sıradan kullanıcılar da bunu sevecektir
  • Cam efekti ve estetik tarafını beğeniyorum ama birçok uygulamada işlevsellik açısından eskisine göre daha kötü hale gelen yerler var. Eskiden kolay ulaşılan düğmeler artık menülerin altına gizlenmiş ve bulması daha zor
  • Bence genel kullanıcı kitlesi bu değişikliği büyük ölçüde sevmeyecek. “İşletim sisteminin kişiliği olmalı” diye düşünenler sadece küçük bir teknoloji meraklısı kesim. Çoğu insan işletim sistemini yalnızca bir işi halletmenin aracı olarak görüyor; bu yüzden bu tür görsel değişimler çoğu zaman ilginçlikten öte bir anlam taşımıyor. Özellikle liquid glass tasarımında en çok şikâyet ettiğim şey yeni alt sekme çubuğu. Apple Music bunun en kötü örneği. Search arayüzünü kullanmak için bir tıklama daha gerekiyor ve Search Box’a tıkladıktan sonra da klavyenin gelmesi için ayrıca basmak gerekiyor. Ayrıca tüm etkileşimlere karmaşık ve yavaş animasyonlar eklenmiş. Mesela Home’dan Library’ye geçince sekme çubuğunun üstünde sekme baloncuk gibi büyüyüp parlayarak hareket ediyor; bu sadece dikkat dağıtıyor, hiçbir faydası yok. Reduce Transparency ya da Reduce Motion gibi erişilebilirlik ayarları bu animasyonlara uygulanmıyor. Aslında Apple’ın son dönemdeki birçok varsayılan uygulaması erişilebilirlik seçeneklerini ya unutuyor ya da eksik uyguluyor. Örneğin Reduce Motion açıkken albüme tıklama gibi bazı animasyonlar sadeleşiyor ama sola kaydırma ya da başka hareketlerde hâlâ aşırı animasyon var. Apple Podcasts ve iMessage da aynı durumda. Reduce Transparency bazı uygulamalarda şeffaflığı azaltmak yerine tüm arka planı siyah (#000000) yapıyor. iOS genelinde bunun gibi örnekler dolu. Çıkışa günler kalmış olmasına rağmen dropdown’lar ve devre dışı klavye düğmeleri gibi yerlerde erişilebilirlik seçenekleri hâlâ yansıtılmıyor
  • “Tıklama hedefinin boyutunu görsel olarak anlayabiliyorsun ve düğmeler metinden belirgin şekilde farklı” deniyor ama doğrusu bu çok da yüksek bir standart değil
  • Ben şahsen “bu tasarım gerçekten korkunç” tarafındayım. Apple ne düşünüyordu hiç bilmiyorum
• Belki de Apple henüz kimsenin bu özelliği kullanmasını istemiyordur. Yeni işletim sisteminin duyurulmasıyla pek çok geliştirici bunu hemen benimseyebilir; Apple da kamuya açmadan önce içeride gerçekten kullanmaya karar vermek istemiş olabilir. Bu başlıkta biraz temelsiz suçlama da dönüyor. Hangi tarafın haklı olduğunu henüz bilmiyoruz
• “Apple kullanacağı için bunu yaptı” önermesi aslında her zaman doğru değil. Gerçek yazılımlarda hiç kullanılmayan kod ve özellik çok fazla olur. Geliştirme yönü birkaç kez değişirken ikinci aşamada eklenen bir CSS özelliği dördüncü aşamada tamamen ortadan kalkabilir
• Umarım liquid jelly trend olmaz
  • Liquid glass’ı sevseniz de sevmeseniz de, “UI chrome uygulama içeriğini saran şeydir” anlayışından “UI içeriğin üstüne örtülür” anlayışına geçiş geleceğe dönük bir değişim. AR ile de iyi örtüşüyor ve farklı ekran boyutlarında UI ile içeriği ayırmayı kolaylaştırıyor. Bu uygulamanın kendisinin artıları ve eksileri var ama bu yaklaşım ileride daha yaygın kullanılacaktır. Overlay UI modelinin illa şeffaf olması da gerekmiyor. Opak ama yüzen bir yapı da olabilir
  • Genç kuşak Aero/Glass döneminin estetiğine nostalji duyuyor. Apple bunu getirdiği için trend olma ihtimali yüksek. Sektör genelinde Apple ne yaparsa onu takip etme eğilimi var
  • Benim için sadece bounce/jiggle efektleri olmasa daha iyi olurdu. Fazla sallanıp titreştiği için asıl cam hissi yerine jölemsi bir blob gibi görünüyor
  • Ben de bunun trend olmasını istemeyen taraftayım ama dürüst olmak gerekirse Apple yapınca sonunda herkesin peşinden gideceğini düşünüyorum
  • Zaten trend olmaya başladı bile
• WKPreferences içinde useSystemAppearance diye bir ayarın açılması gerektiği söyleniyor ama bu özellik özel olduğu için App Store onayı alınamıyormuş. Doğru mu merak ediyorum. iOS geliştirme konusunda çok bilgili değilim ama çeşitli dahili API’ler kullanarak ana ekran widget’larını animasyonlu yapan uygulamaların decompile edildiği videolar izlediğimi hatırlıyorum
  • Öyle şeyler App Store incelemesinden geçmez
  • Şu videoyu mu kastediyorsun?
• Yuvarlatılmış köşeler ve geniş padding’den sonra gördüğüm en çirkin trend bu. Umarım en kısa sürede yok olur

[addons]

Saçmalamayı bırakın da Safari uyumluluğunu düzgün koruyun.