มีอะไรใหม่ใน UI บนเว็บ

Bramus
Una Kravets

เผยแพร่: 1 กรกฎาคม 2026

ในงาน Google I/O 2026 เราได้แชร์ข้อมูลอัปเดตมากมายที่กำลังจะเปิดตัวในแพลตฟอร์ม Web UI ตั้งแต่การเคารพค่ากำหนดของผู้ใช้ไปจนถึงการใช้การโต้ตอบที่เป็นธรรมชาติ การแนะนำการนำทาง การลดความซับซ้อน และการปรับให้เข้ากับรูปแบบต่างๆ เว็บสมัยใหม่มีเครื่องมือที่ทรงพลังอย่างยิ่งสำหรับนักพัฒนาแอปในการสร้างประสบการณ์ของผู้ใช้คุณภาพสูงที่จับต้องได้

ต่อไปนี้คือสรุปฟีเจอร์ทั้งหมดที่กล่าวถึงในเซสชัน "มีอะไรใหม่ใน UI เว็บ" ซึ่งจัดโครงสร้างตามชุดหลักการ UX หลักของเรา

ส่วนที่ 1: เคารพค่ากำหนดของผู้ใช้

การปรับเปลี่ยนในแบบของคุณเป็นพื้นฐานของความสามารถในการใช้งานเว็บ Web API สมัยใหม่ช่วยให้ปรับตัวเลือกในระดับระบบของผู้ใช้ได้ง่ายขึ้นโดยอัตโนมัติ แม้ว่าแนวคิดเหล่านี้จะดูเหมือนเป็นพื้นฐานและเราได้พูดถึงแนวคิดเหล่านี้มาหลายปีแล้ว แต่จริงๆ แล้วมี API และรูปแบบใหม่ๆ อยู่ 2-3 รายการที่ช่วยให้การสร้างการปรับเปลี่ยนในแบบของคุณแบบไดนามิกนี้ง่ายขึ้น

1. contrast-color()

ฟังก์ชัน CSS contrast-color() จะรับสีอินพุตและส่งคืน black หรือ white โดยอัตโนมัติ ทั้งนี้ขึ้นอยู่กับสีที่มีคอนทราสต์สูงกว่าเมื่อเทียบกับสีอินพุตตามอัลกอริทึมคอนทราสต์ขั้นต่ำของ WCAG AA วิธีนี้ช่วยให้มั่นใจได้ว่าข้อความจะอ่านง่ายโดยไม่ต้องดูแลคู่สีข้อความกับพื้นหลังด้วยตนเอง

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

ดูข้อมูลเพิ่มเติมเกี่ยวกับ contrast-color()

2. light-dark()

ฟังก์ชัน CSS light-dark() ช่วยให้คุณระบุค่าที่แตกต่างกัน 2 ค่า (สีหรือรูปภาพ) สำหรับพร็อพเพอร์ตี้ได้ โดยค่าหนึ่งสำหรับโหมดสว่างและอีกค่าหนึ่งสำหรับโหมดมืดภายในประกาศเดียว เบราว์เซอร์จะเลือกสีที่มีคอนทราสต์ที่ถูกต้องโดยอัตโนมัติตามcolor-schemeที่ใช้งานอยู่ (ซึ่งต้องตั้งค่าเป็น light, dark หรือ light dark ใน :root หรือองค์ประกอบระดับบน)

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

สิ่งใหม่ใน light-dark() คือการที่ไม่ได้จำกัดอยู่แค่ค่าสีอีกต่อไป ตั้งแต่ Chrome 150 เป็นต้นไป ตอนนี้พร็อพเพอร์ตี้นี้ยังยอมรับค่ารูปภาพ 2 ค่าด้วย

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. ฟังก์ชันที่กำหนดเองของ CSS (@function)

กฎ @ @function ช่วยให้คุณกำหนดฟังก์ชันที่กำหนดเองและนำกลับมาใช้ใหม่ได้โดยตรงภายใน CSS ดั้งเดิม โดยสามารถรับพร็อพเพอร์ตี้ที่กำหนดเองซึ่งกำหนดขอบเขตไว้ในเครื่องเป็นอาร์กิวเมนต์ ทำการคำนวณ และแสดงผลค่าโดยใช้ตัวอธิบาย result ซึ่งช่วยลดความจำเป็นในการใช้ตัวประมวลผลล่วงหน้า

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

