มีอะไรใหม่ใน CSS และ UI: รุ่น I/O 2023

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

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

• การค้นหาคอนเทนเนอร์
• การค้นหารูปแบบ
• ตัวเลือก :has()
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• หน่วยวิวพอร์ตแบบไดนามิก
• พื้นที่สีแบบขอบเขตกว้าง
• color-mix()
• การซ้อน
• เลเยอร์ Cascade
• รูปแบบที่กำหนดขอบเขต
• ฟังก์ชันตรีโกณมิติ
• พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ
• ป๊อปอัป
• การวางตำแหน่งแท็ก Anchor
• เมนูเลือก
• การเปลี่ยนพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง
• ภาพเคลื่อนไหวที่ใช้การเลื่อน
• ดูการเปลี่ยน

ฟีเจอร์ปรับเปลี่ยนตามพื้นที่โฆษณาใหม่

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

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับคำค้นหาคอนเทนเนอร์และการสร้างคอมโพเนนต์เชิงตรรกะในโพสต์นี้

การค้นหารูปแบบ

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

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

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

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

ดูข้อมูลเพิ่มเติมและดูการสาธิตเพิ่มเติมได้ในบล็อกโพสต์เกี่ยวกับการค้นหาสไตล์

:has()

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

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

แต่ API นี้ไม่ได้จำกัดเฉพาะตัวเลือกของผู้ปกครอง นอกจากนี้ คุณยังจัดรูปแบบเด็กภายในหน่วยโฆษณาหลักได้อีกด้วย เช่น ชื่อจะเป็นตัวหนาเมื่อสินค้ามีองค์ประกอบดาว ซึ่งดำเนินการได้ด้วย .item:has(.star) .title การใช้ตัวเลือก :has() ช่วยให้คุณเข้าถึงองค์ประกอบระดับบนสุด องค์ประกอบย่อย และแม้กระทั่งองค์ประกอบระดับข้างเคียง ทำให้เป็น API ที่ยืดหยุ่นมาก โดยมีกรณีการใช้งานใหม่ๆ เพิ่มขึ้นทุกวัน

ดูข้อมูลเพิ่มเติมและสำรวจการสาธิตเพิ่มเติม ดูบล็อกโพสต์นี้เกี่ยวกับ :has()

ไวยากรณ์ที่ n

ปัจจุบันแพลตฟอร์มเว็บมีการเลือกกลุ่มย่อยที่ n ขั้นสูงขึ้น ไวยากรณ์ลูกที่ n ขั้นสูงจะให้คีย์เวิร์ดใหม่ ("of") ซึ่งช่วยให้คุณใช้ไวยากรณ์แบบไมโครที่มีอยู่ของ An+B พร้อมกับชุดย่อยที่เจาะจงมากขึ้นในการค้นหาได้

หากคุณใช้ nth-child ปกติ เช่น :nth-child(2) ในคลาสพิเศษ เบราว์เซอร์จะเลือกองค์ประกอบที่มีคลาสพิเศษอยู่ และยังเป็นองค์ประกอบรองลงมาด้วย ซึ่งไม่เหมือนกับ :nth-child(2 of .special) ซึ่งจะกรององค์ประกอบ .special ทั้งหมดไว้ล่วงหน้า แล้วเลือกองค์ประกอบที่ 2 จากรายการนั้น

สำรวจฟีเจอร์นี้เพิ่มเติมในบทความเกี่ยวกับไวยากรณ์อันดับที่ n

text-wrap: balance

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

เพื่อสร้างความสมดุลระหว่างข้อความ เบราว์เซอร์จะทำการค้นหาไบนารีได้อย่างมีประสิทธิภาพสำหรับความกว้างที่เล็กที่สุด ซึ่งไม่ก่อให้เกิดบรรทัดเพิ่มเติมใดๆ โดยจะหยุดไว้ที่พิกเซล CSS เดียว (ไม่ใช่พิกเซลที่แสดง) หากต้องการลดขั้นตอนในการค้นหาไบนารีให้น้อยที่สุด เบราว์เซอร์จะเริ่มต้นด้วย 80% ของความกว้างของเส้นเฉลี่ย

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

