ข้อมูลล่าสุดของ CSS และ UI บนเว็บ: สรุป I/O 2024

Una Kravets

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

ประสบการณ์แบบอินเทอร์แอกทีฟแปลกใหม่

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

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน

ตามชื่อที่บอกไว้ API ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนช่วยให้คุณสร้างภาพเคลื่อนไหวแบบไดนามิกตามการเลื่อนได้โดยไม่ต้องอาศัยเครื่องมือตรวจสอบการเลื่อนหรือสคริปต์อื่นๆ ที่หนักหน่วง

สร้างภาพเคลื่อนไหวที่ทำงานตามการเลื่อน

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

โค้ดก่อนหน้าจะกำหนดภาพเคลื่อนไหวแบบง่ายที่ปรากฏในวิวพอร์ตโดยเปลี่ยนความทึบแสงและขนาดของรูปภาพ ภาพเคลื่อนไหวจะทำงานตามตำแหน่งการเลื่อน หากต้องการสร้างเอฟเฟกต์นี้ ให้ตั้งค่าภาพเคลื่อนไหว CSS ก่อน แล้วจึงตั้งค่า animation-timeline ในกรณีนี้ ฟังก์ชัน view() ที่มีค่าเริ่มต้นจะติดตามรูปภาพโดยสัมพันธ์กับ scrollport (ซึ่งในกรณีนี้ก็คือ viewport ด้วย)

อย่าลืมคำนึงถึงการสนับสนุนของเบราว์เซอร์และค่ากําหนดของผู้ใช้ โดยเฉพาะความต้องการด้านการช่วยเหลือพิเศษ ดังนั้น ให้ใช้กฎ @supports เพื่อตรวจสอบว่าเบราว์เซอร์รองรับภาพเคลื่อนไหวที่ทำงานตามการเลื่อนหรือไม่ และตัดภาพเคลื่อนไหวที่ทำงานตามการเลื่อนในการค้นหาค่ากำหนดของผู้ใช้ เช่น @media (prefers-reduced-motion: no-preference) เพื่อให้เป็นไปตามค่ากำหนดการเคลื่อนไหวของผู้ใช้ เมื่อทำการตรวจสอบเหล่านี้แล้ว คุณจะทราบว่าสไตล์ของคุณใช้งานได้ และภาพเคลื่อนไหวจะไม่ก่อให้เกิดปัญหาต่อผู้ใช้

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

การแสดงตัวอย่างนี้ใช้ภาพเคลื่อนไหวคีย์เฟรมที่แตกต่างกัน 2-3 แบบ ได้แก่ ส่วนหัว ข้อความ แถบนําทาง และพื้นหลัง จากนั้นนําภาพเคลื่อนไหวที่ทำงานตามการเลื่อนไปใช้กับแต่ละรายการ แม้ว่าแต่ละรายการจะมีสไตล์ภาพเคลื่อนไหวต่างกัน แต่รายการทั้งหมดมีไทม์ไลน์ภาพเคลื่อนไหว แถบเลื่อนที่อยู่ใกล้ที่สุด และช่วงภาพเคลื่อนไหวเดียวกัน ซึ่งอยู่ในช่วงจากด้านบนของหน้าไปจนถึง 150 พิกเซล

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

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

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

"เราลดจำนวนบรรทัดโค้ดได้สูงสุด 80% เมื่อเทียบกับการใช้เหตุการณ์การเลื่อน JS แบบดั้งเดิม และพบว่าการใช้งาน CPU เฉลี่ยลดลงจาก 50% เป็น 2% ขณะเลื่อน - Andy Wihalim วิศวกรซอฟต์แวร์อาวุโสของ Tokopedia"

อนาคตของเอฟเฟกต์การเลื่อน

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

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