เมื่อใช้ร่วมกับการค้นหาสไตล์คอนเทนเนอร์และฟังก์ชัน if() CSS คุณจะสร้างฟังก์ชัน --light-dark() ที่กำหนดเองซึ่งใช้ได้กับค่าทุกประเภท ดังที่แสดงในเดโมนี้

4. การค้นหาสไตล์คอนเทนเนอร์

การค้นหาสไตล์ซึ่งเป็นส่วนหนึ่งของการค้นหาคอนเทนเนอร์ CSS ช่วยให้นักพัฒนาแอปใช้สไตล์กับองค์ประกอบสืบทอดได้โดยอิงตามค่าคุณสมบัติที่กำหนดเองที่คำนวณแล้วของคอนเทนเนอร์หลัก ซึ่งช่วยให้ใช้คอมโพเนนต์แบบไดนามิกได้โดยไม่ต้องระบุการล้อมองค์ประกอบขนาดอย่างชัดเจน

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

ในการสาธิตนี้ ระบบจะใช้การค้นหารูปแบบเพื่อตั้งค่าสีตาม--themeคุณสมบัติที่กำหนดเอง

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาสไตล์

5. ฟังก์ชัน if() ของ CSS

ฟังก์ชัน CSS if() จะนำตรรกะแบบมีเงื่อนไขในบรรทัดมาใช้กับค่าพร็อพเพอร์ตี้ CSS โดยตรง โดยจะประเมินชุดเงื่อนไขที่คั่นด้วยเครื่องหมายอัฒภาค (การค้นหาสไตล์, การค้นหาสื่อ หรือการค้นหาฟีเจอร์) และให้คุณตั้งค่าต่างๆ ที่เชื่อมโยงกับเงื่อนไขแรกที่เป็นจริง โดยมีelseการสำรองข้อมูลที่ไม่บังคับ

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

ในการสาธิตก่อนหน้านี้ มีการใช้ฟังก์ชัน if() เพื่อสร้างสีคอนทราสต์ที่มีธีมตามเอาต์พุตของฟังก์ชัน contrast-color()

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

ฟังก์ชัน at-rule() ของ CSS สำหรับใช้กับ @supports ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจหาฟีเจอร์ได้ว่าเบราว์เซอร์รู้จักกฎ @ ที่เฉพาะเจาะจงหรือไม่ เช่น @starting-style หรือ @view-transition

เช่น หากต้องการตรวจสอบว่า @function รองรับหรือไม่ ให้ใช้ดังนี้

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

การใช้ at-rule() จะอนุญาตให้ตรวจสอบการรองรับพื้นฐานของกฎที่ขึ้นต้นด้วย @ เท่านั้น และใช้เพื่อทดสอบตัวอธิบาย คำนำ หรือบล็อกกฎที่ขึ้นต้นด้วย @ แบบเต็มไม่ได้ มีวิธีแก้ปัญหาเฉพาะหน้าสำหรับตรวจหาฟีเจอร์ต่างๆ เช่น คำค้นหาที่ยึดตำแหน่งหรือคำค้นหาตามสไตล์

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @supports at-rule

7. <meta name="text-scale">

แท็กเมตา HTML text-scale จะเลือกให้หน้าเว็บมีขนาดแบบอักษรเริ่มต้นขององค์ประกอบรูท <html> ตามสัดส่วนของการตั้งค่าขนาดข้อความระดับระบบปฏิบัติการและเบราว์เซอร์ ซึ่งมีความสําคัญอย่างยิ่งสําหรับแพลตฟอร์มอุปกรณ์เคลื่อนที่

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

เมื่อใช้แล้ว ระบบปฏิบัติการจะเป็นตัวกำหนดขนาดแบบอักษรในองค์ประกอบ html คุณจึงไม่จำเป็นต้องตั้งค่า font-size ฐาน หากคุณใช้ความยาวที่มีหน่วยสัมพัทธ์ เช่น em และ rem ค่าพิกเซลที่คำนวณแล้วจะอิงตามขนาดแบบอักษรฐานนั้น

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

จากแท็บการแสดงผลในเครื่องมือสำหรับนักพัฒนาเว็บ คุณสามารถจำลองขนาดแบบอักษรที่ต้องการได้ ใช้เมนูแบบเลื่อนลงเพื่อเปลี่ยนค่า

