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

[ahwjdekf]

Hal konyol seperti ini sebaiknya diabaikan dan tidak digunakan oleh siapa pun

[coremaker]

Saat Apple mematikan Flash, saya ikut bersorak karena kepentingannya sejalan,
namun ironis rasanya bahwa pilihan seperti sekarang justru terasa seperti keputusan yang mengabaikan ekosistem yang sudah ada.

Apakah ini kebangkitan kembali IE?

[spp00]

Sejak era IE, dari sudut pandang pengembang frontend, posisi seperti IE bukanlah Chrome melainkan Safari. Gara-gara Safari, pengembang frontend harus membeli Mac yang mahal. Ada kasus ketika Chrome dan Firefox semuanya berjalan, tetapi hanya Safari yang tidak berfungsi atau tampil aneh.

[GN⁺]

Komentar Hacker News

• Tindakan menyediakan fitur sistem operasi (OS) hanya untuk aplikasi sendiri jelas merupakan praktik yang menghambat persaingan. Memanfaatkan posisi dominan di pasar ponsel dan sistem operasi agar hanya aplikasi sendiri yang bisa memakai fitur yang tidak diizinkan untuk pesaing di pasar aplikasi adalah contoh yang sangat jelas
  • Awalnya saya ingin marah pada Apple, tetapi ternyata tidak begitu. Cukup baca dokumentasi WinAPI saja, ada sangat banyak parameter yang ditandai "reserved". Pengembang sistem operasi sering membuat fitur yang memang hanya dimaksudkan untuk dipakai secara internal. Kali ini memang cuma peningkatan UI, jadi rasanya tidak perlu dijadikan privat, tetapi mungkin Apple membiarkannya tetap privat karena tidak ingin terus menanggung pemeliharaannya
  • Apakah semua properti CSS nonstandar otomatis “menghambat persaingan”? Saya jadi bertanya-tanya apakah “-webkit-tap-highlight-color” milik Google juga harus dikritik dengan cara yang sama. Logikanya jadi seperti harus melarang praktik membuat properti CSS proprietari itu sendiri, dan menurut saya klaim seperti ini terdengar berlebihan
  • Saya juga tidak yakin ini benar-benar "jelas merupakan tindakan anti-persaingan" dalam arti hukum. Di AS, yang berlaku adalah Sherman Act dan Clayton Act sebagai hukum persaingan. Karena ini tidak termasuk dalam daftar "pelanggaran yang secara inheren melawan hukum (per se)" yang disebut dalam undang-undang tersebut, maka yang akan dipakai adalah "rule of reason". Dalam kasus seperti ini, pelanggaran hanya diakui jika tindakan itu secara langsung merugikan persaingan, tanpa efek positif yang berarti, dan tanpa alternatif yang kurang membatasi. Sulit membuktikan kerugian nyata pada persaingan yang ditimbulkan oleh sebuah properti CSS, dan siapa pun yang mau juga bisa membuat sendiri CSS “liquid glass”, jadi menurut saya sulit diterapkan
  • Saya penasaran bagaimana pendapat orang tentang kasus yang jauh lebih membatasi, seperti perangkat keras komputer. Misalnya, konsol video game mengharuskan semua kode ditandatangani secara kriptografis, dan pihak ketiga tidak bisa mendistribusikan perangkat lunak apa pun tanpa izin pabrikan
  • Kalau membuat teks UI jadi sulit dibaca dianggap sebagai keunggulan kompetitif, mungkin bisa juga dilihat seperti itu