นอกจากนี้ คุณยังใช้เหตุการณ์ scrollsnapchanging ของ JavaScript เพื่ออัปเดตเครื่องมือเลือกแบบเรียลไทม์ได้ด้วย

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

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งานภาพเคลื่อนไหวที่ทำงานตามการเลื่อน ทีมของเราเพิ่งเปิดตัวซีรีส์วิดีโอใหม่ในช่อง YouTube ของ Chrome สำหรับนักพัฒนาซอฟต์แวร์ ในส่วนนี้ คุณจะได้เรียนรู้พื้นฐานเกี่ยวกับภาพเคลื่อนไหวที่ทำงานตามการเลื่อนจาก Bramus Van Damme ซึ่งรวมถึงวิธีการทำงานของฟีเจอร์ ศัพท์เฉพาะ วิธีต่างๆ ในการสร้างเอฟเฟกต์ และวิธีรวมเอฟเฟกต์เพื่อสร้างประสบการณ์การใช้งานที่สมบูรณ์ ซีรีส์วิดีโอนี้ยอดเยี่ยมมาก

ดูการเปลี่ยน

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

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

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

วิธีเปิดใช้การเปลี่ยนมุมมองในแอปพลิเคชันหน้าเว็บเดียวอย่างรวดเร็วนั้นง่ายดายเพียงใช้ document.startViewTransition ปิดท้ายการโต้ตอบ และตรวจสอบว่าองค์ประกอบแต่ละรายการที่เปลี่ยนมี view-transition-name ในบรรทัดหรือใช้ JavaScript แบบไดนามิกขณะที่คุณสร้างโหนด DOM

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

ดูคลาสการเปลี่ยน

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

ดูประเภทการเปลี่ยน

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

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

คุณสามารถตั้งค่าประเภทภายในฟังก์ชัน document.startViewTransition ซึ่งตอนนี้ยอมรับออบเจ็กต์ได้แล้ว update คือฟังก์ชัน Callback ที่อัปเดต DOM และ types คืออาร์เรย์ที่มีประเภท

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

การเปลี่ยนการดูหน้าเว็บหลายหน้า

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

ชุดฟีเจอร์แบบข้ามเอกสารใหม่นี้รวมประสบการณ์การใช้งานเว็บที่อยู่ในต้นทางเดียวกัน เช่น การไปยังส่วนต่างๆ จาก web.dev ไปยัง web.dev/blog แต่จะไม่รวมการไปยังส่วนต่างๆ จากต้นทางที่แตกต่างกัน เช่น การไปยังส่วนต่างๆ จาก web.dev ไปยัง blog.web.dev หรือไปยังโดเมนอื่น เช่น google.com

ความแตกต่างที่สำคัญอย่างหนึ่งของการเปลี่ยนมุมมองในเอกสารเดียวกันคือคุณไม่จำเป็นต้องปิดการเปลี่ยนด้วย document.startViewTransition() แต่ให้เลือกเข้าร่วมทั้ง 2 หน้าที่เกี่ยวข้องกับการเปลี่ยนมุมมองโดยใช้กฎ @view-transition at ของ CSS

@view-transition {
  navigation: auto;
}

หากต้องการเอฟเฟกต์ที่กําหนดเองมากขึ้น คุณสามารถเชื่อมต่อกับ JavaScript โดยใช้โปรแกรมรับฟังเหตุการณ์ pageswap หรือ pagereveal ใหม่ ซึ่งจะช่วยให้คุณเข้าถึงออบเจ็กต์การเปลี่ยนเฟรมของมุมมองได้

pageswap ช่วยให้คุณทำการเปลี่ยนแปลงในนาทีสุดท้ายในหน้าเว็บที่กำลังจะหมดอายุได้ก่อนที่ระบบจะจับภาพหน้าจอเก่า และ pagereveal ช่วยให้คุณปรับแต่งหน้าเว็บใหม่ได้ก่อนที่หน้าเว็บจะเริ่มแสดงผลหลังจากได้รับการเริ่มต้น

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

ในอนาคตเราวางแผนที่จะขยายการให้บริการการเปลี่ยนมุมมอง ซึ่งรวมถึง