ดูข้อมูลเพิ่มเติมเกี่ยวกับ <meta name=text-scale>

ส่วนที่ 2: ใช้การโต้ตอบที่เป็นธรรมชาติ

การเคลื่อนไหวทางกายภาพที่ใช้งานง่ายและท่าทางที่เป็นธรรมชาติเป็นกุญแจสำคัญในการทำให้ประสบการณ์บนเว็บรู้สึกเหมือนแอปพลิเคชันเนทีฟ และ CSS สมัยใหม่ช่วยให้คุณทำสิ่งนี้ได้ง่ายขึ้น

8. linear() ฟังก์ชันการค่อยๆ เปลี่ยน

ฟังก์ชันการลดความเร็ว linear() ช่วยให้คุณสร้างเส้นโค้งการเปลี่ยนภาพที่ซับซ้อนและกำหนดเอง (เช่น การดีด การสปริง หรือการยืดเกินแบบยืดหยุ่น) ได้โดยการประมาณค่าเชิงเส้นระหว่างจุดความคืบหน้าที่ระบุจำนวนไม่จำกัด

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

ในวิดีโอสาธิตต่อไปนี้ เราใช้ linear() เพื่อให้กล่องโต้ตอบมีการค่อยๆ เปลี่ยนที่ราบรื่นเมื่อแสดงหรือซ่อน

ดูข้อมูลเพิ่มเติมเกี่ยวกับ linear()

9. @starting-style

กฎ @ ของ CSS @starting-style จะกำหนดค่าเริ่มต้นสำหรับพร็อพเพอร์ตี้ในองค์ประกอบที่คุณต้องการเปลี่ยนจากเมื่อมีการแสดงผลองค์ประกอบใน DOM เป็นครั้งแรก หรือเมื่อ display เปลี่ยนจาก none เป็นค่าที่มองเห็นได้ เพื่อให้การเปลี่ยนผ่านตอนเริ่มต้นเป็นไปอย่างราบรื่น

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

ในการสาธิตก่อนหน้านี้ เราใช้เพื่อสร้างภาพเคลื่อนไหวเข้าของ <dialog> เมื่อมองเห็นเป็นครั้งแรก

10. transition-behavior: allow-discrete

พร็อพเพอร์ตี้ transition-behavior (มักใช้เป็น allow-discrete ในรูปแบบย่อ transition) ช่วยให้คุณเปลี่ยนพร็อพเพอร์ตี้ที่ไม่ต่อเนื่อง เช่น display หรือ overlay เพื่อให้มั่นใจว่าองค์ประกอบจะยังคงมองเห็นได้ในระหว่างภาพเคลื่อนไหวขาออกก่อนที่จะซ่อน

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() และ sibling-count()

ฟังก์ชัน CSS sibling-index() และ sibling-count() จะแสดงผลจำนวนเต็มที่แสดงตำแหน่งขององค์ประกอบโดยอิงตาม 1 ในกลุ่มองค์ประกอบที่อยู่ระดับเดียวกัน และจำนวนองค์ประกอบที่อยู่ระดับเดียวกันทั้งหมดตามลำดับ ซึ่งเหมาะอย่างยิ่งสำหรับการคำนวณการหน่วงเวลาของภาพเคลื่อนไหวแบบเหลื่อมกันแบบไดนามิกใน CSS โดยไม่ต้องใช้ JavaScript

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

ในเดโมนี้ เนื้อหาของกล่องโต้ตอบจะเหลื่อมกันโดยใช้ sibling-index() ใน animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. ปิดกล่องโต้ตอบ (แอตทริบิวต์ closedby)

แอตทริบิวต์ closedby ในองค์ประกอบ <dialog> (ที่มีค่า any) ช่วยให้คุณใช้ลักษณะการทำงานแบบประกาศ "ปิดอย่างรวดเร็ว" ซึ่งจะปิดกล่องโต้ตอบแบบโมดอลโดยอัตโนมัติเมื่อคลิกภายนอกกล่องหรือกด ESC โดยไม่ต้องใช้ JavaScript ที่กำหนดเอง

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

คุณลองใช้ได้ในเดโมก่อนหน้า

13. corner-shape

