Apple introduz propriedade CSS privada para adicionar efeitos Liquid Glass ao conteúdo web

• A Apple adicionou no iOS 26 a propriedade CSS privada -apple-visual-effect
• Essa propriedade permite aplicar também ao conteúdo web novos efeitos de design, como Liquid Glass e materiais de blur padrão
• Esse recurso não fica ativado por padrão no navegador Safari nem no WKWebView
• Para usá-lo no WKWebView, é preciso ativar a configuração privada useSystemAppearance, e alterar isso dificulta a aprovação na App Store
• O recurso parece ser usado principalmente internamente pela Apple, e desenvolvedores em geral não podem aproveitá-lo por enquanto

---

Visão geral

• O autor costuma vasculhar por hobby o ChangeLog do WebKit no GitHub para prever as próximas atualizações do iOS
• Logo após a WWDC recente, ele encontrou no WebKit um Pull Request chamado “[Materials] Rename 'hosted blur' materials to reference 'glass'”
• O Liquid Glass, destacado na WWDC 2025, é a maior mudança de interface do usuário (UI) desde o iOS 7
• Antes, essa mudança de design parecia restrita à UI nativa, mas esse PR sugere uma relação também com webviews

A propriedade CSS privada da Apple

• O PR revelou que a Apple introduziu a propriedade CSS privada -apple-visual-effect
• Com ela, no iOS 26 passa a ser possível aplicar o efeito Liquid Glass (por exemplo, -apple-system-glass-material)
• Também é possível usar em todas as versões materiais de blur padrão (-apple-system-blur-material-thin etc.)
• Esses materiais também são citados no guia oficial de design

Possibilidade de uso na prática

• Mesmo tentando editar e aplicar o CSS no Safari, isso não funciona na web
• Em apps baseados em WKWebView, o recurso também vem desativado por padrão
• Ele só funciona ao definir useSystemAppearance de WKPreferences como true, mas essa configuração também é privada, então não pode ser usada por vias oficiais
• De forma não oficial, ao hackear a ativação desse valor e aplicar o CSS abaixo, é possível ver o efeito

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

Exemplo de CSS e aplicação condicional

• A Apple transformou esse efeito em uma propriedade CSS, permitindo definir regras diferentes de forma simples conforme o suporte

• Por exemplo, usando uma query @supports, é possível aplicar -apple-visual-effect apenas em dispositivos compatíveis

  .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 e limitações

• É um recurso que desenvolvedores comuns não podem usar, exceto dentro da Apple
• Ainda assim, isso ajuda a entender “por que webviews dentro de apps às vezes ganham má reputação”
• Quando um webview é bem integrado de forma seamless, o usuário nem percebe que ele existe, então há menos chances de os problemas ficarem visíveis
• O fato de a Apple ter desenvolvido isso sugere indiretamente que ela o usa de fato em seus próprios serviços ou apps
• É possível que, no dia a dia, você já esteja encontrando interfaces baseadas em webview sem perceber