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

(alastair.is)

4 คะแนน โดย GN⁺ 2025-09-16 | 5 ความคิดเห็น | แชร์ทาง WhatsApp

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 อยู่ในชีวิตประจำวันโดยไม่รู้ตัว

5 ความคิดเห็น

ahwjdekf 2025-09-18

เรื่องไร้สาระแบบนี้ควรถูกเมินไป และไม่มีใครควรใช้มัน

coremaker 2025-09-17

ตอนที่ Apple ฆ่า Flash ผมเคยโห่ร้องยินดีเพราะผลประโยชน์มันสอดคล้องกัน
แต่ก็น่าขันดีที่การตัดสินใจแบบนี้ในตอนนี้กลับให้ความรู้สึกเหมือนเป็นการมองข้ามระบบนิเวศเดิมที่มีอยู่

นี่คือการกลับมาของ IE หรือเปล่า?

spp00 2025-09-18

ตั้งแต่ยุค IE เป็นต้นมา สำหรับนักพัฒนาฝั่งฟรอนต์เอนด์ คู่ปรับในบทบาทแบบ IE ไม่ใช่ Chrome แต่เป็น Safari ต่างหาก เพราะ Safari ทำให้นักพัฒนาฟรอนต์เอนด์ต้องซื้อ Mac ราคาแพง โดยมีหลายกรณีที่ Chrome และ Firefox ใช้งานได้หมด แต่มีแค่ Safari ที่ใช้ไม่ได้หรือแสดงผลเพี้ยน

GN⁺ 2025-09-16

ความคิดเห็นจาก Hacker News