พร็อพเพอร์ตี้แบบย่อ corner-shape ในเวอร์ชันทดลองช่วยให้นักพัฒนาซอฟต์แวร์แก้ไขมุมโค้ง (จาก border-radius) เพื่อสร้างรูปร่างภาพที่กำหนดเอง เช่น bevel, scoop, notch หรือ squircle (ผ่าน superellipse()) ได้ เส้นขอบ เงา และเส้นขอบโฟกัสจะปรับให้เข้ากับรูปร่างโดยอัตโนมัติ

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

ส่วนที่ 3: จัดการนำทางแบบมีคำแนะนำ

การนำทางเส้นทางของผู้ใช้ช่วยรักษาบริบทและทําความเข้าใจโฟลว์ของแอปพลิเคชัน ซึ่งจะช่วยลดการโหลดซ้ำที่ทำให้สับสน คุณสามารถทำได้หลายวิธี รวมถึงการเปลี่ยนมุมมองซึ่งได้รับการอัปเดตล่าสุด

14. การเปลี่ยนมุมมองเอกสารเดียวกัน

การเปลี่ยนผ่านในเอกสารเดียวกันซึ่งเป็นส่วนหนึ่งของ View Transition API จะมีกลไกในการเคลื่อนไหวระหว่างสถานะ DOM ในแอปพลิเคชันหน้าเว็บเดียว (SPA) โดยการจับภาพสแนปชอตและเปลี่ยนผ่านโดยใช้ CSS

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองเอกสารเดียวกัน

15. การเปลี่ยนมุมมองระหว่างเอกสาร

ขยาย View Transition API ไปยังแอปพลิเคชันแบบหลายหน้า (MPA) ซึ่งช่วยให้คุณสร้างการเปลี่ยนภาพแบบเคลื่อนไหวที่ราบรื่นเมื่อไปยังส่วนต่างๆ ระหว่างเอกสารต่างๆ โดยการจับคู่องค์ประกอบที่มี view-transition-name เดียวกันในหน้าต่างๆ

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองข้ามเอกสาร

16. การเปลี่ยนภาพมุมมองที่กำหนดขอบเขตขององค์ประกอบ

การเปลี่ยนภาพมุมมองที่กำหนดขอบเขตขององค์ประกอบซึ่งเปิดตัวใน Chrome 147 ช่วยให้คุณเรียกใช้การเปลี่ยนภาพมุมมองได้เฉพาะใน DOM subtree ที่เฉพาะเจาะจง (โดยใช้ element.startViewTransition()) ในขณะที่ส่วนอื่นๆ ของหน้ายังคงใช้งานได้และโต้ตอบได้

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

เมื่อเริ่มการเปลี่ยนฉากมุมมองที่กำหนดขอบเขตองค์ประกอบ การเปลี่ยนฉากจะทำงานแยกกัน โดยจะสแกนเฉพาะซับทรีนั้นเพื่อหาองค์ประกอบที่มี view-transition-name และจะแทรกเพชรโด::view-transitionลงในรูทของขอบเขตเอง การแยกนี้เป็นไปได้เนื่องจากการใช้ view-transition-scope: all โดยอัตโนมัติ

ซึ่งจะช่วยให้การเปลี่ยนฉากของมุมมองหลายรายการทำงานพร้อมกันได้ รวมถึงการซ้อนการเปลี่ยนฉากของมุมมองด้วย ขณะที่ระบบสับเปลี่ยนรายการในลิสต์เหล่านี้ คุณก็สลับลิสต์เองได้เช่นกัน

นอกจากนี้ ระบบจะซ้อนกลุ่มย่อยเสมือนโดยอัตโนมัติ และจะตัดส่วนที่เกินของกลุ่มย่อยเสมือนที่ล้อมรอบเมื่อจำเป็น

การเปลี่ยนมุมมองที่กำหนดขอบเขตเหมาะอย่างยิ่งสำหรับการโต้ตอบขนาดเล็กและการเปลี่ยนรูปร่างแบบมีสถานะในหน้าเว็บ ซึ่งจะช่วยให้ผู้ใช้มีบริบทมากขึ้นเมื่อมีการเปลี่ยนแปลงภาพ ซึ่งเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงความสามารถในการใช้งานแอปพลิเคชันของคุณ พร้อมทั้งยกระดับรูปลักษณ์และความรู้สึกในการใช้งาน สิ่งเล็กๆ เหล่านี้สร้างความแตกต่างได้มาก

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองที่กำหนดขอบเขตขององค์ประกอบ