initial-letter

การปรับปรุงการออกแบบตัวอักษรบนเว็บที่ดีอีกอย่างคือ initial-letter พร็อพเพอร์ตี้ CSS นี้ช่วยให้คุณควบคุมการจัดรูปแบบการซ้อนทับส่วนที่แทรกได้ดียิ่งขึ้น

คุณใช้ initial-letter ในองค์ประกอบเทียม :first-letter เพื่อระบุขนาดตัวอักษรตามจำนวนบรรทัดที่ใช้ สัญลักษณ์บล็อกตัวอักษรหรือ "sink" ของตัวอักษรที่จะวางอยู่

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

หน่วยวิวพอร์ตแบบไดนามิก

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

ในการแก้ไขปัญหานี้ ขณะนี้เรามีค่าหน่วยใหม่ในแพลตฟอร์มเว็บ ได้แก่ - ความสูงและความกว้างของวิวพอร์ตขนาดเล็ก (หรือ svh และ svw) ซึ่งแสดงขนาดวิวพอร์ตที่ใช้งานอยู่ที่เล็กที่สุด - ความสูงและความกว้างของวิวพอร์ตขนาดใหญ่ (lvh และ lvw) ที่แสดงถึงขนาดใหญ่ที่สุด - ความสูงและความกว้างของวิวพอร์ตแบบไดนามิก (dvh และ dvw)

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับหน่วยใหม่เหล่านี้ โปรดอ่านหน่วยวิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก

พื้นที่สีแบบขอบเขตกว้าง

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

แต่ตอนนี้เรามีพื้นที่สีใหม่มากมายบนแพลตฟอร์มบนเว็บ ซึ่งได้แก่ REC2020, P3, XYZ, LAB, OKLAB, LCH และ OKLCH พบกับพื้นที่สีใหม่สำหรับเว็บและอีกมากมายในคู่มือสี HD

และคุณจะดูได้ทันทีใน DevTools ว่าช่วงสีขยายขึ้นอย่างไร โดยเส้นสีขาวนั้นแสดงจุดที่ช่วง srgb สิ้นสุด และตำแหน่งที่ช่วงสีที่กว้างขึ้นเริ่มต้น

มีเครื่องมืออีกมากมายสำหรับสี! อย่าพลาดการปรับปรุงการไล่ระดับสีที่ยอดเยี่ยมเช่นกัน เรามีแม้กระทั่งเครื่องมือใหม่ล่าสุดอย่าง Adam Argyle ที่สร้างขึ้นเพื่อช่วยคุณลองใช้ตัวเลือกสีสำหรับเว็บและเครื่องมือสร้างการไล่ระดับสีแบบใหม่ ลองใช้ได้ที่ gradient.style

สีผสม()

การขยายพื้นที่สีที่ขยายแล้วคือฟังก์ชัน color-mix() ฟังก์ชันนี้รองรับการผสมค่าสี 2 ค่าเพื่อสร้างค่าใหม่ตามแชแนลของสีที่มีการผสม พื้นที่สีที่คุณผสมจะมีผลกับผลลัพธ์ การทำงานในพื้นที่สีที่รับรู้ได้มากขึ้น เช่น oklch จะทำงานผ่านช่วงสีที่ต่างจาก srgb

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

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

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

ดูตัวอย่างและรายละเอียดเพิ่มเติมในบล็อกโพสต์เกี่ยวกับการผสมสี หรือลองใช้playgroundสีผสมนี้

รากฐาน CSS

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

การฝัง

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

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

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

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

ดูข้อมูลและตัวอย่างเพิ่มเติมได้ที่โพสต์เกี่ยวกับการซ้อน CSS

เรียงซ้อนเลเยอร์

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เลเยอร์การเรียงซ้อนได้ในบทความนี้

CSS ที่กำหนดขอบเขต

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

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

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

คุณดู @scope ที่มีขีดจำกัดการกำหนดขอบเขตร่วมกับ @layer ได้ในการสาธิตสดนี้

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @scope ในข้อกำหนด css-cascade-6

ฟังก์ชันตรีโกณมิติ

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