• Saya suka “teori besar Alastair tentang webview di dalam aplikasi”: alasan utama webview dalam aplikasi punya reputasi buruk adalah karena webview yang benar-benar terintegrasi dengan baik bahkan tidak disadari oleh pengguna
  • Ada perbedaan besar antara orang yang benar-benar pernah mengimplementasikan webview dan orang yang cuma pernah mendengar bahwa web app bisa langsung dibungkus jadi aplikasi native. Kebanyakan orang termasuk yang kedua
  • Jadi mungkin itulah alasan fitur ini diperkenalkan. Biasanya cara murah untuk mengecek apakah aplikasi memakai toolkit UI pihak ketiga adalah dengan mengganti tema sistem lalu melihat apakah aplikasi mengikuti perubahan tema atau perubahan warna/skala dengan baik. Bahkan beberapa aplikasi buatan Apple sendiri tampaknya tidak merefleksikan tema dengan benar, sehingga akhirnya mereka membuat properti CSS privat ini. Sebaliknya, beberapa vendor OS lain menghapus kemampuan kontrol tema itu sendiri agar terhindar dari masalah mengelola banyak toolkit yang setengah jadi
  • Saya akan mengakuinya kalau ada yang bisa menyebut satu saja contoh aplikasi webview yang benar-benar terintegrasi sempurna. Pengguna rata-rata mungkin memang tidak sadar, tetapi kalau benar ada, pasti setidaknya sekali pernah disebut di Hacker News. Misalnya sebagai bantahan setiap kali ada debat soal webview: “Tapi aplikasi Foo juga dibuat dengan webview, dan hasilnya bagus sekali”
  • Rasanya seperti, “Rambut palsu selalu terlihat palsu. Saya belum pernah melihat rambut palsu yang benar-benar tampak asli”
• Ada yang bilang “fitur ini pasti dibuat karena Apple sendiri membutuhkannya”, tetapi tak seorang pun tahu dipakai di mana. Kalau menebak, mungkin di pengaturan iCloud (di dalam aplikasi Settings) atau halaman akun di App Store/Music/TV app (ketuk ikon profil di kanan atas). Halaman-halaman seperti ini kebanyakan adalah webview tersembunyi yang berusaha tampak native. Petunjuknya, kalau ditekan lama akan muncul pratinjau halaman web pada tautan . Panduan pengguna di aplikasi Tips juga kandidatnya. Itu tempat yang layak saya cek duluan
• Menarik bahwa orang menduga "Apple akan memakainya di suatu tempat", tetapi pada kenyataannya kita bahkan tidak bisa mengenali di mana itu dipakai. Ternyata kita sering berhadapan dengan webview di iOS sehari-hari tanpa menyadarinya sama sekali
  • Khususnya aplikasi Settings, terutama bagian akun atau iCloud, memang sering membuat saya curiga itu webview. Ada perbedaan kecil, seperti ikon yang terasa muncul terlambat saat memuat, yang membuat saya menduga begitu
  • Aplikasi App Store juga tampaknya banyak sekali memakai webview
  • Setahu saya, Mail dan Calendar juga cukup banyak memakai webview
  • Menurut saya ini juga akan dipakai di Apple.com. Mirip seperti dulu mereka memakai backdrop-filter untuk efek blur latar di iOS
  • Apple Music juga tampaknya cukup banyak memakai webview