17. การเปลี่ยนฉาก 2 เฟส

ฟีเจอร์นี้เป็นฟีเจอร์ทดลองที่จะเริ่มการเปลี่ยนภาพมุมมองแบบข้ามเอกสารทันทีโดยไม่ต้องรอให้ DOM ใหม่พร้อม โดยจะเปลี่ยนภาพเป็นหน้าจอโครงร่างชั่วคราวหรือ UI การโหลดก่อน จากนั้นจึงดำเนินการเปลี่ยนภาพมุมมองแบบข้ามเอกสารต่อ

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองแบบ 2 เฟส

18. ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนจะลิงก์ความคืบหน้าของภาพเคลื่อนไหว CSS กับตำแหน่งการเลื่อนของคอนเทนเนอร์ที่เลื่อนได้โดยตรง ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์สร้างอินเทอร์เฟซที่อิงตามการเลื่อนได้ เช่น เอฟเฟกต์ภาพซ้อนที่ทำงานได้อย่างมีประสิทธิภาพและตัวบ่งชี้การเลื่อน

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. ภาพเคลื่อนไหวที่ทริกเกอร์เมื่อเลื่อน

ฟีเจอร์ใหม่ใน Chrome คือภาพเคลื่อนไหวที่ทริกเกอร์เมื่อเลื่อน ภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อนจะทริกเกอร์ภาพเคลื่อนไหว CSS มาตรฐานตามเวลาเมื่อข้ามขอบเขตการเลื่อน (ใช้ timeline-trigger เพื่อกำหนดทริกเกอร์และ animation-trigger เพื่อเล่น) ซึ่งเป็นทางเลือกแบบประกาศสำหรับ IntersectionObserver

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

กลไกพื้นฐานสำหรับภาพเคลื่อนไหวที่ทริกเกอร์โดยการเลื่อนคือทริกเกอร์ไทม์ไลน์ซึ่งอาจใช้งานอยู่หรือไม่ใช้งานอยู่

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

เปิดเครื่องมือแสดงภาพในเดโมต่อไปนี้เพื่อดูสิ่งที่เกิดขึ้น ช่วงแรกคือช่วงการเปิดใช้งานและกำหนดเวลาที่ทริกเกอร์จะทำงาน ช่วงที่ 2 คือช่วงที่ใช้งานอยู่ ซึ่งกำหนดระยะเวลาที่ควรใช้งาน

ดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการเลื่อน

20. scroll-target-group: auto

ตอนนี้คุณสามารถสร้าง Scroll-Spy ของ CSS แบบเนทีฟซึ่งจะไฮไลต์ลิงก์นำทางโดยอัตโนมัติตามตำแหน่งการเลื่อนของผู้ใช้ได้แล้ว การตั้งค่า scroll-target-group: auto ในรายการการนำทางจะทำให้เบราว์เซอร์ตั้งค่า aria-current="true" โดยอัตโนมัติและใช้เพสโด้คลาส :target-current กับลิงก์ที่ใช้งานอยู่ จากนั้นจะใช้ :target-current เพื่อจัดรูปแบบลิงก์ที่ใช้งานอยู่เพิ่มเติมได้

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS Scroll-Spy ด้วย scroll-target-group

21. ตัวเลือกคอนเทนเนอร์ scrollIntoView()

วิธีการ scrollIntoView() จะมีcontainer ตัวเลือก การตั้งค่า target.scrollIntoView({container: 'nearest'}) จะจำกัดการเลื่อนไว้ที่ตัวเลื่อนระดับบนสุดที่ใกล้ที่สุดแทนที่จะให้เลื่อนขึ้นไปจนสุด ซึ่งจะป้องกันการเลื่อนระดับหน้าเว็บที่ทำให้สับสน

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

ใช้ช่องทําเครื่องหมายในเดโมนี้เพื่อเปิดและปิดตัวเลือก

ดูข้อมูลเพิ่มเติมเกี่ยวกับ container: "nearest"

22. การเลื่อนแบบเป็นโปรแกรมที่รอได้

ตอนนี้วิธีการเลื่อนแบบเป็นโปรแกรมทั้งหมด (เช่น scroll(), scrollTo() และ scrollIntoView()) จะแสดงผล Promise ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์awaitการสิ้นสุดของภาพเคลื่อนไหวการเลื่อนอย่างราบรื่นก่อนที่จะเรียกใช้ตรรกะที่ตามมา (เช่น การเพิ่มเอฟเฟกต์ไฮไลต์)

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