• การเปลี่ยนผ่านที่มีขอบเขต: ช่วยให้คุณจำกัดการเปลี่ยนผ่านไปยัง DOM ย่อยได้ ซึ่งจะทำให้ส่วนที่เหลือของหน้าเว็บโต้ตอบต่อไปได้ และรองรับการเปลี่ยนมุมมองหลายรายการที่ทำงานพร้อมกัน
• การเปลี่ยนมุมมองที่ทำงานด้วยท่าทางสัมผัส: ใช้ท่าทางสัมผัสการลากหรือปัดเพื่อทริกเกอร์การเปลี่ยนมุมมองข้ามเอกสารเพื่อให้ได้รับประสบการณ์การใช้งานที่เหมือนแอปเนทีฟมากขึ้นบนเว็บ
• การจับคู่การนําทางใน CSS: ปรับแต่งการเปลี่ยนมุมมองข้ามเอกสารใน CSS โดยตรงแทนการใช้เหตุการณ์ pageswap และ pagereveal ใน JavaScript ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองสําหรับแอปพลิเคชันหลายหน้า รวมถึงวิธีตั้งค่าให้มีประสิทธิภาพสูงสุดด้วยการแสดงผลล่วงหน้าได้ที่การบรรยายต่อไปนี้โดย Bramus Van Damme

คอมโพเนนต์ UI ที่เปิดใช้เครื่องมือ: ลดความซับซ้อนของการโต้ตอบ

การสร้างเว็บแอปพลิเคชันที่ซับซ้อนไม่ใช่เรื่องง่าย แต่ CSS และ HTML พัฒนาไปอย่างต่อเนื่องเพื่อให้กระบวนการนี้จัดการได้ง่ายขึ้น ฟีเจอร์และการปรับปรุงใหม่ช่วยลดความซับซ้อนในการสร้างคอมโพเนนต์ UI เพื่อให้คุณมุ่งเน้นที่การสร้างประสบการณ์ที่ยอดเยี่ยม ซึ่งดำเนินการผ่านความร่วมมือของหน่วยงานมาตรฐานและกลุ่มชุมชนที่สำคัญหลายกลุ่ม ซึ่งรวมถึงกลุ่มทำงาน CSS, กลุ่มชุมชน Open UI และ WHATWG (กลุ่มทำงานด้านเทคโนโลยีแอปพลิเคชันไฮเปอร์เท็กซ์บนเว็บ)

ปัญหาใหญ่อย่างหนึ่งของนักพัฒนาซอฟต์แวร์คือคําขอที่ดูเรียบง่าย นั่นคือความสามารถในการจัดรูปแบบเมนูแบบเลื่อนลง (องค์ประกอบ select) แม้ว่าจะดูเหมือนเป็นเรื่องง่าย แต่ปัญหานี้มีความซับซ้อน เนื่องจากเกี่ยวข้องกับแพลตฟอร์มหลายส่วน ตั้งแต่เลย์เอาต์และการแสดงผล ไปจนถึงการเลื่อนและการโต้ตอบ การจัดสไตล์ User Agent และพร็อพเพอร์ตี้ CSS ตลอดจนการเปลี่ยนแปลง HTML เอง

เมนูแบบเลื่อนลงประกอบด้วยหลายส่วนและมีหลายสถานะที่ต้องพิจารณา เช่น

• การเชื่อมโยงแป้นพิมพ์ (เพื่อเข้าสู่/ออกจากการโต้ตอบ)
• คลิกเพื่อปิด
• การจัดการป๊อปอัปที่ใช้งานอยู่ (ปิดป๊อปอัปอื่นๆ เมื่อป๊อปอัปหนึ่งเปิดขึ้น)
• การจัดการโฟกัสแท็บ
• การแสดงค่าตัวเลือกที่เลือกเป็นภาพ
• รูปแบบการโต้ตอบด้วยลูกศร
• การจัดการสถานะ (เปิด/ปิด)

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

Popover API

ก่อนอื่น เราได้เปิดตัวแอตทริบิวต์ส่วนกลางชื่อ popover ซึ่งเรายินดีที่จะประกาศว่าเพิ่งได้รับสถานะ "พร้อมใช้งานใหม่" ของ Baseline เมื่อไม่กี่สัปดาห์ที่ผ่านมา

องค์ประกอบป๊อปอัปจะซ่อนอยู่ด้วย display: none จนกว่าจะเปิดด้วยตัวเรียกใช้ เช่น ปุ่ม หรือด้วย JavaScript หากต้องการสร้างป๊อปอัปพื้นฐาน ให้ตั้งค่าแอตทริบิวต์ป๊อปอัปในองค์ประกอบ แล้วลิงก์รหัสของป๊อปอัปกับปุ่มโดยใช้ popovertarget ตอนนี้ปุ่มคือตัวเรียกใช้

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

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

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

