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

Una Kravets

Bramus

Adam Argyle

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

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

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

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

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

Container Queries

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

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

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

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

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

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

ไวยากรณ์ nth-of

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้ได้ในบทความเกี่ยวกับไวยากรณ์ nth-of

text-wrap: balance

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

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

ดูข้อมูลเพิ่มเติมได้ในบทความนี้

initial-letter

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

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

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

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

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

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

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

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

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

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

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

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

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

color-mix()

ฟังก์ชัน color-mix() เป็นการขยายพื้นที่สีที่ขยายแล้ว ฟังก์ชันนี้รองรับการผสมค่าสี 2 ค่าเพื่อสร้างค่าใหม่ตามแชแนลของสีที่ผสม Color Space ที่ใช้ผสมจะส่งผลต่อผลลัพธ์ การทำงานในพื้นที่สีที่รับรู้ได้มากขึ้น เช่น 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 วันนี้ โดยจะมีไอคอนแผนภาพเวนน์แสดงตัวอย่างที่สวยงามในแผงรูปแบบ

ดูตัวอย่างและรายละเอียดเพิ่มเติมได้ในบล็อกโพสต์เกี่ยวกับฟังก์ชัน color-mix หรือลองใช้สนามเด็กเล่นสำหรับฟังก์ชัน color-mix() นี้

พื้นฐาน CSS

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

การฝัง

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

.card {}
.card:hover {}

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

  }
}

นอกจากนี้ คุณยังซ้อนMedia Queries ได้ด้วย ซึ่งหมายความว่าคุณซ้อน Container Queries ได้เช่นกัน ในตัวอย่างต่อไปนี้ การ์ดจะเปลี่ยนจากเลย์เอาต์แนวตั้งเป็นเลย์เอาต์แนวนอนหากมีความกว้างเพียงพอในคอนเทนเนอร์

.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 การเปลี่ยนรูปแบบแต่ละรายการก็เสถียรในเบราว์เซอร์สมัยใหม่ทั้งหมด

ในอดีต คุณต้องใช้ฟังก์ชันการแปลงเพื่อใช้ฟังก์ชันย่อยในการปรับขนาด หมุน และแปลองค์ประกอบ 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;
}

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

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

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

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

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

ป๊อปอัป

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() โดยใช้ความกว้างจากจุดยึดเพื่อวางตำแหน่งเคล็ดลับเครื่องมือที่ 50% ของตำแหน่ง x ของจุดยึด จากนั้นใช้ค่าการวางตำแหน่งที่มีอยู่เพื่อใช้รูปแบบตําแหน่งที่เหลือ

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

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

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

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

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

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

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

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

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

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

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

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

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

การเปลี่ยนฉากสามารถใช้เป็นการเพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไปได้ โดยนำโค้ดที่อัปเดต DOM ด้วยวิธีใดก็ตามมาใส่ไว้ใน View Transition 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 การโต้ตอบอื่นๆ ในหน้าเว็บ เช่น วิดีโอที่กำลังเล่น จะยังคงทำงานต่อไปในขณะที่การเปลี่ยนฉากกำลังเกิดขึ้น

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

บทสรุป

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