ในวิดีโอเดโมต่อไปนี้ คุณจะเห็นการทำงานของฟีเจอร์นี้ โดยระบบจะเลื่อนองค์ประกอบให้ปรากฏในมุมมองก่อน จากนั้นจึงเพิ่มเอฟเฟกต์ไฮไลต์ลงในองค์ประกอบ

ส่วนที่ 4: เพิ่มเนื้อหา ลดสัญญาณรบกวน

ประสบการณ์การใช้งานเว็บที่น่าหงุดหงิดที่สุดอย่างหนึ่งคือการคาดหวังว่าจะได้เห็นเนื้อหา แต่กลับถูกบล็อกด้วยป๊อปอัปหรือแบนเนอร์ที่รบกวน จัดลำดับความสำคัญของพื้นที่เนื้อหาโดยกำจัดความรกของภาพและเส้นขอบของแอปพลิเคชัน ย้ายการดำเนินการรองไปไว้ด้านหลัง UI แบบเลเยอร์

23. การค้นหาตามสถานะการเลื่อน (scrolled)

scroll-state Queries ซึ่งเป็นส่วนหนึ่งของ Container Queries ของ CSS ช่วยให้คุณจัดรูปแบบองค์ประกอบย่อยตามสถานะการเลื่อนของคอนเทนเนอร์ (ที่มี container-type: scroll-state) ได้ ส่วน scrolled Query (เช่น scroll-state(scrolled: bottom)) จะตรวจหาทิศทางการเลื่อนที่สัมพันธ์กันล่าสุด ซึ่งช่วยให้ใช้รูปแบบต่างๆ เช่น "แถบเลื่อนที่ซ่อนอยู่" ได้

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบ "Hidey Bar"

24. การค้นหาคอนเทนเนอร์ที่ยึด

การวางตำแหน่งยึด CSS มีการค้นหาคอนเทนเนอร์ที่ยึด ซึ่งช่วยให้คุณตรวจสอบได้ว่าตำแหน่งสำรอง (เช่น fallback: bottom หรือ fallback: flip-block) ใดที่ใช้งานอยู่ในองค์ประกอบที่วางตำแหน่งยึดอยู่ในขณะนี้ ซึ่งจะช่วยให้สามารถอัปเดตแบบไดนามิกเพื่อจัดรูปแบบองค์ประกอบที่วางตำแหน่งยึด (เช่น ลูกศรของเคล็ดลับเครื่องมือ)

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

ในการสาธิตต่อไปนี้ ป๊อปโอเวอร์ที่วางตำแหน่งไว้ในจุดยึดจะเปลี่ยนตำแหน่งของตัวเองตามตำแหน่งสำรองและตำแหน่งในวิวพอร์ตโดยใช้การค้นหาคอนเทนเนอร์ที่ยึด เมื่อเคล็ดลับเครื่องมือเปิดขึ้นเหนือตัวเรียกใช้ เคล็ดลับเครื่องมือจะเคลื่อนไหวจากด้านล่างขึ้นด้านบนจากแหล่งที่มา เมื่ออยู่ใต้ตัวเรียกใช้ ระบบจะเคลื่อนไหวจากบนลงล่าง

25. CSS border-shape

พร็อพเพอร์ตี้ border-shape ช่วยให้คุณกำหนดเส้นขอบที่ไม่ใช่สี่เหลี่ยมได้โดยใช้ไวยากรณ์รูปร่างเดียวกันกับ clip-path border-shapeจะรักษาเส้นขอบ เส้นกรอบ และเงาให้สอดคล้องกับรูปร่างที่กำหนดเองในเชิงภาพ ซึ่งต่างจากการตัด นอกจากนี้ยังมีความสามารถที่เหนือกว่า corner-shape เนื่องจาก border-shape มีความยืดหยุ่นมากกว่า

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. ฟังก์ชัน shape() ของ CSS

ฟังก์ชัน shape() ของ CSS ช่วยให้คุณกำหนดเส้นทางเรขาคณิตที่ซับซ้อนใน CSS แบบอินไลน์ได้ โดยใช้ร่วมกับพร็อพเพอร์ตี้ เช่น clip-path, border-shape หรือ shape-outside เพื่อสร้างรูปร่างที่ไม่ใช่สี่เหลี่ยมผืนผ้าซึ่งเนื้อหาสามารถลอยอยู่ได้

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. การวางตำแหน่งแบบติดหนึบต่อแกน

