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