แพลตฟอร์มเว็บยังคงมีชีวิตชีวาด้วยนวัตกรรม โดยมีฟีเจอร์ 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;
}
ดูคลาสการเปลี่ยน
คุณสามารถใช้ชื่อการเปลี่ยนมุมมองเพื่อนำภาพเคลื่อนไหวที่กำหนดเองไปใช้กับการเปลี่ยนมุมมองได้ แต่ก็อาจยุ่งยากกับการเปลี่ยนองค์ประกอบจำนวนมาก การอัปเดตใหม่ครั้งแรกเพื่อดูการเปลี่ยนผ่านในปีนี้ช่วยลดความซับซ้อนของปัญหานี้ และจะแนะนำความสามารถในการสร้างดูคลาสการเปลี่ยนที่ใช้กับภาพเคลื่อนไหวที่กำหนดเอง
การรองรับเบราว์เซอร์
- 125
- 125
- x
- x
ดูประเภทการเปลี่ยน
การปรับปรุงที่สําคัญอีกอย่างสําหรับการเปลี่ยนมุมมองคือการรองรับประเภทการเปลี่ยนมุมมอง ประเภทการเปลี่ยนมุมมองจะมีประโยชน์เมื่อคุณต้องการเปลี่ยนมุมมองในแบบอื่นเมื่อมีการเคลื่อนไหวไปและจากการดูหน้าเว็บ
ตัวอย่างเช่น คุณอาจต้องการให้หน้าแรกเคลื่อนไหวไปยังหน้าบล็อกโดยมีลักษณะที่ต่างจากหน้าบล็อกนั้นเคลื่อนไหวกลับไปที่หน้าแรก หรือคุณอาจต้องการให้หน้าเว็บสลับเข้าและออกในรูปแบบต่างๆ ดังเช่นในตัวอย่างนี้ โดยเริ่มจากซ้ายไปขวาและสลับกันไปมา ก่อนที่จะทำแบบนี้จะยุ่งเหยิง คุณสามารถเพิ่มคลาสใน 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 รายการในหีบเพลงเท่านั้น
การรองรับเบราว์เซอร์
- 120
- 120
- x
- 17.2
วิธีเปิดใช้ค่านี้คือการนำค่าชื่อเดียวกันไปใช้กับองค์ประกอบรายละเอียดหลายรายการ ซึ่งจะสร้างกลุ่มรายละเอียดที่เชื่อมต่อกัน ซึ่งคล้ายกับกลุ่มปุ่มตัวเลือก
<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
แต่จะจับคู่การควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสำคัญเท่านั้น ซึ่งหมายความว่าต้องใช้โค้ดน้อยลงอย่างมากในการพิจารณาว่าค่าในแบบฟอร์มมีการโต้ตอบกับค่าหรือไม่ หรือค่าเริ่ม "สกปรก" ซึ่งอาจเป็นประโยชน์อย่างมากในการแสดงความคิดเห็น รวมถึงช่วยลดการใช้สคริปต์ซึ่งจำเป็นต่อวิธีการนี้ในอดีต
การสาธิต Screencast
การสาธิตแบบสด
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
มีประโยชน์อย่างยิ่งสำหรับพื้นที่ข้อความเนื่องจากระบบจะไม่ปรับให้เป็นขนาดคงที่อีกต่อไปแล้ว คุณอาจต้องเลื่อนขึ้นเพื่อดูสิ่งที่เขียนไว้ในส่วนก่อนหน้าของพรอมต์ในช่องป้อนข้อมูลขนาดเล็กเกินไป
การรองรับเบราว์เซอร์
- 123
- 123
- x
- x
การสาธิต Screencast
การสาธิตแบบสด
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 ได้โดยไม่ต้องใช้เลย์เอาต์แบบยืดหยุ่นหรือแบบตารางกริด และโดยปราศจากผลข้างเคียง เช่น การป้องกันการยุบตัวของขอบ ซึ่งอาจไม่ต้องการจากอัลกอริทึมของเลย์เอาต์เหล่านั้น
การรองรับเบราว์เซอร์
- 123
- 123
- 125
- 17.4
ภาพหน้าจอ
การสาธิตแบบสด
div {
align-content: center;
}
ตัดข้อความ: สมดุลและสวยงาม
เมื่อพูดถึงเลย์เอาต์ เลย์เอาต์ข้อความก็ได้รับการปรับปรุงอย่างดีด้วยการเพิ่ม text-wrap: balance
และ pretty
text-wrap: balance
ใช้สำหรับบล็อกข้อความแบบเดียวกันมากขึ้น ส่วน text-wrap: pretty
จะเน้นที่การลดซิงเกิลตันในบรรทัดสุดท้ายของข้อความ
การสาธิต Screencast
การสาธิตแบบสด
h1 {
text-wrap: balance;
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตัดข้อความ: ยอดคงเหลือ
การอัปเดตเกี่ยวกับการพิมพ์อักษรต่างประเทศ
การอัปเดตเลย์เอาต์แบบตัวอักษรสำหรับฟีเจอร์ข้อความ CJK ได้รับการอัปเดตหลายอย่างที่น่าสนใจในปีที่ผ่านมา เช่น ฟีเจอร์ word-break: auto-phrase
ที่รวมบรรทัดตรงขอบเขตวลีทั่วไป
การรองรับเบราว์เซอร์
- 119
- 119
- x
- x
และ text-spacing-trim
ซึ่งนำการจัดช่องไฟระหว่างอักขระเครื่องหมายวรรคตอนเพื่อปรับปรุงการพิมพ์อักษรจีน ญี่ปุ่น และเกาหลี ให้อ่านง่ายขึ้นเพื่อให้ผลการค้นหาดูน่าสนใจยิ่งขึ้น
การรองรับเบราว์เซอร์
- 123
- 123
- x
- x
ไวยากรณ์สีแบบสัมพัทธ์
ในโลกแห่งธีมสี เราได้เห็นการอัปเดตครั้งใหญ่ที่มีไวยากรณ์สีแบบสัมพัทธ์
ในตัวอย่างนี้ สีในที่นี้ใช้ธีมแบบ Oklch เมื่อค่าโทนสีปรับเปลี่ยนตามแถบเลื่อน ธีมทั้งหมดจะเปลี่ยนแปลงไป ซึ่งทำได้ด้วยไวยากรณ์สีแบบสัมพัทธ์ พื้นหลังจะใช้สีหลักตามโทนสี รวมถึงปรับช่องความสว่าง ความโครมา และโทนสีเพื่อปรับค่า --i คือดัชนีข้างเคียงในรายการสำหรับการไล่ระดับของค่า ซึ่งแสดงวิธีที่คุณสามารถผสมขั้นกับคุณสมบัติที่กำหนดเองและไวยากรณ์สีสัมพัทธ์เพื่อสร้างธีม
การสาธิต Screencast
การสาธิตแบบสด
: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 โดยใช้การค้นหาคอนเทนเนอร์เพื่อจัดรูปแบบบล็อกส่วนหัวตามพื้นที่ว่างที่มีบนหน้าเว็บ ดังนั้นแม้ว่าเลย์เอาต์จะเปลี่ยนแปลงไปและเปลี่ยนจากเลย์เอาต์แถบด้านข้างหลายคอลัมน์ไปเป็นเลย์เอาต์แบบคอลัมน์เดียว แต่ส่วนหัวนี้ก็ปรับเปลี่ยนได้ด้วยตัวเอง
หากไม่มีการค้นหาคอนเทนเนอร์ การดำเนินการเช่นนี้ก็ทำได้ค่อนข้างยาก และส่งผลเสียต่อประสิทธิภาพ ทำให้ต้องมีผู้สังเกตการณ์การปรับขนาดและผู้สังเกตองค์ประกอบ การจัดรูปแบบองค์ประกอบตามขนาดระดับบนนั้นเป็นเรื่องที่ไม่สำคัญ
การสาธิต Screencast
การสาธิตแบบสด
@property
และสุดท้าย ในไม่ช้า เราตื่นเต้นที่จะได้เห็น @property อยู่ในเกณฑ์พื้นฐาน นี่เป็นฟีเจอร์หลักในการให้ความหมายทางความหมายแก่พร็อพเพอร์ตี้ที่กำหนดเองของ CSS (หรือที่เรียกว่าตัวแปร CSS) และเปิดใช้ฟีเจอร์การโต้ตอบใหม่จำนวนมาก @property
ยังเปิดใช้ความหมายตามบริบท การตรวจสอบการพิมพ์ ค่าเริ่มต้น และค่าสำรองใน CSS ด้วย เปิดประตูสู่ฟีเจอร์ที่มีประสิทธิภาพมากขึ้น เช่น การค้นหารูปแบบช่วง ฟีเจอร์นี้เป็นฟีเจอร์ที่ไม่เคยมีใครทำได้มาก่อน และตอนนี้นำเสนอภาษาที่เจาะลึกอย่างละเอียดให้กับ CSS แล้ว
การสาธิต Screencast
การสาธิตแบบสด
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: #c0bae8;
}
บทสรุป
ความสามารถใหม่ที่มีประสิทธิภาพของ UI เหล่านี้มีอยู่ในเบราว์เซอร์ต่างๆ ทำให้ความเป็นไปได้ไม่มีที่สิ้นสุด สร้างสรรค์ประสบการณ์แบบอินเทอร์แอกทีฟด้วยภาพเคลื่อนไหวแบบเลื่อนได้และการเปลี่ยนมุมมอง ทำให้เว็บมีความเคลื่อนไหวและลื่นไหลมากขึ้นในแบบที่เราไม่เคยเห็นมาก่อน นอกจากนี้คอมโพเนนต์ UI ที่ยกระดับขึ้นไปอีกขั้นยังสามารถสร้างคอมโพเนนต์ที่ปรับแต่งได้อย่างแข็งแกร่งและทนทานได้ง่ายขึ้น โดยไม่ต้องเสียเวลากับประสบการณ์การใช้งานแบบเดิมทั้งหมด และสุดท้าย การพัฒนาคุณภาพชีวิตด้านสถาปัตยกรรม เลย์เอาต์ การพิมพ์ และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ไม่เพียงแก้ปัญหาเล็กๆ น้อยๆ เท่านั้น แต่ยังให้เครื่องมือที่จำเป็นแก่นักพัฒนาซอฟต์แวร์ในการสร้างอินเทอร์เฟซที่ซับซ้อนซึ่งทำงานได้ในอุปกรณ์ รูปแบบ และความต้องการที่หลากหลาย
ฟีเจอร์ใหม่เหล่านี้จะช่วยให้คุณนำการเขียนสคริปต์ของบุคคลที่สามออกได้ สำหรับฟีเจอร์ที่เน้นประสิทธิภาพ เช่น การเลื่อนและการเชื่อมต่ออินเทอร์เน็ตผ่านมือถือโดยใช้การจัดตำแหน่งจุดยึด การสร้างการเปลี่ยนหน้าอย่างลื่นไหล และสุดท้ายคือการจัดรูปแบบเมนูแบบเลื่อนลง และปรับปรุงโครงสร้างโดยรวมของโค้ดอย่างตั้งแต่ต้น
เป็นเวลาที่เหมาะสมที่สุดในการเป็นนักพัฒนาเว็บ ไม่มีความตื่นเต้นและตื่นเต้นเลยนับตั้งแต่การประกาศใช้ CSS3 ฟีเจอร์ที่เราจำเป็นต้องใช้แต่ก็ฝันไว้ว่าจะได้เผยแพร่จริงๆ ในอดีต ในที่สุดก็กลายเป็นจริงและเป็นส่วนหนึ่งของแพลตฟอร์ม นั่นเป็นเพราะความคิดเห็นของคุณที่เราสามารถจัดลำดับความสำคัญและนำมาใช้ได้ในที่สุด เรากำลังพยายามทำให้การทำงานที่ยากและน่าเบื่อต่างๆ เป็นเรื่องง่ายขึ้น เพื่อให้คุณมีเวลามากขึ้นในการสร้างสิ่งที่มีความสำคัญ เช่น คุณลักษณะหลักและรายละเอียดการออกแบบที่ทำให้แบรนด์ของคุณโดดเด่น
ติดตามการเปิดตัวฟีเจอร์ใหม่เหล่านี้ได้ที่ developer.chrome.com และ web.dev ซึ่งทีมของเราได้แชร์ข่าวสารล่าสุดเกี่ยวกับเทคโนโลยีเว็บ ลองใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ดูการเปลี่ยนภาพ การวางตำแหน่งการยึดตำแหน่ง หรือแม้แต่การเลือกสไตไลซ์ แล้วบอกให้เราทราบว่าคุณคิดอย่างไร เราพร้อมรับฟังและพร้อมช่วยเหลือคุณ