Apple giới thiệu thuộc tính CSS riêng tư để thêm hiệu ứng Liquid Glass vào nội dung web

• Apple đã bổ sung thuộc tính CSS riêng tư -apple-visual-effect có thể dùng trong iOS 26
• Thuộc tính này cho phép áp dụng các hiệu ứng thiết kế mới như Liquid Glass và vật liệu blur tiêu chuẩn cho cả nội dung web
• Tính năng này không được bật mặc định trong trình duyệt Safari hoặc WKWebView
• Để dùng trong WKWebView, cần bật thiết lập riêng tư useSystemAppearance, nhưng việc thay đổi nó khiến rất khó được App Store phê duyệt
• Có vẻ tính năng này chủ yếu được Apple sử dụng nội bộ, và các nhà phát triển thông thường hiện chưa thể tận dụng

---

Tổng quan

• Tác giả thường xem GitHub ChangeLog của WebKit như một thú vui để dự đoán các bản cập nhật iOS sắp tới
• Gần đây, ngay sau WWDC, tác giả phát hiện một Pull Request trên WebKit có tiêu đề “[Materials] Rename 'hosted blur' materials to reference 'glass'”
• Liquid Glass được nhấn mạnh tại WWDC 2025 là thay đổi lớn nhất về giao diện người dùng (UI) kể từ iOS 7
• Trước đây đây là thay đổi thiết kế chỉ áp dụng cho UI native, nhưng PR lần này gợi ý mối liên hệ với web view

Thuộc tính CSS riêng tư của Apple

• PR cho thấy Apple đã đưa vào một thuộc tính CSS riêng tư tên là -apple-visual-effect
• Thông qua thuộc tính này, trên iOS 26 có thể áp dụng hiệu ứng Liquid Glass (ví dụ: -apple-system-glass-material)
• Trên mọi phiên bản, cũng có thể dùng vật liệu blur tiêu chuẩn (-apple-system-blur-material-thin v.v.)
• Các vật liệu này cũng được nhắc đến trong hướng dẫn thiết kế chính thức

Khả năng áp dụng thực tế

• Ngay cả khi thử chỉnh sửa CSS trong Safari để áp dụng, nó vẫn không hoạt động trên web
• Trong các ứng dụng dựa trên WKWebView, tính năng này cũng bị tắt theo mặc định
• Chỉ khi đổi giá trị useSystemAppearance trong WKPreferences thành true thì nó mới hoạt động, nhưng bản thân thiết lập này là riêng tư nên không thể dùng qua con đường chính thức
• Nếu bật giá trị đó bằng cách không chính thức rồi áp dụng CSS như bên dưới, có thể thấy hiệu ứng

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

Ví dụ CSS và áp dụng có điều kiện

• Apple đã biến hiệu ứng này thành một thuộc tính CSS, giúp đơn giản hóa việc chỉ định các quy tắc khác nhau tùy theo khả năng hỗ trợ

• Ví dụ, có thể dùng truy vấn @supports để chỉ áp dụng -apple-visual-effect trên các thiết bị được hỗ trợ

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

Ý nghĩa và giới hạn

• Đây là một tính năng mà nhà phát triển thông thường không thể sử dụng, trừ nội bộ Apple
• Tuy nhiên, nó cũng cho thấy một gợi ý về việc vì sao webview trong ứng dụng thường có tiếng xấu
• Một webview được tích hợp mượt mà đến mức người dùng không nhận ra sự tồn tại của nó thì ít khi để lộ vấn đề
• Việc Apple phát triển tính năng này gián tiếp cho thấy hãng đang thực sự dùng nó trong các dịch vụ hoặc ứng dụng của mình
• Có khả năng trong đời sống hằng ngày, người dùng đang vô thức trải nghiệm UI dựa trên webview