ในการสาธิตด้านล่าง จุดจะหมุนรอบจุดศูนย์กลาง แทนที่จะหมุนแต่ละจุดรอบจุดศูนย์กลางของตัวเองแล้วเลื่อนออกมาด้านนอก แต่ละจุดจะถูกแปลบนแกน X และ Y ระยะทางบนแกน X และ Y จะกำหนดโดยนำ cos() และ sin() ของ --angle มาพิจารณาตามลำดับ

ดูบทความเกี่ยวกับฟังก์ชันตรีโกณมิติสำหรับข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้อย่างละเอียด

คุณสมบัติการเปลี่ยนรูปแบบแต่ละรายการ

นักพัฒนาซอฟต์แวร์ยังคงปรับปรุงตามหลักการยศาสตร์ของนักพัฒนาแอปต่อไปด้วยฟังก์ชันการเปลี่ยนรูปแบบของแต่ละบุคคล นับตั้งแต่ครั้งล่าสุดที่เราจัดงาน I/O การเปลี่ยนรูปแบบแต่ละรายการได้เสถียรในเบราว์เซอร์ใหม่ๆ ทั้งหมด

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

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

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

ดูข้อมูลเพิ่มเติมได้ที่โพสต์เกี่ยวกับฟังก์ชัน Transform แต่ละรายการ

คอมโพเนนต์ที่ปรับแต่งได้

เรากำลังทำงานร่วมกับกลุ่มชุมชน OpenUI เพื่อหาทางแก้ปัญหา 3 ประการที่ต้องทำเบื้องต้น เพื่อให้แน่ใจว่าเรากำลังแก้ไขปัญหาความต้องการหลักๆ ของนักพัฒนาซอฟต์แวร์ผ่านแพลตฟอร์มเว็บ

1. ฟังก์ชันป๊อปอัปในตัวพร้อมตัวแฮนเดิลเหตุการณ์ โครงสร้าง DOM เชิงประกาศ และค่าเริ่มต้นที่เข้าถึงได้
2. CSS API เพื่อปล่อยองค์ประกอบ 2 ส่วนเข้าด้วยกันเพื่อให้ใช้การกำหนดตำแหน่ง Anchor
3. คอมโพเนนต์เมนูแบบเลื่อนลงที่ปรับแต่งได้สำหรับเมื่อคุณต้องการจัดรูปแบบเนื้อหาภายในรายการที่เลือก

ป๊อปอัป

Popover API ทำให้องค์ประกอบบางอย่างมีการสนับสนุนเบราว์เซอร์ในตัว เช่น

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

ซึ่งก็หมายความว่าต้องมีการเขียน JavaScript น้อยลงเพื่อสร้างฟังก์ชันทั้งหมดนี้และติดตามสถานะทั้งหมดเหล่านี้

โครงสร้าง DOM สำหรับป๊อปอัปเป็นแบบประกาศและอาจเขียนได้ชัดเจนพอๆ กับการสร้าง id และแอตทริบิวต์ popover ให้องค์ประกอบป๊อปอัป จากนั้นซิงค์รหัสดังกล่าวกับองค์ประกอบซึ่งจะเปิดป๊อปอัป เช่น ปุ่มที่มีแอตทริบิวต์ popovertarget ดังนี้

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover เป็นชื่อย่อของ popover=auto องค์ประกอบที่มี popover=auto จะบังคับให้ปิดป๊อปอัปอื่นๆ เมื่อเปิด รับโฟกัสเมื่อเปิด และปิดแสงได้ ในทางกลับกัน องค์ประกอบ popover=manual จะไม่บังคับให้ปิดองค์ประกอบประเภทอื่นๆ ไม่โฟกัสทันที และไม่ปิดแบบสว่าง โดยปิดการขายด้วยปุ่มสลับหรือการดำเนินการปิดอื่นๆ

ดูเอกสารประกอบล่าสุดเกี่ยวกับป๊อปอัปได้ใน MDN

การวางตำแหน่งจุดยึด

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

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

แต่จะเกิดอะไรขึ้นหากป๊อปอัปไม่พอดีกับวิวพอร์ตตามวิธีที่คุณวางตำแหน่ง

