Apple memperkenalkan properti CSS privat untuk menambahkan efek Liquid Glass ke konten web

• Apple menambahkan properti CSS privat -apple-visual-effect yang bisa digunakan di iOS 26
• Properti ini memungkinkan efek desain baru seperti Liquid Glass dan material blur standar diterapkan juga ke konten web
• Fitur ini tidak diaktifkan secara default di browser Safari maupun WKWebView
• Untuk menggunakannya di WKWebView, pengaturan privat bernama useSystemAppearance harus diaktifkan, tetapi mengubahnya akan menyulitkan persetujuan App Store
• Fitur ini tampaknya terutama digunakan secara internal oleh Apple, sehingga pengembang umum belum bisa memanfaatkannya saat ini

---

Gambaran umum

• Penulis hobi memantau GitHub ChangeLog milik WebKit untuk memprediksi pembaruan iOS berikutnya
• Baru-baru ini, tepat setelah WWDC, ia menemukan Pull Request di WebKit berjudul “[Materials] Rename 'hosted blur' materials to reference 'glass'”
• Liquid Glass yang ditekankan di WWDC 2025 merupakan perubahan antarmuka pengguna (UI) terbesar sejak iOS 7
• Sebelumnya perubahan desain ini hanya berlaku pada UI native, tetapi PR kali ini mengisyaratkan keterkaitannya dengan web view

Properti CSS privat Apple

• Dari PR tersebut terungkap bahwa Apple memperkenalkan properti CSS privat bernama -apple-visual-effect
• Melalui properti ini, di iOS 26 dimungkinkan penerapan efek Liquid Glass (misalnya -apple-system-glass-material)
• Di semua versi, material blur standar (-apple-system-blur-material-thin dan sebagainya) juga dapat digunakan
• Material-material ini juga disebutkan dalam panduan desain resmi

Kemungkinan penerapan nyata

• Bahkan jika CSS diedit dan dicoba langsung di Safari, fitur ini tidak berfungsi di web
• Di aplikasi berbasis WKWebView pun, fitur ini dinonaktifkan secara default
• Agar bisa berfungsi, nilai useSystemAppearance pada WKPreferences harus diubah menjadi true, tetapi karena pengaturan ini sendiri bersifat privat, fitur tersebut tidak bisa dimanfaatkan lewat jalur resmi
• Jika nilainya diaktifkan secara tidak resmi lewat peretasan lalu CSS berikut diterapkan, efeknya bisa terlihat

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

Contoh CSS dan penerapan bersyarat

• Apple menjadikan efek ini sebagai properti CSS, sehingga berbagai aturan dapat ditentukan dengan sederhana berdasarkan ada tidaknya dukungan

• Misalnya, dengan kueri @supports, -apple-visual-effect bisa diterapkan hanya pada perangkat yang mendukungnya

  .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  
  }  
  

Makna dan keterbatasan

• Ini adalah fitur yang tidak bisa digunakan pengembang umum selain internal Apple
• Namun dari sini kita bisa mendapat petunjuk tentang “mengapa webview di dalam aplikasi sering punya reputasi yang kurang baik”
• Webview yang terintegrasi dengan mulus tidak akan disadari keberadaannya oleh pengguna, sehingga lebih jarang memunculkan masalah yang terlihat
• Fakta bahwa Apple mengembangkan ini secara tidak langsung mengisyaratkan bahwa mereka benar-benar memakainya di layanan atau aplikasi mereka sendiri
• Ada kemungkinan dalam keseharian kita sudah beberapa kali mengalami UI berbasis webview tanpa menyadarinya