คุณอาจกำลังใช้ popover API นี้อยู่โดยไม่รู้ตัว GitHub ใช้ป๊อปอัปในเมนู "ใหม่" ของหน้าแรกและในภาพรวมการตรวจสอบคำขอดึงข้อมูล พวกเขาได้ปรับปรุงฟีเจอร์นี้อย่างต่อเนื่องโดยใช้ popover polyfill ที่พัฒนาโดย Oddbird โดยได้รับการสนับสนุนที่สำคัญจาก Keith Cirkel ของ GitHub เพื่อรองรับเบราว์เซอร์รุ่นเก่า

"เราเลิกใช้งานโค้ดหลายพันบรรทัดด้วยการเปลี่ยนไปใช้ป๊อปอัป การใช้ป๊อปอัปช่วยให้เราไม่ต้องปวดหัวกับตัวเลข Z-Index ที่ไม่อาจคาดเดาได้... การมีความสัมพันธ์ของต้นไม้การช่วยเหลือพิเศษที่ถูกต้องซึ่งสร้างขึ้นจากลักษณะการทำงานของปุ่มแบบประกาศ และลักษณะการโฟกัสที่สร้างขึ้นในตัวช่วยให้ระบบการออกแบบของเราใช้งานรูปแบบต่างๆ ในลักษณะที่เหมาะสมได้ง่ายขึ้นอย่างมาก - Keith Cirkel วิศวกรซอฟต์แวร์จาก GitHub”

การทำภาพเคลื่อนไหวสำหรับเอฟเฟกต์การเข้าและออก

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

ความสามารถในการทำให้ display และ content-visibility เคลื่อนไหวในไทม์ไลน์คีย์เฟรม

พร็อพเพอร์ตี้ transition-behavior ที่มีคีย์เวิร์ด allow-discrete เพื่อเปิดใช้การเปลี่ยนพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง เช่น display

กฎ @starting-style สำหรับสร้างเอฟเฟกต์ของรายการที่เข้ามาจาก display: none ไปยังเลเยอร์บนสุด

พร็อพเพอร์ตี้การวางซ้อนเพื่อควบคุมลักษณะการทํางานของเลเยอร์บนสุดระหว่างภาพเคลื่อนไหว

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

ก่อนอื่น ให้ตั้งค่า @starting-style เพื่อให้เบราว์เซอร์ทราบว่าจะใช้สไตล์ใดในการทำให้องค์ประกอบนี้เคลื่อนไหวใน DOM ซึ่งทำได้ทั้งกับบทสนทนาและฉากหลัง จากนั้นจัดสไตล์สถานะเปิดสำหรับทั้งกล่องโต้ตอบและพื้นหลัง สำหรับกล่องโต้ตอบ จะใช้แอตทริบิวต์ open และสำหรับป๊อปอัปจะใช้องค์ประกอบจำลอง ::popover-open สุดท้าย ให้สร้างภาพเคลื่อนไหวของ opacity, display และ overlay โดยใช้คีย์เวิร์ด allow-discrete เพื่อเปิดใช้โหมดภาพเคลื่อนไหวที่พร็อพเพอร์ตี้แบบไม่ต่อเนื่องจะเปลี่ยนได้

ตำแหน่งโฆษณา Anchor

ฟีเจอร์ป๊อปอัปเป็นเพียงจุดเริ่มต้นเท่านั้น อัปเดตที่น่าตื่นเต้นมากคือตอนนี้ Chrome 125 รองรับการวางตำแหน่งจุดยึดแล้ว

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

ตั้งค่าความสัมพันธ์ของตำแหน่งองค์ประกอบที่ยึดใน CSS โดยใช้พร็อพเพอร์ตี้ anchor-name ในองค์ประกอบที่ยึด (ในกรณีนี้คือปุ่ม) และพร็อพเพอร์ตี้ position-anchor ในองค์ประกอบที่มีตำแหน่ง (ในกรณีนี้คือเคล็ดลับเครื่องมือ) จากนั้นใช้การวางตำแหน่งแบบสัมบูรณ์หรือแบบคงที่ซึ่งสัมพันธ์กับจุดยึดโดยใช้ฟังก์ชัน anchor() โค้ดต่อไปนี้จะวางตำแหน่งด้านบนของเคล็ดลับเครื่องมือไว้ที่ด้านล่างของปุ่ม

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

