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

Una Kravets

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

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

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

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

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

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

ตอนนี้คุณสามารถใช้ความคืบหน้าในการเลื่อนของตัวเลื่อนเพื่อเริ่ม หยุดชั่วคราว และย้อนกลับภาพเคลื่อนไหวได้แล้ว ซึ่งคล้ายกับวิธีที่ภาพเคลื่อนไหวตามเวลาทำงานบนแพลตฟอร์ม ดังนั้นขณะเลื่อนไปข้างหน้า คุณจะเห็นความคืบหน้าของภาพเคลื่อนไหว และเมื่อเลื่อนไปข้างหลัง ภาพเคลื่อนไหวก็จะย้อนกลับ ซึ่งช่วยให้คุณสร้างภาพทั้งหน้าหรือบางส่วนของหน้าเว็บได้โดยมีองค์ประกอบที่เคลื่อนไหวเข้าและอยู่ภายใน Viewport หรือที่เรียกว่า 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 ในตัวนี้ช่วยลดภาระด้านโค้ดที่คุณจะต้องดูแล ไม่ว่าจะเป็นสคริปต์ที่กำหนดเองที่คุณเขียนขึ้นหรือการรวมทรัพยากร Dependency ของบุคคลที่สามเพิ่มเติม นอกจากนี้ยังช่วยลดความจำเป็นในการจัดส่งเครื่องมือสังเกตการณ์การเลื่อนต่างๆ ซึ่งหมายถึงประโยชน์ด้านประสิทธิภาพที่สำคัญ เนื่องจากภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนจะทำงานในเธรดหลักเมื่อเคลื่อนไหวพร็อพเพอร์ตี้ที่เคลื่อนไหวใน Compositor ได้ เช่น การเปลี่ยนรูปแบบและความทึบ ไม่ว่าคุณจะใช้ API ใหม่ใน CSS โดยตรงหรือใช้ Hook ของ JavaScript

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

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

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

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

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

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

ปัจจุบันฟีเจอร์เหล่านี้อยู่ใน 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;
}

ดูชั้นเรียนการเปลี่ยนผ่าน

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

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

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

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

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

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

การเปลี่ยนมุมมองหลายหน้า

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

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

Popover API

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

องค์ประกอบป๊อปโอเวอร์จะซ่อนด้วย 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 ในเมนู "ใหม่" ของหน้าแรกและในภาพรวมการตรวจสอบคำขอ Pull Request โดยได้ปรับปรุงฟีเจอร์นี้อย่างต่อเนื่องโดยใช้ Popover Polyfill ซึ่งสร้างโดย Oddbird โดยได้รับการสนับสนุนอย่างมากจาก Keith Cirkel ของ GitHub เอง เพื่อรองรับเบราว์เซอร์รุ่นเก่า

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

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

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

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

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

@starting-style กฎในการสร้างภาพเคลื่อนไหวของเอฟเฟกต์รายการจาก display: none และเข้าสู่ top-layer

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

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

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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในขั้นตอนถัดไปสำหรับ 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>

นอกจากนี้ ยังมี Invoker ทั่วไปอีกรายการที่มุ่งเน้นอนาคต (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 นี้ให้มากยิ่งขึ้นในอนาคต

Stylable select

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

select {
  appearance: base-select;
}

นอกจาก appearance: base-select แล้ว ยังมีการอัปเดต HTML ใหม่ๆ อีกด้วย ซึ่งรวมถึงความสามารถในการใส่ตัวเลือกใน 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 และรูปภาพภายในตัวเลือก ดังนั้น Fallback จะคล้ายกับ UI การเลือกเริ่มต้นปัจจุบัน

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

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

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

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

field-sizing: content

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

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

ภาพหน้าจอ

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

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()ตัวเลือก :has() ที่เปิดตัวในเบราว์เซอร์ต่างๆ เมื่อเดือนธันวาคมปีที่แล้ว API นี้เป็นตัวเปลี่ยนเกมสำหรับการเขียนสไตล์เชิงตรรกะ

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

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

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

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

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

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

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

@property

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

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

บทสรุป

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

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

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

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