การเปลี่ยนแปลงข้อกำหนดการล้นล่าสุดที่อนุญาตให้คอนเทนเนอร์เป็นตัวเลื่อนสำหรับแกนเดียวเท่านั้น ทำให้ตอนนี้การวางตำแหน่งแบบ Sticky สามารถติดตามคอนเทนเนอร์ที่เลื่อนได้ 2 รายการที่แตกต่างกัน (รายการละ 1 แกน) พร้อมกัน ซึ่งจะทำให้คอลัมน์แรกและแถวบนสุดแบบตรึงในตารางทำงานได้ตามที่คาดไว้แม้จะอยู่ในคอนเทนเนอร์เลื่อนแกนเดียวก็ตาม

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

ฟีเจอร์นี้พร้อมให้ทดสอบใน Chrome 148 โดยเปิดใช้ Flag ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง

ดูข้อมูลเพิ่มเติมเกี่ยวกับ position: sticky ต่อแกน

ส่วนที่ 5: ปรับให้เข้ากับรูปแบบของอุปกรณ์

สิ่งที่มีคุณค่ามากที่สุดอย่างหนึ่งเกี่ยวกับเว็บคือความยืดหยุ่น ผู้ใช้สามารถไปยังส่วนต่างๆ ของเว็บจากอุปกรณ์หลากหลายประเภท ซึ่งแต่ละอุปกรณ์ก็มีกลไกการโต้ตอบของตัวเอง เลย์เอาต์ควรปรับให้เข้ากับอุปกรณ์และวิธีการป้อนข้อมูล ไม่ว่าแป้นพิมพ์เสมือนจะเปิดอยู่หรือเป้าหมายการสัมผัสจะใช้งานได้ การคำนึงถึงรูปแบบของอุปกรณ์เมื่อออกแบบสำหรับเว็บจะช่วยให้เว็บไซต์หรือเว็บแอปของคุณมีความละเอียดอ่อนมากขึ้นและสอดคล้องกับความคาดหวังของผู้ใช้

28. ท่าทางสัมผัสการเลื่อนเกิน (พื้นที่ที่ปัดได้)

ตัวอย่างหนึ่งของการปรับให้เข้ากับรูปแบบของอุปกรณ์คือความสามารถในการใช้การโต้ตอบแบบปัดและท่าทางสัมผัสบนเว็บสำหรับอุปกรณ์เคลื่อนที่ คุณใช้แถบเลื่อนเพื่อให้ได้เอฟเฟกต์บางอย่างเหล่านี้ได้ แต่ก็ไม่ใช่แนวทางที่ใช้งานง่ายเสมอไป

ทีม Chrome กำลังพัฒนาโซลูชันแบบประกาศที่เสนอ โดยได้พูดคุยกับกลุ่มชุมชน OpenUI ซึ่งจะช่วยให้คุณสร้างพื้นที่ที่ปัดได้ซึ่งขับเคลื่อนด้วยท่าทางสัมผัสแบบเนทีฟ (เช่น รายการ Gmail ที่ปัดได้หรือเมนูด้านข้างที่ปัดเพื่อปิดได้) โดยใช้ overscrollcontainer และตัวเรียกใช้คำสั่ง ซึ่งจะทำงานผ่านการแตะและการเลื่อนได้อย่างเป็นธรรมชาติ

ดูข้อมูลเพิ่มเติมเกี่ยวกับท่าทางสัมผัสการเลื่อนเกิน

29 HTML ใน Canvas

HTML-in-Canvas API เป็นการเปลี่ยนกระบวนทัศน์ครั้งสำคัญที่ช่วยให้นักพัฒนาแอปวางองค์ประกอบ DOM จริงไว้ภายใน <canvas> (โดยใช้แอตทริบิวต์ layoutsubtree) ได้ องค์ประกอบเหล่านี้ยังคงค้นหาได้ เข้าถึงได้ และรองรับฟีเจอร์ของเบราว์เซอร์ เช่น การป้อนข้อความอัตโนมัติ ในขณะที่ช่วยให้ Shader ของ WebGL/WebGPU โต้ตอบกับองค์ประกอบเหล่านี้ได้โดยตรง