หรือจะใช้ชื่อหมุดในฟังก์ชันหมุดโดยตรงและข้ามพร็อพเพอร์ตี้ position-anchor ก็ได้ ซึ่งจะมีประโยชน์เมื่อยึดกับองค์ประกอบหลายรายการ

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

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

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

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

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area การวางตำแหน่ง

นอกจากการวางตำแหน่งแบบสัมบูรณ์ตามทิศทางเริ่มต้นที่คุณอาจเคยใช้แล้ว ยังมีกลไกการจัดวางใหม่รวมอยู่ด้วย ซึ่งเป็นส่วนหนึ่งของ API การวางตำแหน่งจุดยึดที่เรียกว่าพื้นที่ส่วนเกิน พื้นที่แทรกช่วยให้วางองค์ประกอบที่วางตำแหน่งไว้ตามจุดยึดที่เกี่ยวข้องได้ง่าย และทำงานบนตารางกริด 9 เซลล์โดยมีองค์ประกอบการยึดอยู่ตรงกลาง เช่น inset-area: top จะวางองค์ประกอบที่มีตำแหน่งไว้ที่ด้านบน และ inset-area: bottom จะวางองค์ประกอบที่มีตำแหน่งไว้ที่ด้านล่าง

เวอร์ชันที่เรียบง่ายของตัวอย่างหมุดแรกจะมีลักษณะดังนี้ โดยมี inset-area

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

เนื่องจากองค์ประกอบเหล่านี้มีการยึด องค์ประกอบที่จัดตำแหน่งไว้จะเคลื่อนไหวไปรอบๆ หน้าเว็บแบบไดนามิกเมื่อองค์ประกอบหลักเคลื่อนไหว ในกรณีนี้ เรามีองค์ประกอบการ์ดสไตล์คอนเทนเนอร์คิวรี ซึ่งปรับขนาดตามขนาดโดยประมาณ (คุณทำไม่ได้กับ Media Query) และเมนูที่ยึดตำแหน่งจะเลื่อนไปตามเลย์เอาต์ใหม่เมื่อ UI ของการ์ดเปลี่ยนแปลง

ตำแหน่งโฆษณา Anchor แบบไดนามิกที่มี position-try-options

การสร้างเมนูและการนำทางเมนูย่อยนั้นง่ายขึ้นมากเมื่อใช้ป๊อปอัปและการวางตำแหน่งจุดยึดร่วมกัน และเมื่อองค์ประกอบที่ยึดตำแหน่งถึงขอบของวิวพอร์ต คุณสามารถให้เบราว์เซอร์จัดการการเปลี่ยนแปลงตำแหน่งให้คุณได้ด้วย ซึ่งทำได้หลายวิธี ขั้นแรกคือสร้างกฎการจัดตําแหน่งของคุณเอง ในกรณีนี้ ตอนแรกเมนูย่อยจะอยู่ที่ด้านขวาของปุ่ม "หน้าร้าน" แต่คุณสร้างบล็อก @position-try ได้ในกรณีที่มีพื้นที่ไม่เพียงพอทางด้านขวาของเมนู โดยให้ตัวระบุที่กำหนดเองเป็น --bottom จากนั้นเชื่อมต่อบล็อก @position-try นี้กับจุดยึดโดยใช้ position-try-options

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

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

นอกจากตรรกะการวางตำแหน่งที่ชัดเจนแล้ว เบราว์เซอร์ยังมีคีย์เวิร์ด 2-3 คําให้ใช้งานหากคุณต้องการการโต้ตอบพื้นฐาน เช่น การพลิกส่วนยึดในทิศทางของบล็อกหรือในบรรทัด

position-try-options: flip-block, flip-inline;

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ตำแหน่งโฆษณา Anchor

อนาคตของ UI แบบเลเยอร์

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

