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

แพลตฟอร์มเว็บยังคงมีชีวิตชีวาด้วยนวัตกรรม โดยมีฟีเจอร์ 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() ที่มีค่าเริ่มต้นจะติดตามรูปภาพเมื่อเทียบกับแถบเลื่อน (ซึ่งในตัวอย่างนี้คือวิวพอร์ตด้วย)

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

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

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

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

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

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

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

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งานภาพเคลื่อนไหวแบบเลื่อน ทีมของเราได้เปิดตัวชุดวิดีโอใหม่บนช่อง 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 ไปยังบล็อกของคุณ.web.dev หรือไปยังโดเมนอื่น เช่น google.com

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

API ของ Popover

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

องค์ประกอบป๊อปอัปจะซ่อนด้วย 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 หรือการสลับ 2 ครั้งจะปิดป๊อปอัปและกลับมาโฟกัส
• การเชื่อมโยงคอมโพเนนต์เริ่มต้น : เบราว์เซอร์เชื่อมต่อป๊อปอัปกับทริกเกอร์นั้นอย่างมีความหมาย

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

"เราพยายามที่จะเลิกใช้โค้ดกว่า 1,000 บรรทัดโดยเปลี่ยนไปใช้ป๊อปอัป Popover ช่วยเราโดยขจัดความจำเป็นที่จะต้องต่อสู้กับตัวเลขดัชนี Z มายากล... การสร้างความสัมพันธ์ตามแผนผังการช่วยเหลือพิเศษที่ถูกต้องตามลักษณะการทำงานของปุ่มแบบประกาศ และลักษณะการทำงานของโฟกัสในตัวช่วยให้ระบบออกแบบของเรานำรูปแบบที่เหมาะสมไปใช้ได้ง่ายขึ้นอย่างมาก-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

Popover เป็นเพียงจุดเริ่มต้นของเรื่องราว การอัปเดตที่น่าตื่นเต้นมากคือการรองรับการกำหนดตำแหน่งแท็ก Anchor พร้อมใช้งานแล้วใน Chrome 125

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

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

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

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

หรือใช้ชื่อ 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 ซึ่งแสดงให้เห็นรูปแบบการขีดเส้นใต้ที่ตรึงอยู่กับรายการเมื่อคุณวางเมาส์เหนือหรือแตะ

ตัวอย่างนี้ใช้ฟังก์ชัน 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 จะวางองค์ประกอบที่ตําแหน่งไว้ที่ด้านล่าง

การสาธิต Anchor เวอร์ชันแบบง่ายของเวอร์ชันแรกจะมีลักษณะคล้ายกับ inset-area

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในขั้นตอนถัดไปของ 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>

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

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

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

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

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

<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(...);
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Pseudo-element สำหรับการตรวจสอบแบบฟอร์มของผู้ใช้*

field-sizing: content

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

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

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

<hr>ในสกุล<select>

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

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

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

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

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

ซ้อนกันโดยมีการมองไปข้างหน้า

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

สิ่งที่ฉันชอบเกี่ยวกับการซ้อน 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;
}

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

การอัปเดตเกี่ยวกับการพิมพ์อักษรต่างประเทศ

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

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

บทสรุป

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

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

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

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