รอบตอบคำถามเร็ว

มาดูฟีเจอร์อื่นๆ ที่ทรงพลังซึ่งช่วยขับเคลื่อนเว็บไปข้างหน้ากัน

30. การย้ายที่รักษาสถานะ DOM (moveBefore())

เมธอด DOM ของ moveBefore() ช่วยให้คุณเปลี่ยนโหนด DOM หลัก (เช่น การเล่นวิดีโอ, iframe หรืออินพุตที่โฟกัส) ได้โดยไม่ต้องทำลายสถานะหรือทริกเกอร์การโหลดซ้ำ

ซึ่งหมายความว่าวิดีโอจะเล่นต่อไป, iframe จะไม่โหลดซ้ำ, ภาพเคลื่อนไหว CSS จะไม่รีสตาร์ท และช่องป้อนข้อมูลจะยังคงโฟกัสอยู่เมื่อคุณเปลี่ยนองค์ประกอบหลักในเลย์เอาต์

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

ดูข้อมูลเพิ่มเติมเกี่ยวกับ moveBefore()

31. CSS text-fit

text-fit เป็นพร็อพเพอร์ตี้ CSS เวอร์ชันทดลองที่ปรับขนาด font-size แบบไดนามิกเพื่อให้ข้อความพอดีกับความกว้างที่แน่นอนขององค์ประกอบที่บรรจุ (เช่น text-fit: grow per-line-all)

ดูข้อมูลเพิ่มเติมเกี่ยวกับ text-fit

32. CSS text-box (text-box-trim และ text-box-edge)

พร็อพเพอร์ตี้ text-box (และรูปแบบเต็ม text-box-trim และ text-box-edge) จะตัดพื้นที่แนวตั้ง (บรรทัด) เหนือและใต้ข้อความ เพื่อให้มั่นใจว่ามีการจัดแนวและจัดกึ่งกลางในแนวตั้งอย่างสมบูรณ์

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

ดูข้อมูลเพิ่มเติมเกี่ยวกับ text-trim

33. การตกแต่งช่องว่าง CSS

การตกแต่งช่องว่าง CSS ช่วยให้ column-rule มีลักษณะคล้ายตารางกริดและ Flexbox และยังเปิดตัวพร็อพเพอร์ตี้ row-rule ใหม่ที่ช่วยให้นักพัฒนาซอฟต์แวร์จัดรูปแบบร่องระหว่างแถวและคอลัมน์ได้ ไม่ต้องยุ่งกับเส้นขอบหรือองค์ประกอบเสมือนเพื่อจัดรูปแบบกฎระหว่างแถวและคอลัมน์อีกต่อไป

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS Gap Decorations

34. หน่วยวิวพอร์ตที่รับรู้แถบเลื่อน (vw, vh ฯลฯ)

หน่วยวิวพอร์ต เช่น vw และ vh จะลบขนาดของแถบเลื่อนโดยอัตโนมัติ (หากรับประกันว่ามองเห็นได้ โดยใช้ overflow-y: scroll หรือ scrollbar-gutter: stable ที่ประกาศใน :root) เพื่อป้องกันการล้นแนวนอนโดยไม่ตั้งใจเมื่อตั้งค่าองค์ประกอบเป็น 100vw

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

ดูข้อมูลเพิ่มเติมเกี่ยวกับหน่วย Viewport ที่รับรู้แถบเลื่อน

35. การเข้าถึงองค์ประกอบเสมือนด้วย JavaScript

ตอนนี้ Web API จะแสดงองค์ประกอบเสมือน CSS (เช่น ::before หรือ ::after) ให้กับ JavaScript แล้ว

คุณสามารถเรียกข้อมูลอินสแตนซ์ CSSPseudoElement ได้โดยใช้ Element.pseudo(type) และตรวจสอบว่าองค์ประกอบเสมือนใดที่ทริกเกอร์เหตุการณ์โดยใช้ Event.pseudoTarget

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSSPseudoElement

บทสรุป

สรุปมีอะไรใหม่ใน Web UI ก็มีเพียงเท่านี้ เราหวังว่าคุณจะใช้ฟีเจอร์เหล่านี้และสร้างอินเทอร์เฟซที่ยอดเยี่ยมด้วยฟีเจอร์เหล่านี้ แล้วพบกันใหม่ปีหน้า