ขั้นตอนถัดไปสำหรับ popover API คือเรากําลังพัฒนา interesttarget เพื่อตอบสนองความต้องการเหล่านี้และทําให้สร้างประสบการณ์เหล่านี้อีกครั้งได้ง่ายขึ้นด้วยฮุกการช่วยเหลือพิเศษที่เหมาะสมซึ่งติดตั้งมาในตัว นี่เป็นปัญหาการช่วยเหลือพิเศษที่แก้ได้ยากและมีคำถามที่ยังไม่ได้รับการตอบมากมายเกี่ยวกับลักษณะการทำงานที่เหมาะสม แต่การแก้ปัญหาและทำให้ฟังก์ชันการทำงานนี้เป็นไปตามมาตรฐานที่ระดับแพลตฟอร์มควรจะช่วยปรับปรุงประสบการณ์การใช้งานเหล่านี้สำหรับทุกคน

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

นอกจากนี้ ยังมีตัวเรียกทั่วไป (invoketarget) อีกตัวหนึ่งสำหรับอนาคตที่พร้อมให้ทดสอบใน Canary ซึ่งมาจากการทำงานของนักพัฒนาซอฟต์แวร์บุคคลที่สาม 2 คน ได้แก่ Keith Cirkel และ Luke Warlow invoketarget รองรับประสบการณ์การใช้งานแบบประกาศสำหรับนักพัฒนาซอฟต์แวร์ ซึ่ง popovertarget มีป๊อปอัปที่ปรับให้เป็นมาตรฐานสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟทั้งหมด ซึ่งรวมถึง <dialog>, <details>, <video>, <input type="file"> และอื่นๆ

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

ตัวเลือกที่มีสไตล์

การใช้ popover และ anchor ร่วมกันช่วยให้ทีมของเรามีความคืบหน้าในการเปิดใช้เมนูแบบเลื่อนลงแบบกำหนดเองได้ในที่สุด ข่าวดีคือเรามีความคืบหน้าอย่างมาก ข่าวร้ายคือ API นี้ยังอยู่ในขั้นทดลองอย่างมากในขณะนี้ อย่างไรก็ตาม เรายินดีที่จะแชร์การสาธิตเวอร์ชันที่ใช้จริงและการอัปเดตความคืบหน้า และหวังว่าจะได้รับความคิดเห็นจากคุณ ประการแรก เราได้ดำเนินการเกี่ยวกับวิธีเลือกให้ผู้ใช้ได้รับประสบการณ์การเลือกแบบใหม่ที่กำหนดค่าได้ วิธีปัจจุบันที่อยู่ระหว่างดำเนินการคือการใช้พร็อพเพอร์ตี้ลักษณะที่ปรากฏใน CSS ซึ่งตั้งค่าเป็น appearance: base-select เมื่อตั้งค่าลักษณะที่ปรากฏแล้ว คุณจะเลือกใช้ประสบการณ์การเลือกแบบใหม่ที่กำหนดเองได้

select {
  appearance: base-select;
}

นอกจาก appearance: base-select แล้ว ยังมีอัปเดต HTML ใหม่อีก 2-3 รายการ ซึ่งรวมถึงความสามารถในการตัดตัวเลือกใน datalist สำหรับการปรับเปลี่ยนและความสามารถในการเพิ่มเนื้อหาแบบไม่อินเทอร์แอกทีฟตามต้องการ เช่น รูปภาพในตัวเลือก นอกจากนี้ คุณยังมีสิทธิ์เข้าถึงองค์ประกอบใหม่อย่าง <selectedoption> ซึ่งจะแสดงเนื้อหาของตัวเลือกในองค์ประกอบนั้นเอง จากนั้นคุณก็สามารถปรับแต่งตามความต้องการได้ องค์ประกอบนี้มีประโยชน์มาก

ภาพตัวอย่าง

การสาธิตการใช้งานแบบสด

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

โค้ดต่อไปนี้แสดงการปรับแต่ง <selectedoption> ใน UI ของ Gmail โดยไอคอนภาพจะแสดงประเภทการตอบกลับที่เลือกเพื่อประหยัดพื้นที่ คุณใช้สไตล์การแสดงผลพื้นฐานภายใน selectedoption เพื่อแยกความแตกต่างระหว่างการจัดรูปแบบตัวเลือกกับการจัดรูปแบบตัวอย่างได้ ในกรณีนี้ ข้อความที่แสดงในตัวเลือกจะซ่อนอยู่จากสายตาใน selectedoption

ภาพตัวอย่าง

การสาธิตการใช้งานแบบสด