• Penemuan yang bagus. UI kaca baru Apple memang banyak dikritik, tetapi saya justru menyukainya. Rasanya OS kembali memiliki karakter yang nyata, lepas dari kesan monoton dan hambar. Area yang bisa diklik juga jadi lebih mudah terlihat, dan tombol bisa lebih mudah dibedakan secara visual dari teks biasa. Menurut saya ini perubahan yang patut disambut. Bukan semata karena “nostalgia”, tetapi memang perubahan yang praktis. Saya memasang iOS 26 Beta lebih awal untuk menguji situs web, dan walau ada sedikit masalah, secara keseluruhan arah memberi OS lebih banyak karakter terasa bagus. Pengguna umum juga akan menyukainya
  • Saya suka efek kaca dan unsur estetikanya, tetapi dari sisi fungsionalitas ada bagian yang justru lebih tidak nyaman dibanding sebelumnya di beberapa aplikasi. Tombol-tombol yang dulu mudah dijangkau kini tersembunyi di bawah menu dan lebih sulit ditemukan
  • Menurut saya, secara umum publik luas tidak akan menyukai perubahan ini. Orang yang merasa “sistem operasi harus punya karakter” seperti ini hanya segelintir penggemar teknologi. Kebanyakan orang melihat OS hanya sebagai ‘alat’ untuk menyelesaikan sesuatu, jadi perubahan visual seperti ini sering kali tidak punya makna lebih dari sekadar hal yang menarik dilihat. Bagian yang paling saya tidak suka dari desain liquid glass adalah bilah tab bawah yang baru. Apple Music yang paling parah. Untuk memakai antarmuka Search sekarang butuh satu klik tambahan, dan bahkan setelah mengklik kotak Search pun masih harus menekan lagi agar keyboard muncul. Lalu semua interaksi diberi animasi yang rumit dan lambat. Misalnya saat pindah dari Home ke Library, tab itu membesar seperti gelembung di atas bilah tab sambil berkilau, dan itu hanya terasa mengganggu, tidak membantu. Pengaturan aksesibilitas seperti Reduce Transparency atau Reduce Motion tidak diterapkan pada animasi-animasi ini. Bahkan baru-baru ini, beberapa aplikasi bawaan Apple sering lupa menerapkan opsi aksesibilitas, atau penerapannya setengah-setengah. Misalnya, saat Reduce Motion diaktifkan, beberapa animasi seperti saat mengetuk album memang disederhanakan, tetapi saat swipe ke kiri atau aksi lain animasinya masih tetap berlebihan. Apple Podcasts dan iMessage juga sama. Reduce Transparency di sebagian aplikasi bukan mengurangi transparansi, melainkan malah membuat semua latar menjadi hitam (#000000). Contoh seperti ini banyak sekali di seluruh iOS. Bahkan beberapa hari menjelang rilis pun, tempat seperti dropdown dan tombol keyboard yang nonaktif masih belum mencerminkan opsi aksesibilitas
  • Klaim bahwa “ukuran target klik bisa dikenali secara visual dan tombol jelas berbeda dari teks” itu sebenarnya bukan standar yang tinggi
  • Secara pribadi saya ada di kubu “desain ini benar-benar mengerikan”. Saya tidak tahu apa yang dipikirkan Apple
• Mungkin saja Apple memang belum ingin siapa pun memakai fitur ini dulu. Setelah pengumuman OS terbaru, banyak pengembang kemungkinan akan langsung mencoba mengadopsinya, jadi mungkin Apple ingin memastikan pemakaian internalnya lebih dulu sebelum dibuka. Memang ada juga beberapa tuduhan tanpa dasar di thread ini. Kita masih belum tahu pihak mana yang benar
• Premis bahwa “kalau Apple membuatnya berarti Apple pasti akan memakainya” juga tidak selalu benar. Dalam perangkat lunak nyata ada sangat banyak kode atau fitur yang akhirnya tidak dipakai. Arah pengembangan bisa berubah berkali-kali, sehingga properti CSS yang ditambahkan pada tahap kedua bisa saja hilang sama sekali pada tahap keempat
• Saya sungguh berharap liquid jelly tidak menjadi tren
  • Terlepas dari suka atau tidak suka pada liquid glass, perubahan paradigma dari “chrome UI membungkus konten aplikasi” menjadi “UI menutupi konten” terasa berorientasi masa depan. Ini juga cocok dengan AR, dan memungkinkan pemisahan UI dan konten sesuai berbagai ukuran layar. Implementasi kali ini memang punya kelebihan dan kekurangan, tetapi pendekatan ini kemungkinan akan dipakai lebih luas ke depannya. Model UI overlay juga tidak harus transparan. Bisa juga opak tetapi tetap melayang
  • Generasi muda sedang terobsesi nostalgia pada estetika era Aero/Glass. Karena Apple yang mengadopsinya, kemungkinan besar ini akan jadi tren. Secara industri, suasananya memang seperti apa pun yang dilakukan Apple pasti diikuti
  • Secara pribadi saya cuma berharap efek bounce/jiggle-nya dihilangkan. Terlalu banyak goyangan dan getaran, sehingga alih-alih terasa seperti kaca, tampilannya malah seperti blob jeli
  • Saya juga berharap ini tidak jadi tren, tetapi jujur saya pikir kalau Apple yang melakukannya, pada akhirnya semua orang akan ikut
  • Ini sebenarnya sudah mulai jadi tren
• Katanya harus mengaktifkan pengaturan useSystemAppearance di WKPreferences, tetapi karena itu privat aplikasi jadi tidak bisa lolos persetujuan App Store. Saya penasaran apakah itu benar. Saya tidak terlalu paham pengembangan iOS, tetapi saya ingat pernah melihat video orang membongkar aplikasi yang membuat widget layar utama jadi animatif dengan memakai berbagai API internal
  • Hal seperti itu tidak akan lolos peninjauan App Store
  • Maksudmu video ini?
• Ini tren paling jelek yang pernah saya lihat sejak sudut membulat dan padding lebar. Semoga cepat hilang

[addons]

Omong kosong, urus dulu kompatibilitas Safari yang benar.