Apple นำพร็อพเพอร์ตี CSS แบบไม่เปิดเผยสู่สาธารณะมาใช้เพื่อเพิ่มเอฟเฟกต์ Liquid Glass ให้กับคอนเทนต์บนเว็บ

• Apple เพิ่มพร็อพเพอร์ตี CSS แบบไม่เปิดเผยสู่สาธารณะ -apple-visual-effect ที่ใช้งานได้ใน iOS 26
• พร็อพเพอร์ตีนี้ช่วยให้สามารถนำเอฟเฟกต์ดีไซน์ใหม่อย่าง Liquid Glass และวัสดุ blur มาตรฐาน มาใช้กับคอนเทนต์บนเว็บได้ด้วย
• ฟีเจอร์ดังกล่าว ไม่ได้เปิดใช้งานโดยค่าเริ่มต้นในเบราว์เซอร์ Safari หรือ WKWebView
• หากต้องการใช้ใน WKWebView ต้องเปิดการตั้งค่าแบบไม่เปิดเผยสู่สาธารณะชื่อ useSystemAppearance แต่การแก้ไขค่านี้ทำให้ ผ่านการอนุมัติจาก App Store ได้ยาก
• ดูเหมือนว่าฟีเจอร์นี้จะถูกใช้เป็นหลัก ภายใน Apple เอง และนักพัฒนาทั่วไปยังไม่สามารถนำไปใช้ได้ในตอนนี้

---

ภาพรวม

• ผู้เขียนชอบเข้าไปดู GitHub ChangeLog ของ WebKit เป็นงานอดิเรกเพื่อคาดเดาอัปเดตถัดไปของ iOS
• ไม่นานหลัง WWDC ล่าสุด ผู้เขียนพบ Pull Request ใน WebKit ชื่อว่า “[Materials] Rename 'hosted blur' materials to reference 'glass'”
• Liquid Glass ที่ถูกเน้นใน WWDC 2025 ถือเป็นการเปลี่ยนแปลงด้านส่วนติดต่อผู้ใช้ (UI) ครั้งใหญ่ที่สุดนับตั้งแต่ iOS 7
• เดิมทีนี่เป็นการเปลี่ยนแปลงด้านดีไซน์ที่ใช้กับ Native UI เท่านั้น แต่ PR นี้ส่งสัญญาณว่ามีความเกี่ยวข้องกับ web view ด้วย

พร็อพเพอร์ตี CSS แบบไม่เปิดเผยสู่สาธารณะของ Apple

• จาก PR ทำให้เห็นว่า Apple ได้นำ พร็อพเพอร์ตี CSS แบบไม่เปิดเผยสู่สาธารณะชื่อ -apple-visual-effect มาใช้
• ผ่านพร็อพเพอร์ตีนี้ ใน iOS 26 จะสามารถใช้เอฟเฟกต์ Liquid Glass ได้ (เช่น -apple-system-glass-material)
• และยังสามารถใช้ วัสดุ blur มาตรฐาน ได้ในทุกเวอร์ชันด้วย (-apple-system-blur-material-thin เป็นต้น)
• วัสดุเหล่านี้ยังถูกกล่าวถึงในคู่มือการออกแบบอย่างเป็นทางการด้วย

ความเป็นไปได้ในการใช้งานจริง

• แม้จะลองแก้ไข CSS แล้วนำไปใช้ใน Safari ก็พบว่า ไม่ทำงานบนเว็บ
• ในแอปที่ใช้ WKWebView ก็ยัง ถูกปิดไว้โดยค่าเริ่มต้น
• ต้องเปลี่ยนค่า useSystemAppearance ของ WKPreferences เป็น true จึงจะทำงานได้ แต่การตั้งค่านี้เองก็เป็นแบบไม่เปิดเผยสู่สาธารณะ จึงไม่สามารถใช้งานผ่านช่องทางทางการได้
• หากแฮ็กเพื่อเปิดค่านี้อย่างไม่เป็นทางการ แล้วใช้ CSS ด้านล่าง ก็จะเห็นเอฟเฟกต์ได้

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

ตัวอย่าง CSS และการใช้งานแบบมีเงื่อนไข

• Apple ทำเอฟเฟกต์นี้ให้อยู่ในรูปพร็อพเพอร์ตี CSS เพื่อให้สามารถ กำหนดกฎต่าง ๆ ได้อย่างง่ายดายตามการรองรับของระบบ

• ตัวอย่างเช่น ใช้ @supports query เพื่อให้ -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 ที่ผสานเข้ากับระบบได้อย่างแนบเนียนจนผู้ใช้ไม่ทันสังเกต มัก ไม่ค่อยเผยให้เห็นปัญหา
• การที่ Apple พัฒนาสิ่งนี้ขึ้นมา เป็นนัยทางอ้อมว่าบริษัทกำลังใช้งานจริงในบริการหรือแอปของตนเอง
• เป็นไปได้ว่าคุณอาจกำลังสัมผัส UI ที่สร้างบน webview อยู่ในชีวิตประจำวันโดยไม่รู้ตัว