เพื่อแก้ปัญหานี้ API การวางตำแหน่ง Anchor จึงมีตำแหน่งสำรองที่คุณปรับแต่งได้ ตัวอย่างต่อไปนี้สร้างตำแหน่งสำรองที่เรียกว่า "top-then-bottom" เบราว์เซอร์จะพยายามจัดตำแหน่งเคล็ดลับเครื่องมือไว้ที่ด้านบนก่อน และถ้าส่วนนั้นไม่พอดีกับวิวพอร์ต เบราว์เซอร์จะจัดตำแหน่งเครื่องมือดังกล่าวไว้ใต้องค์ประกอบแท็ก Anchor ที่อยู่ด้านล่าง

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

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

<selectmenu>

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

ในการสร้างตัวอย่าง selectmenu ด้านซ้ายสุดที่มีจุดสีตามสีที่จะแสดงภายในกิจกรรมในปฏิทิน คุณสามารถเขียนได้ดังนี้

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

การเปลี่ยนพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง

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

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

การสาธิตป๊อปอัปต่อไปนี้ทำให้ป๊อปอัปเคลื่อนไหวเข้าและออกโดยใช้ :popover-open สำหรับสถานะเปิด @starting-style สำหรับสถานะก่อนเปิด และใช้ค่าการเปลี่ยนรูปแบบกับองค์ประกอบโดยตรงสำหรับสถานะ "หลังจากเปิด-ปิด" หากต้องการทำให้ทั้งหมดนี้ใช้งานได้กับจอแสดงผล จำเป็นต้องเพิ่มลงในพร็อพเพอร์ตี้ transition ดังนี้

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

การโต้ตอบ

ซึ่งนำเราไปสู่การโต้ตอบ จุดสุดท้ายของทัวร์ชมฟีเจอร์ UI บนเว็บนี้

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

ภาพเคลื่อนไหวที่ใช้การเลื่อน

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

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

ใช้พร็อพเพอร์ตี้ scroll-timeline, view-timeline และ animation-timeline ใหม่เพื่อเพิ่มภาพเคลื่อนไหว CSS ด้วยการเลื่อน หากต้องการไดรฟ์ JavaScript Web Animations API ให้ส่งอินสแตนซ์ ScrollTimeline หรือ ViewTimeline เป็นตัวเลือก timeline ไปยัง Element.animate()

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

ดูคำแนะนำโดยละเอียดในการสร้างภาพเคลื่อนไหวแบบเลื่อนได้อย่างละเอียดในบทความเกี่ยวกับภาพเคลื่อนไหวแบบเลื่อน

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

View Transition API ช่วยให้การเปลี่ยน DOM เป็นเรื่องง่ายในขั้นตอนเดียว พร้อมกับสร้างการเปลี่ยนแบบเคลื่อนไหวระหว่าง 2 สถานะ สิ่งเหล่านี้อาจเป็นการจางลงระหว่างมุมมองง่ายๆ แต่คุณสามารถควบคุมวิธีการเปลี่ยนส่วนต่างๆ ของหน้าเว็บได้ด้วย

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

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

การเปลี่ยนหน้าควรมีลักษณะอย่างไรควบคุมผ่าน CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

ดังที่แสดงในเดโมที่ยอดเยี่ยมนี้โดย Maxi Ferreira การโต้ตอบอื่นๆ กับหน้าเว็บ เช่น วิดีโอที่กำลังเล่น จะยังคงทำงานต่อไปในขณะที่การเปลี่ยนผ่าน View เกิดขึ้น

ปัจจุบันการดูการเปลี่ยนรุ่นใช้ได้กับแอปหน้าเว็บเดียว (SPA) จาก Chrome 111 ระบบกำลังปรับปรุงการรองรับแอปแบบหลายหน้า สำหรับข้อมูลเพิ่มเติม โปรดดูคู่มือการเปลี่ยนมุมมองฉบับเต็มของเราที่จะแนะนำคุณตลอดทุกขั้นตอน

บทสรุป

ติดตามหน้า Landing Page ล่าสุดทั้งหมดใน CSS และ HTML ได้ที่ developer.chrome.com และลองดูวิดีโอ I/O เพิ่มเติมเกี่ยวกับเว็บ Landing Page