selectedoption .text {
  display: none;
}

ข้อดีอย่างหนึ่งที่สำคัญที่สุดของการใช้องค์ประกอบ <select> ซ้ำสำหรับ API นี้คือการรองรับการทำงานแบบย้อนหลัง ในการคัดเลือกประเทศนี้ คุณจะเห็น UI ที่ปรับแต่งเองพร้อมรูปธงในตัวเลือกต่างๆ เพื่อให้ผู้ใช้แยกวิเคราะห์เนื้อหาได้ง่ายขึ้น เนื่องจากเบราว์เซอร์ที่ไม่รองรับจะไม่สนใจบรรทัดที่ไม่เข้าใจ เช่น ปุ่มที่กําหนดเอง, datalist, selectedoption และรูปภาพภายในตัวเลือก ตัวเลือกสำรองจึงจะคล้ายกับ UI การเลือกเริ่มต้นปัจจุบัน

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

แอคคอร์เดียนสุดพิเศษ

การปรับแต่งสไตล์บางอย่าง (และชิ้นส่วนทั้งหมดที่มาพร้อมกับการปรับแต่ง) ไม่ใช่องค์ประกอบ UI เพียงอย่างเดียวที่ทีม Chrome ให้ความสำคัญ การอัปเดตคอมโพเนนต์เพิ่มเติมรายการแรกคือความสามารถในการสร้าง Accordion แบบพิเศษ ซึ่งจะเปิดได้ทีละรายการเท่านั้น

วิธีเปิดใช้คือใช้ค่าชื่อเดียวกันกับองค์ประกอบรายละเอียดหลายรายการ ซึ่งจะสร้างกลุ่มรายละเอียดที่เชื่อมต่อกัน คล้ายกับกลุ่มปุ่มตัวเลือก

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid และ :user-invalid

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

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้องค์ประกอบจำลองที่ใช้ตรวจสอบแบบฟอร์ม user-*

field-sizing: content

คอมโพเนนต์ที่อัปเดตซึ่งมีประโยชน์อีกอย่างหนึ่งที่เพิ่งเปิดตัวเมื่อเร็วๆ นี้คือ field-sizing: content ซึ่งสามารถใช้กับตัวควบคุมแบบฟอร์ม เช่น input และ textarea ซึ่งจะช่วยให้ขนาดของอินพุตขยาย (หรือหด) ตามเนื้อหา field-sizing: content มีประโยชน์อย่างยิ่งสำหรับ textarea เนื่องจากคุณไม่ต้องแก้ไขขนาดที่ตายตัวอีกต่อไป ซึ่งอาจทำให้ต้องเลื่อนขึ้นเพื่อดูสิ่งที่เขียนไว้ในส่วนก่อนหน้าของพรอมต์ในกล่องอินพุตที่เล็กเกินไป

textarea, select, input {
  field-sizing: content;
}

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

<hr> ใน <select>

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

เลือกภาพหน้าจอ

เลือก "การสาธิตการใช้งานแบบสด"

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ hr ใน select

การปรับปรุงคุณภาพชีวิต

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

การฝังด้วยฟีเจอร์มองไปข้างหน้า

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

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

การจัดแนวเนื้อหาสำหรับเลย์เอาต์บล็อก

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

ภาพหน้าจอ

การสาธิตการใช้งานแบบสด

div {
  align-content: center;
}

การแบ่งบรรทัดข้อความ: สมดุลและสวยงาม

พูดถึงเลย์เอาต์ เลย์เอาต์ข้อความได้รับการปรับปรุงให้ดียิ่งขึ้นด้วยการเพิ่ม text-wrap: balance และ pretty text-wrap: balance ใช้สำหรับบล็อกข้อความที่สม่ำเสมอมากขึ้น ส่วน text-wrap: pretty จะมุ่งเน้นที่การลดคำเดี่ยวในบรรทัดสุดท้ายของข้อความ

h1 {
  text-wrap: balance;
}

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

การอัปเดตแบบอักษรสากล

การอัปเดตเลย์เอาต์แบบอักษรสำหรับฟีเจอร์ข้อความ CJK ได้รับการอัปเดตดีๆ มากมายในช่วงปีที่ผ่านมา เช่น ฟีเจอร์ word-break: auto-phrase ที่ตัดบรรทัดตรงขอบของวลีอย่างเป็นธรรมชาติ

