Apple ने वेब कंटेंट में Liquid Glass इफ़ेक्ट जोड़ने के लिए एक प्राइवेट CSS प्रॉपर्टी पेश की

• Apple ने iOS 26 में इस्तेमाल की जा सकने वाली प्राइवेट CSS प्रॉपर्टी -apple-visual-effect जोड़ी है
• यह प्रॉपर्टी Liquid Glass और स्टैंडर्ड blur material जैसे नए डिज़ाइन इफ़ेक्ट्स को वेब कंटेंट पर भी लागू करने देती है
• यह फीचर Safari ब्राउज़र या WKWebView में डिफ़ॉल्ट रूप से सक्षम नहीं है
• WKWebView में इसका उपयोग करने के लिए useSystemAppearance नाम की एक प्राइवेट सेटिंग चालू करनी पड़ती है, और इसे बदलने पर App Store अनुमोदन पाना मुश्किल हो जाता है
• यह फीचर मुख्य रूप से Apple के भीतर आंतरिक उपयोग के लिए दिखता है, इसलिए सामान्य डेवलपर्स अभी इसका उपयोग नहीं कर सकते

---

अवलोकन

• लेखक शौक के तौर पर WebKit के GitHub ChangeLog को अक्सर देखते हैं और iOS के अगले अपडेट का अनुमान लगाते हैं
• हाल ही में WWDC के तुरंत बाद WebKit में “[Materials] Rename 'hosted blur' materials to reference 'glass'” नाम का Pull Request चढ़ा हुआ देखा गया
• 2025 WWDC में ज़ोर देकर दिखाया गया Liquid Glass iOS 7 के बाद का सबसे बड़ा user interface (UI) बदलाव है
• पहले यह डिज़ाइन बदलाव सिर्फ native UI पर लागू होता था, लेकिन इस PR ने web view के साथ इसके संबंध का संकेत दिया

Apple की प्राइवेट CSS प्रॉपर्टी

• PR से पता चला कि Apple ने -apple-visual-effect नाम की एक प्राइवेट CSS प्रॉपर्टी पेश की है
• इस प्रॉपर्टी के ज़रिए iOS 26 में Liquid Glass इफ़ेक्ट (जैसे -apple-system-glass-material) लागू किया जा सकता है
• सभी versions में स्टैंडर्ड blur material (-apple-system-blur-material-thin आदि) का उपयोग भी संभव है
• आधिकारिक design guide में भी ऐसे materials का उल्लेख है

वास्तविक उपयोग की संभावना

• Safari में CSS एडिट करके लागू करने की कोशिश करने पर भी, यह वेब पर काम नहीं करता
• WKWebView-आधारित apps में भी यह डिफ़ॉल्ट रूप से disabled है
• इसे चलाने के लिए WKPreferences के useSystemAppearance मान को true करना पड़ता है, लेकिन यह सेटिंग खुद प्राइवेट है, इसलिए आधिकारिक तरीके से इसका उपयोग संभव नहीं है
• अनौपचारिक तरीके से हैक कर इस मान को सक्षम करने के बाद नीचे जैसा CSS लागू करने पर इफ़ेक्ट देखा जा सकता है

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

CSS उदाहरण और शर्त आधारित उपयोग

• Apple ने इस इफ़ेक्ट को CSS प्रॉपर्टी के रूप में बनाया है, ताकि support उपलब्ध होने पर अलग-अलग rules आसानी से तय किए जा सकें

• उदाहरण के लिए @supports query का उपयोग करके, सिर्फ supported devices पर -apple-visual-effect लागू किया जा सकता है

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

महत्व और सीमाएँ

• Apple के आंतरिक उपयोग को छोड़ दें तो यह सामान्य डेवलपर्स के लिए उपलब्ध फीचर नहीं है
• लेकिन इससे यह समझने का एक संकेत मिलता है कि ऐप के भीतर webview की छवि अक्सर खराब क्यों होती है
• जो webview बहुत seamless तरीके से अच्छी तरह integrated होते हैं, उनके अस्तित्व का उपयोगकर्ता को अक्सर पता ही नहीं चलता, इसलिए समस्याएँ सामने आने की संभावना कम रहती है
• Apple ने इसे विकसित किया है, यह अप्रत्यक्ष रूप से संकेत देता है कि कंपनी इसे अपनी सेवाओं या apps में वास्तव में इस्तेमाल कर रही है
• संभव है कि रोज़मर्रा के इस्तेमाल में आप अनजाने में webview-आधारित UI का अनुभव कर रहे हों