การให้ฟีเจอร์ของระบบปฏิบัติการ (OS) ใช้ได้เฉพาะแอปของตัวเองเท่านั้น ถือเป็นพฤติกรรมที่บั่นทอนการแข่งขันอย่างชัดเจน การใช้สถานะที่เหนือกว่าในตลาดโทรศัพท์และระบบปฏิบัติการ ไปเอื้อให้แอปของตัวเองมีฟีเจอร์ที่คู่แข่งใช้ไม่ได้ในตลาดแอป เป็นตัวอย่างที่เห็นได้ชัด
- เดิมทีอยากจะโกรธ Apple เรื่องนี้ แต่กลับไม่ได้รู้สึกแบบนั้น แค่อ่านเอกสาร WinAPI ก็เจอพารามิเตอร์ที่เขียนว่า "reserved" เต็มไปหมดแล้ว นักพัฒนาระบบปฏิบัติการมักสร้างฟีเจอร์ไว้ใช้ภายในก่อนอยู่เสมอ รอบนี้เป็นแค่การปรับปรุง UI เล็กน้อย เลยอาจไม่จำเป็นต้องปิดเป็น private แต่ก็น่าจะเป็นเพราะ Apple ไม่อยากแบกรับภาระดูแลมันต่อ เลยเก็บไว้เป็น private
- จะบอกว่า CSS property ที่ไม่เป็นมาตรฐานทั้งหมดเป็น “การบ่อนทำลายการแข่งขัน” งั้นหรือ? แล้วของ Google อย่าง “-webkit-tap-highlight-color” ก็ควรถูกตำหนิเหมือนกันหรือเปล่า? ตรรกะนี้เท่ากับว่าควรห้ามธรรมเนียมการสร้าง CSS property แบบ proprietary ไปเลย ซึ่งสำหรับผมมันดูเกินจริง
- ยังไม่แน่ใจนักว่าในความหมายทางกฎหมายมันเป็น "พฤติกรรมต่อต้านการแข่งขันอย่างชัดเจน" จริงหรือไม่ ในสหรัฐฯ จะเกี่ยวข้องกับกฎหมายแข่งขันทางการค้าอย่าง Sherman Act และ Clayton Act ซึ่งรายการการกระทำที่เป็น "ผิดโดยสภาพ (per se)" ที่ระบุไว้ในกฎหมายเหล่านี้ไม่ได้ครอบคลุมกรณีนี้ ดังนั้นน่าจะต้องใช้หลัก "rule of reason" แทน ซึ่งจะยอมรับได้ก็ต่อเมื่อการกระทำนั้นทำร้ายการแข่งขันโดยตรง และไม่มีผลดีสำคัญหรือทางเลือกที่จำกัดน้อยกว่านี้ ปัญหาคือพิสูจน์ได้ยากว่า CSS property นี้สร้างความเสียหายต่อการแข่งขันจริงอย่างไร อีกทั้งถ้าใครอยากทำ CSS แบบ “liquid glass” เองก็ไม่มีใครห้าม จึงไม่น่าจะเข้าเกณฑ์ง่ายนัก
- แล้วกรณีที่จำกัดมากกว่านี้มากอย่างฮาร์ดแวร์คอมพิวเตอร์ล่ะคิดอย่างไร เช่น เครื่องเกมคอนโซลที่โค้ดทั้งหมดต้องมีการเข้ารหัสและเซ็นรับรอง และบุคคลที่สามไม่สามารถเผยแพร่ซอฟต์แวร์ใด ๆ ได้หากไม่ได้รับอนุญาตจากผู้ผลิต
- ถ้ามองว่าการทำให้ข้อความใน UI อ่านยากขึ้นคือความได้เปรียบทางการแข่งขัน ก็อาจจะมองแบบนั้นได้เหมือนกัน
ผมชอบ “ทฤษฎีเว็บวิวในแอปของ Alastair” มาก: เหตุผลหลักที่เว็บวิวในแอปมีชื่อเสียงไม่ดี ก็เพราะถ้ามันถูกผสานได้ดีจริง ผู้ใช้จะไม่ทันสังเกตด้วยซ้ำ
- คนที่เคยลงมือทำเว็บวิวจริง ๆ กับคนที่แค่เคยได้ยินมาว่าเอาเว็บแอปมาห่อเป็น native app ก็พอแล้ว นั้นต่างกันมาก ส่วนใหญ่เป็นพวกหลัง
- เพราะแบบนี้แหละจึงน่าจะมีฟีเจอร์นี้ขึ้นมา ปกติวิธีต้นทุนต่ำในการดูว่าแอปใช้ third-party UI toolkit หรือไม่ คือเปลี่ยน system theme แล้วดูว่าแอปปรับตามธีม หรือการเปลี่ยนสี/สเกลได้ดีแค่ไหน แม้แต่แอปของ Apple เองบางส่วนก็สะท้อนธีมได้ไม่ดีนัก เลยสุดท้ายต้องสร้าง CSS property แบบ private ขึ้นมา ขณะที่ผู้ขายระบบปฏิบัติการรายอื่นบางเจ้าก็แก้ปัญหาด้วยการตัดความสามารถควบคุมธีมทิ้งไปเลย เพื่อหลีกเลี่ยงภาระดูแล toolkit หลายตัวที่ยังไม่สมบูรณ์
- ถ้าใครยกตัวอย่างแอปเว็บวิวที่ผสานได้เนียนสมบูรณ์แบบสักแอปเดียวได้ ผมก็ยอมรับนะ ผู้ใช้งานทั่วไปอาจไม่ทันสังเกต แต่ถ้ามันมีจริง บน Hacker News คงต้องเคยถูกพูดถึงอย่างน้อยสักครั้งในฐานะตัวอย่างโต้แย้งเวลามีการถกเรื่องเว็บวิว เช่น “แต่แอป Foo ก็ทำด้วยเว็บวิวไม่ใช่เหรอ แล้วมันก็ออกมาดีมาก”
- มันให้ความรู้สึกประมาณ “วิกปลอมดูปลอมเสมอ ผมไม่เคยเห็นวิกที่ดูเหมือนของจริงเลย”
มีคนบอกว่า “ฟีเจอร์นี้น่าจะถูกสร้างขึ้นเพราะ Apple ต้องใช้เอง” แต่ก็ไม่มีใครรู้ว่ามันถูกใช้ตรงไหน ถ้าจะเดา ก็น่าจะเป็นหน้าอย่างการตั้งค่า iCloud (ภายในแอป Settings) หรือหน้าบัญชีใน App Store/Music/TV (แตะไอคอนโปรไฟล์มุมขวาบน) เพราะหน้าพวกนี้ส่วนใหญ่น่าจะเป็นเว็บวิวที่ซ่อนอยู่แต่พยายามทำให้ดูเหมือน native ถ้ากดค้างจะเห็นพรีวิวหน้าเว็บจากลิงก์ `` ซึ่งเป็นเบาะแส ส่วนคู่มือผู้ใช้ในแอป Tips ก็เป็นอีกตัวเลือกที่เป็นไปได้ น่าลองเช็กดูก่อน
น่าสนใจตรงที่ทุกคนเดาว่า "Apple คงเอาไปใช้ที่ไหนสักแห่ง" แต่ในความเป็นจริงเรากลับไม่เคยจับได้เลยว่ามันถูกใช้ตรงไหน แปลว่าในชีวิตประจำวันเราเจอเว็บวิวบน iOS บ่อยมากอยู่แล้วโดยไม่รู้ตัวเลย
- โดยเฉพาะแอป Settings โดยเฉพาะส่วนบัญชีหรือ iCloud ผมสงสัยบ่อยว่าเป็นเว็บวิว ดูจากความต่างเล็ก ๆ อย่างไอคอนขึ้นช้าตอนโหลด
- แอป App Store ก็ดูเหมือนจะใช้เว็บวิวเยอะมาก
- เท่าที่รู้ Mail กับ Calendar ก็ใช้เว็บวิวพอสมควร
- ผมว่า Apple.com ก็น่าจะเตรียมใช้เหมือนกัน คล้ายกับเมื่อก่อนบน iOS ที่ใช้ backdrop-filter ทำเอฟเฟกต์เบลอฉากหลัง
- Apple Music ก็ดูเหมือนใช้เว็บวิวเยอะมากเช่นกัน
เป็นการค้นพบที่ดี UI แบบกระจกใหม่ของ Apple โดนวิจารณ์เยอะ แต่ผมกลับชอบ มันทำให้ OS รู้สึกเหมือนกลับมามีเอกลักษณ์จริง ๆ อีกครั้ง หลุดจากความเรียบแบนและจืดชืดไปได้ พื้นที่ที่กดได้ก็ดูง่ายขึ้น และแยกปุ่มออกจากข้อความธรรมดาได้ด้วยสายตา ผมมองว่าเป็นการเปลี่ยนแปลงที่น่ายินดี ไม่ใช่แค่เพราะ “ความคิดถึงอดีต” แต่ใช้งานได้จริงด้วย ตอนนี้ผมติดตั้ง iOS 26 Beta ก่อนใครเพื่อทดสอบเว็บไซต์อยู่ แม้จะมีปัญหาเล็กน้อยบ้าง แต่โดยรวมผมคิดว่าทิศทางที่ทำให้ OS มีบุคลิกมากขึ้นเป็นเรื่องดี และผู้ใช้ทั่วไปก็น่าจะชอบ
- ผมชอบเอฟเฟกต์กระจกและองค์ประกอบด้านความสวยงาม แต่ในหลายแอปด้านการใช้งานจริงกลับลำบากกว่าเดิม ปุ่มที่เคยเข้าถึงง่ายถูกซ่อนไว้ใต้เมนูและหายากขึ้น
- ผมคิดว่าโดยรวมแล้วคนทั่วไปจะไม่ชอบการเปลี่ยนแปลงนี้ คนที่คิดว่า “ระบบปฏิบัติการควรมีบุคลิก” แบบนี้มีแต่กลุ่มเทคเอนธูเซียสต์ส่วนน้อยเท่านั้น คนส่วนใหญ่เห็น OS เป็นแค่ ‘เครื่องมือ’ สำหรับทำงานบางอย่าง การเปลี่ยนแปลงด้านภาพแบบนี้จึงมักไม่มีความหมายเกินกว่าความแปลกใหม่ โดยเฉพาะสิ่งที่ผมไม่ชอบที่สุดในดีไซน์ liquid glass คือ bottom tab bar แบบใหม่ Apple Music แย่สุด เพราะต้องกดเพิ่มอีกหนึ่งครั้งกว่าจะเข้า Search interface แล้วพอกด Search Box ก็ยังต้องกดอีกเพื่อให้คีย์บอร์ดขึ้น แถมทุก interaction ยังถูกใส่อนิเมชันที่ซับซ้อนและช้าเข้าไปด้วย เช่น เวลาสลับจาก Home ไป Library แท็บจะพองขึ้นเหมือนฟองลอยเหนือ tab bar พร้อมแสงวิบวับ ซึ่งมีแต่ทำให้เสียสมาธิ ไม่ได้ช่วยอะไร การตั้งค่า accessibility อย่าง Reduce Transparency หรือ Reduce Motion ก็ไม่ส่งผลกับอนิเมชันพวกนี้ แถมช่วงหลังแอปพื้นฐานหลายตัวของ Apple ยังมักลืมรองรับ accessibility option หรือทำได้ไม่ดี เช่น เปิด Reduce Motion แล้ว อนิเมชันบางอย่างอย่างการกดอัลบั้มจะเบาลงก็จริง แต่การปัดซ้ายหรือการกระทำอื่น ๆ ยังเว่อร์อยู่เหมือนเดิม Apple Podcasts กับ iMessage ก็เป็นแบบเดียวกัน ส่วน Reduce Transparency บางแอปก็ลดความโปร่งใสด้วยการใส่พื้นหลังสีดำล้วน #000000 ไปเลย ตัวอย่างแบบนี้มีทั่วทั้ง iOS แม้จะใกล้วันปล่อยจริงเพียงไม่กี่วัน ก็ยังมีจุดอย่าง dropdown หรือปุ่มคีย์บอร์ดที่ไม่พร้อมใช้งานที่ไม่สะท้อนการตั้งค่า accessibility
- เรื่องที่บอกว่า “ขนาดพื้นที่กดดูออกด้วยสายตา และปุ่มก็ต่างจากข้อความชัดเจน” นั้น เอาจริง ๆ ก็ไม่ใช่มาตรฐานที่สูงนัก
- ส่วนตัวผมอยู่ฝั่ง “ดีไซน์นี้แย่มากจริง ๆ” ไม่เข้าใจเลยว่า Apple คิดอะไรอยู่
ก็เป็นไปได้ว่า Apple ยังไม่อยากให้ใครใช้ฟีเจอร์นี้ในตอนนี้ หลังการเปิดตัว OS ใหม่ นักพัฒนาจำนวนมากอาจรีบนำไปใช้ทันที จึงอาจต้องการยืนยันการใช้งานภายในให้ชัดก่อนค่อยเปิดเผย และก็จริงที่ในกระทู้นี้มีคำวิจารณ์เชิงกล่าวหาแบบไม่มีหลักฐานอยู่พอสมควร ตอนนี้ยังบอกไม่ได้ว่าใครถูก
ข้ออ้างว่า “เพราะ Apple จะใช้เอง” ก็ไม่ได้จริงเสมอไป ในซอฟต์แวร์จริงมีโค้ดหรือฟีเจอร์ที่ไม่ได้ใช้อยู่เยอะมาก ระหว่างพัฒนามักเปลี่ยนทิศทางหลายครั้ง เช่น CSS property ที่เพิ่มเข้ามาในเฟสที่ 2 อาจถูกตัดทิ้งไปเลยในเฟสที่ 4
หวังจริง ๆ ว่า liquid jelly จะไม่กลายเป็นเทรนด์
- ไม่ว่าจะชอบหรือไม่ชอบ liquid glass การเปลี่ยนกระบวนทัศน์จาก “UI chrome เป็นสิ่งที่ห่อหุ้มคอนเทนต์ของแอป” ไปเป็น “UI วางทับอยู่บนคอนเทนต์” นั้นมองไปข้างหน้ามาก มันเข้ากับ AR ได้ดี และช่วยแยก UI ออกจากคอนเทนต์ตามขนาดหน้าจอที่หลากหลายได้ แม้การนำไปใช้ครั้งนี้จะมีทั้งข้อดีข้อเสีย แต่แนวทางนี้น่าจะถูกใช้แพร่หลายขึ้นต่อไป โมเดล UI แบบ overlay ก็ไม่จำเป็นต้องโปร่งใสเสมอไป จะเป็นแบบทึบแต่ดูเหมือนลอยอยู่ก็ได้
- คนรุ่นใหม่กำลังหลงใหลความงามแบบยุค Aero/Glass ในเชิง nostalgia และเพราะ Apple นำมาใช้ มันจึงมีโอกาสสูงที่จะกลายเป็นเทรนด์ ทั้งอุตสาหกรรมมีบรรยากาศแบบว่า Apple ทำอะไรก็ทำตามกันหมด
- ส่วนตัวผมแค่อยากให้เอาเอฟเฟกต์เด้ง/ดึ๋งออก มันสั่นและย้วยเกินไป จนจากที่ควรให้ความรู้สึกเหมือนกระจก กลับดูเหมือนก้อนเจลลี่ blob มากกว่า
- ผมก็หวังว่าเรื่องนี้จะไม่ฮิตเหมือนกัน แต่พูดตามตรง ผมคิดว่าถ้า Apple ทำ สุดท้ายทุกคนก็จะทำตาม
- มันกำลังฮิตอยู่แล้ว
มีคนบอกว่าต้องเปิด setting ชื่อ useSystemAppearance ใน WKPreferences แต่เพราะมันเป็น private เลยไม่ผ่านการอนุมัติบน App Store อยากรู้ว่าเรื่องนี้จริงไหม ผมไม่ค่อยเชี่ยวชาญ iOS development แต่จำได้ว่าเคยเห็นวิดีโอแกะโค้ดแอปที่ใช้ internal API หลายตัวเพื่อทำให้ widget บนหน้าจอโฮมเคลื่อนไหวได้
- ของแบบนั้นไม่ผ่านการตรวจของ App Store หรอก
- หมายถึงวิดีโอนี้ หรือเปล่า?
นี่เป็นเทรนด์ที่น่าเกลียดที่สุดตั้งแต่ยุคมุมโค้งกับ padding กว้าง ๆ แล้ว หวังว่าจะหายไปให้ไวที่สุด

addons 2025-09-17

เลิกพูดเหลวไหลแล้วไปดูแลความเข้ากันได้ของ Safari ให้ดีเถอะ