และ text-spacing-trim ซึ่งจะใช้การแยกระยะห่างระหว่างอักขระเครื่องหมายวรรคตอนเพื่อปรับปรุงความอ่านง่ายของแบบอักษรจีน ญี่ปุ่น และเกาหลีเพื่อให้ได้ผลลัพธ์ที่อ่านง่ายยิ่งขึ้น

ไวยากรณ์สีสัมพัทธ์

ในโลกของธีมสี เราได้เห็นการอัปเดตครั้งใหญ่ด้วยไวยากรณ์สีแบบสัมพัทธ์

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

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

ฟังก์ชัน light-dark()

การใช้ธีมมีความยืดหยุ่นและง่ายขึ้นมากเมื่อใช้ร่วมกับฟังก์ชัน light-dark()

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

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

หากผู้ใช้เลือกธีมสว่าง ปุ่มจะมีพื้นหลังสีฟ้าอ่อน หากผู้ใช้เลือกธีมมืด ปุ่มจะมีพื้นหลังสีน้ำเงินเข้ม

ตัวเลือก :has()

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

ตัวเลือก :has() ช่วยให้คุณตรวจสอบได้ว่าองค์ประกอบย่อยมีองค์ประกอบย่อยที่เฉพาะเจาะจงหรือไม่ หรือองค์ประกอบย่อยเหล่านั้นอยู่ในสถานะที่เฉพาะเจาะจงหรือไม่ และที่สำคัญยังทําหน้าที่เป็นตัวเลือกหลักได้ด้วย

:has() มีประโยชน์อย่างยิ่งสำหรับบริษัทหลายแห่ง รวมถึง PolicyBazaar ที่ใช้ :has() เพื่อจัดรูปแบบบล็อกตามเนื้อหาภายใน เช่น ในส่วนการเปรียบเทียบ ระบบจะปรับรูปแบบหากมีแผนที่จะเปรียบเทียบในบล็อก หรือหากบล็อกว่างเปล่า

"ตัวเลือก :has() ช่วยให้เรากำจัดการตรวจสอบการเลือกของผู้ใช้ที่อิงตาม JavaScript และแทนที่ด้วยโซลูชัน CSS ที่ทำงานได้อย่างราบรื่นและมอบประสบการณ์การใช้งานแบบเดิม – Aman Soni หัวหน้าทีมเทคโนโลยีของ PolicyBazaar"

การค้นหาคอนเทนเนอร์

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

เมื่อเร็วๆ นี้ Angular ได้เปิดตัวเว็บไซต์เอกสารประกอบใหม่ที่สวยหรูใน angular.dev โดยใช้การค้นหาคอนเทนเนอร์เพื่อจัดสไตล์บล็อกส่วนหัวตามพื้นที่ว่างในหน้า ดังนั้นแม้ว่าเลย์เอาต์จะเปลี่ยนไปจากเลย์เอาต์แถบด้านข้างแบบหลายคอลัมน์เป็นเลย์เอาต์แบบคอลัมน์เดียว บล็อกส่วนหัวก็จะปรับตัวเองได้

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

@property

และสุดท้าย เรายินดีที่จะได้เห็น @property ปรากฏใน Baseline ในเร็วๆ นี้ นี่เป็นฟีเจอร์สําคัญในการระบุความหมายเชิงอรรถศาสตร์ให้กับพร็อพเพอร์ตี้ที่กําหนดเองของ CSS (หรือที่เรียกว่าตัวแปร CSS) และเปิดใช้ฟีเจอร์การโต้ตอบใหม่ๆ มากมาย @property ยังเปิดใช้ความหมายตามบริบท การตรวจสอบประเภท ค่าเริ่มต้น และค่าสำรองใน CSS ด้วย ซึ่งเปิดโอกาสให้ใช้ฟีเจอร์ที่มีประสิทธิภาพมากขึ้น เช่น การค้นหารูปแบบช่วง นี่เป็นฟีเจอร์ที่ไม่เคยมีมาก่อน และตอนนี้ภาษา CSS มีความลึกซึ้งมากขึ้น

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

บทสรุป

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

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

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

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