ในช่วง 2-3 เดือนที่ผ่านมาเป็นยุคทองของ UI ของเว็บ ความสามารถใหม่ๆ ของแพลตฟอร์มพร้อมใช้งานแล้วในเบราว์เซอร์ต่างๆ ซึ่งรองรับความสามารถของเว็บและฟีเจอร์การปรับแต่งได้มากกว่าที่เคย
ต่อไปนี้คือ 20 ฟีเจอร์ที่น่าตื่นเต้นและส่งผลมากที่สุดซึ่งเปิดตัวไปเมื่อเร็วๆ นี้หรือกำลังจะเปิดตัวในเร็วๆ นี้
- การค้นหาคอนเทนเนอร์
- การค้นหาสไตล์
- ตัวเลือก
:has()
- ไมโครไวยากรณ์ nth-of
text-wrap: balance
initial-letter
- หน่วยวิวพอร์ตแบบไดนามิก
- พื้นที่สีแบบช่วงกว้าง
color-mix()
- การซ้อน
- เลเยอร์ตามลำดับชั้น
- สไตล์ที่มีขอบเขต
- ฟังก์ชันตรีโกณมิติ
- พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ
- popover
- ตำแหน่งโฆษณา Anchor
- 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 ที่ยืดหยุ่นมากและมีกรณีการใช้งานใหม่ๆ เกิดขึ้นทุกวัน
ดูข้อมูลเพิ่มเติมและดูตัวอย่างเพิ่มเติมได้ในบล็อกโพสต์นี้เกี่ยวกับ :has()
ไวยากรณ์ nth-of
การรองรับเบราว์เซอร์
ตอนนี้แพลตฟอร์มเว็บมีการเลือกรายการที่ n ขั้นสูงขึ้น ไวยากรณ์ 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
)
ค่าของหน่วยวิวพอร์ตแบบไดนามิกจะเปลี่ยนแปลงเมื่อแถบเครื่องมือเบราว์เซอร์แบบไดนามิกเพิ่มเติม เช่น ที่อยู่ที่อยู่ด้านบนหรือแถบแท็บที่ด้านล่าง ปรากฏขึ้นและเมื่อไม่ปรากฏ
อ่านข้อมูลเพิ่มเติมเกี่ยวกับหน่วยใหม่เหล่านี้ได้ที่หน่วยวิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก
พื้นที่สีแบบกว้าง
อีกหนึ่งฟีเจอร์ใหม่ที่สำคัญที่เพิ่มเข้ามาในแพลตฟอร์มเว็บคือพื้นที่สีแบบช่วงกว้าง ก่อนที่สีแบบช่วงกว้างจะพร้อมใช้งานบนแพลตฟอร์มเว็บ คุณสามารถถ่ายภาพที่มีสีสันสดใสซึ่งดูได้ในอุปกรณ์สมัยใหม่ แต่คุณไม่สามารถหาปุ่ม สีข้อความ หรือพื้นหลังที่ตรงกับค่าสีสันสดใสเหล่านั้น
ลองใช้ด้วยตัวคุณเอง
แต่ตอนนี้เรามีพื้นที่สีใหม่มากมายในแพลตฟอร์มเว็บ ซึ่งรวมถึง REC2020, P3, XYZ, LAB, OKLAB, LCH และ OKLCH ดูตัวอย่างพื้นที่สีเว็บใหม่และอื่นๆ ในคู่มือสี HD
และคุณจะเห็นทันทีในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ว่าช่วงสีขยายออกไปอย่างไร โดยเส้นสีขาวจะแสดงจุดสิ้นสุดของช่วง 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);

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เลเยอร์ตามลำดับขั้นในบทความนี้
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()
โดยใช้ความกว้างจากจุดยึดเพื่อวางเคล็ดลับเครื่องมือที่ 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 ได้ตรวจสอบโครงสร้างพื้นฐานของเมนูเหล่านี้และมองหาวิธีอนุญาตให้ปรับแต่งเนื้อหาภายในเมนู มาดูตัวอย่างภาพกัน
หากต้องการสร้างตัวอย่าง 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
สำหรับสถานะก่อนเปิด และใช้ค่าการเปลี่ยนรูปแบบกับองค์ประกอบโดยตรงสำหรับสถานะหลังจากเปิดแล้วปิด หากต้องการให้การค้นหานี้ทำงานร่วมกับ Display ได้ คุณต้องเพิ่มลงในพร็อพเพอร์ตี้ 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 เหล่านั้น ซึ่งรวมถึงความสามารถในการทำให้ภาพเคลื่อนไหวเหล่านี้ทำงานนอกเธรดหลัก ใช่ คุณอ่านไม่ผิด ตอนนี้คุณสามารถสร้างภาพเคลื่อนไหวที่ราบรื่นซึ่งทำงานตามการเลื่อนจากเธรดหลักได้โดยใช้โค้ดเพียงไม่กี่บรรทัด อะไรจะดีไปกว่า
ดูคำแนะนำโดยละเอียดเกี่ยวกับวิธีสร้างภาพเคลื่อนไหวที่ทำงานด้วยการเลื่อนได้ที่บทความนี้เกี่ยวกับภาพเคลื่อนไหวที่ทำงานด้วยการเลื่อน
ดูการเปลี่ยน
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 การโต้ตอบอื่นๆ ในหน้าเว็บ เช่น วิดีโอที่เล่นอยู่ จะยังคงทำงานต่อไปขณะที่การเปลี่ยนมุมมองเกิดขึ้น
ปัจจุบันการเปลี่ยนมุมมองใช้ได้กับแอปหน้าเว็บเดียว (SPA) จาก Chrome 111 เรากำลังดำเนินการรองรับแอปหลายหน้า ดูข้อมูลเพิ่มเติมได้ที่คำแนะนำแบบเต็มเกี่ยวกับทรานซิชันของมุมมองซึ่งจะอธิบายขั้นตอนทั้งหมดให้คุณทราบ
บทสรุป
ติดตามข้อมูลล่าสุดทั้งหมดเกี่ยวกับ CSS และ HTML ได้ที่ developer.chrome.com และดูวิดีโอ I/O เพื่อดูข้อมูลอื่นๆ เกี่ยวกับเว็บ