Apple introduce una propiedad CSS privada para añadir el efecto Liquid Glass al contenido web

• Apple añadió en iOS 26 una propiedad CSS privada llamada -apple-visual-effect
• Esta propiedad permite aplicar también al contenido web nuevos efectos de diseño como Liquid Glass y materiales estándar de blur
• Esta función no está activada por defecto en Safari ni en WKWebView
• Para usarla en WKWebView, hay que activar una configuración privada llamada useSystemAppearance, pero cambiarla dificulta la aprobación en la App Store
• Todo indica que esta función se usa principalmente de forma interna en Apple, y los desarrolladores comunes no pueden aprovecharla por ahora

---

Resumen

• El autor suele revisar por hobby el GitHub ChangeLog de WebKit para anticipar futuras actualizaciones de iOS
• Poco después de la WWDC reciente, encontró en WebKit un Pull Request titulado “[Materials] Rename 'hosted blur' materials to reference 'glass'”
• Liquid Glass, destacado en la WWDC 2025, es el mayor cambio en la interfaz de usuario (UI) desde iOS 7
• Hasta ahora era un cambio de diseño aplicado solo a la UI nativa, pero este PR sugiere una relación con las web views

La propiedad CSS privada de Apple

• El PR revela que Apple introdujo una propiedad CSS privada llamada -apple-visual-effect
• Con esta propiedad, en iOS 26 es posible aplicar el efecto Liquid Glass (por ejemplo, -apple-system-glass-material)
• También permite usar en todas las versiones materiales estándar de blur (-apple-system-blur-material-thin, etc.)
• Estos materiales también aparecen mencionados en la guía oficial de diseño

Posibilidades reales de uso

• Aunque se intente editar y aplicar el CSS en Safari, no funciona en la web
• En apps basadas en WKWebView, también está desactivado por defecto
• Solo funciona si se cambia a true el valor de useSystemAppearance en WKPreferences, pero como esa configuración también es privada, no puede usarse por vías oficiales
• Si se habilita ese valor de forma no oficial mediante hacks y luego se aplica un CSS como el siguiente, sí es posible ver el efecto

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

Ejemplo de CSS y aplicación condicional

• Apple convirtió este efecto en una propiedad CSS, lo que permite definir fácilmente distintas reglas según haya soporte o no

• Por ejemplo, usando una consulta @supports, se puede aplicar -apple-visual-effect solo en dispositivos compatibles

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

Significado y limitaciones

• Es una función que los desarrolladores comunes no pueden usar, salvo dentro de Apple
• Aun así, esto da una pista de por qué los webviews dentro de apps a veces tienen mala reputación
• Cuando un webview está integrado de forma realmente fluida, el usuario ni siquiera nota que existe, por lo que es menos probable que los problemas se hagan visibles
• El hecho de que Apple haya desarrollado esto sugiere indirectamente que ya lo usa en sus propios servicios o apps
• Es posible que en la vida diaria ya estés interactuando con interfaces basadas en webview sin darte cuenta