หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Una Kravets

Bramus

Adam Argyle

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

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

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

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

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

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

การรองรับเบราว์เซอร์

แหล่งที่มา

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

หมายเหตุ: เราขอแนะนำให้คุณกําหนดขอบเขตตัวเลือกนี้ให้ใกล้เคียงกับองค์ประกอบมากที่สุดเพื่อป้องกันไม่ให้ประสิทธิภาพการแสดงผลช้าลงในต้นไม้ DOM ขนาดใหญ่ เช่น การใช้ :has() เพื่อตรวจสอบรายการที่ตรงกันในองค์ประกอบ HTML รูทจะช้ากว่าการตรวจสอบรายการที่ตรงกันในแถบนำทางหรือในองค์ประกอบการ์ดที่มีลําดับชั้นน้อยกว่า

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

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

การรองรับเบราว์เซอร์

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

หากคุณใช้องค์ประกอบย่อยที่ n ปกติ เช่น :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)

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

แสดงภาพหน่วยวิวพอร์ตใหม่

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

พื้นที่สีแบบกว้าง

การรองรับเบราว์เซอร์

แหล่งที่มา

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

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

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

รูปสามเหลี่ยม 5 รูปซ้อนกันที่มีสีแตกต่างกันเพื่อช่วยแสดงความสัมพันธ์และขนาดของพื้นที่สีใหม่แต่ละพื้นที่

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

เครื่องมือสำหรับนักพัฒนาเว็บที่แสดงเส้นขอบเขตสีในเครื่องมือเลือกสี

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

color-mix()

การรองรับเบราว์เซอร์

แหล่งที่มา

การขยายในพื้นที่สีที่ขยายคือฟังก์ชัน 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);

ช่องว่าง 7 สี (srgb, Linear-srgb, lch, oklch, lab, oklab, xyz) แต่ละรายการแสดงผลลัพธ์ต่างกัน หลายสีเป็นสีชมพูหรือม่วง แต่จริงๆ แล้วมีเพียงไม่กี่คนที่ยังคงเป็นสีน้ำเงิน — ลองใช้เดโม

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

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

ภาพหน้าจอของ DevTools ที่มีไอคอนผสานสีแผนภาพเวนน์

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

พื้นฐาน 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 ที่ดีขึ้น

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

ภาพ Cascade

ภาพหน้าจอจากโปรเจ็กต์ Codepen — ดูโปรเจ็กต์ใน Codepen

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

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

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

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

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

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

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

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

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

ป๊อปอัปที่ปรากฏขึ้นจากวิวพอร์ต

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

.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 ได้ตรวจสอบโครงสร้างพื้นฐานของเมนูเหล่านี้และมองหาวิธีอนุญาตให้ปรับแต่งเนื้อหาภายในเมนู ดูตัวอย่างภาพเหล่านี้

ตัวอย่าง selectmenus

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

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

ดูทรานซิชัน

การรองรับเบราว์เซอร์

แหล่งที่มา

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

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

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

บทสรุป

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