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

Una Kravets

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

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

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

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

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

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

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

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

@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 เพื่อใช้สไตล์ แล้วต้องนําคลาสออกในภายหลัง ประเภทการเปลี่ยนแบบมุมมองช่วยให้เบราว์เซอร์ล้างการเปลี่ยนแบบเก่าได้แทนที่จะต้องดำเนินการด้วยตนเองก่อนที่จะเริ่มต้นการเปลี่ยนใหม่ ทำให้คุณสามารถดำเนินการนี้ได้

คุณตั้งค่าประเภทภายในฟังก์ชัน 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>

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

• การโปรโมตไปยังเลเยอร์บนสุด เลเยอร์แยกต่างหากเหนือส่วนอื่นๆ ของหน้า คุณจึงไม่ต้องปรับแต่ง 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 รองรับการวางตำแหน่งจุดยึดแล้ว

เมื่อใช้การจัดตำแหน่งจุดยึด เบราว์เซอร์สามารถจัดการตรรกะเพื่อเชื่อมโยงองค์ประกอบที่วางตำแหน่งกับองค์ประกอบ Anchor อย่างน้อย 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 ผ่านรายการ

ตัวอย่างนี้ใช้ฟังก์ชันหมุดเพื่อตั้งค่าตำแหน่งหมุดโดยใช้พร็อพเพอร์ตี้ทางกายภาพของ 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 ของการ์ดเปลี่ยนแปลง

ตำแหน่งจุดยึดแบบไดนามิกด้วย 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);
}

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

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

หากต้องการใช้ฟีเจอร์พลิกอย่างง่ายดาย ให้ใช้ประโยชน์จากค่าคีย์เวิร์ดพลิกเหล่านี้และข้ามการเขียนคําจํากัดความ position-try ไปเลย ตอนนี้คุณก็มีองค์ประกอบ Anchor ที่ตอบสนองต่อตำแหน่งซึ่งทํางานได้อย่างสมบูรณ์โดยที่มี 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 นี้เป็นพิเศษ เพราะมีรูปแบบที่ชาญฉลาดสำหรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ คุณสามารถทำสิ่งนี้ได้และอีกมากมายด้วยการเลือกสไตไลซ์ที่กำลังจะเปิดตัว ทำให้เป็นส่วนเสริมที่จำเป็นเพิ่มเติมสำหรับแพลตฟอร์มเว็บ

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

การแก้ปัญหาการจัดรูปแบบที่เลือก (และองค์ประกอบทั้งหมดที่แสดงควบคู่กันไป) ไม่ใช่องค์ประกอบ 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 ซึ่งนำไปใช้กับการควบคุมแบบฟอร์ม เช่น อินพุตและพื้นที่ข้อความได้ ซึ่งจะช่วยให้ขนาดของอินพุตขยาย (หรือหด) ตามเนื้อหา 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;
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตัดข้อความ: ยอดคงเหลือ

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

การอัปเดตเลย์เอาต์แบบอักษรสำหรับฟีเจอร์ข้อความ 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 ที่สวยงามบน 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 ซึ่งทีมของเราได้แชร์ข่าวสารล่าสุดเกี่ยวกับเทคโนโลยีเว็บ ลองใช้ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน การเปลี่ยนมุมมอง การวางตำแหน่งจุดยึด หรือแม้แต่การเลือกที่มีสไตล์ แล้วบอกให้เราทราบว่าคุณคิดเห็นอย่างไร เราพร้อมรับฟังและพร้อมให้ความช่วยเหลือ