สรุป CSS ในปี 2023
ข้ามไปยังเนื้อหา:
- การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
- การค้นหาคอนเทนเนอร์
- การค้นหารูปแบบ
- :มีเครื่องมือเลือก
- อัปเดตคิวรี่สื่อ
- คิวรี่สื่อสคริปต์
- การค้นหาสื่อเพื่อความโปร่งใส
ว้าว ปี 2023 เป็นปีที่ยอดเยี่ยมสำหรับ CSS
ตั้งแต่ #Interop2023 ไปจนถึงหน้า Landing Page ใหม่ๆ มากมายใน CSS และ UI ที่เปิดโอกาสให้นักพัฒนาซอฟต์แวร์มีความสามารถที่ครั้งหนึ่งเคยคิดว่าเป็นไปไม่ได้ในแพลตฟอร์มบนเว็บ ปัจจุบันเบราว์เซอร์สมัยใหม่ทุกเบราว์เซอร์รองรับคำค้นหาคอนเทนเนอร์ ตารางย่อย ตัวเลือก :has()
และพื้นที่สีและฟังก์ชันใหม่ๆ มากมายนับไม่ถ้วน เรารองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนของ CSS เท่านั้น และการสร้างภาพเคลื่อนไหวที่ราบรื่นระหว่างมุมมองเว็บต่างๆ ด้วยการเปลี่ยนมุมมอง ยิ่งไปกว่านั้น เรายังมีพื้นฐานใหม่ๆ มากมายที่นำมาใช้เพื่อให้นักพัฒนาซอฟต์แวร์ได้รับประสบการณ์การใช้งานที่ดีขึ้น เช่น การซ้อน CSS และรูปแบบที่กำหนดขอบเขต
ปีที่ผ่านมานั้นสุดๆ ไปเลย เราจึงต้องการสิ้นสุดปีแห่งความสำเร็จนี้ในการเฉลิมฉลองและรับทราบถึงความทุ่มเทของทุกนักพัฒนาเบราว์เซอร์และชุมชนเว็บที่ทำให้ทั้งหมดนี้เป็นจริงขึ้นมาได้
รากฐานสถาปัตยกรรม
เรามาเริ่มที่การอัปเดตภาษาและความสามารถของ CSS หลักกัน ฟีเจอร์เหล่านี้เป็นฟีเจอร์ที่เป็นรากฐานของวิธีเขียนและจัดระเบียบสไตล์ และช่วยให้นักพัฒนาแอปมีพลังที่ยอดเยี่ยม
ฟังก์ชันตรีโกณมิติ
Chrome 111 เพิ่มการรองรับฟังก์ชันตรีโกณมิติ sin()
, cos()
, tan()
, asin()
, acos()
, atan()
และ atan2()
ทำให้ฟังก์ชันเหล่านี้พร้อมใช้งานในเครื่องมือหลักๆ ทั้งหมด ฟังก์ชันเหล่านี้มีประโยชน์มากสำหรับวัตถุประสงค์ของภาพเคลื่อนไหวและเลย์เอาต์ ตัวอย่างเช่น ตอนนี้คุณสามารถจัดองค์ประกอบในวงกลมรอบจุดศูนย์กลางที่เลือกได้ง่ายขึ้นมาก
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันตรีโกณมิติใน CSS
การเลือก n-* ที่ซับซ้อน
การสนับสนุนเบราว์เซอร์
- 111
- 111
- 113
- 9
ตัวเลือกคลาส Pseudo ของ :nth-child()
ช่วยให้คุณเลือกองค์ประกอบใน DOM ตามดัชนีได้ การใช้An+B
ไวยากรณ์สั้นๆ ช่วยให้คุณควบคุมองค์ประกอบที่คุณต้องการเลือกอย่างละเอียดได้
โดยค่าเริ่มต้น การกด :nth-*()
จะนำองค์ประกอบย่อยทั้งหมดมาพิจารณา สำหรับ Chrome 111 คุณจะเลือกส่งรายการตัวเลือกไปยัง :nth-child()
และ :nth-last-child()
หรือไม่ก็ได้ วิธีนี้ช่วยให้คุณกรองรายการย่อยไว้ล่วงหน้าได้ก่อนที่ An+B
จะดำเนินการดังกล่าว
ในการสาธิตต่อไปนี้ ตรรกะ 3n+1
จะใช้กับตุ๊กตาขนาดเล็กเท่านั้นโดยการกรองออกล่วงหน้าโดยใช้ of .small
ใช้เมนูแบบเลื่อนลงเพื่อเปลี่ยนตัวเลือกที่ใช้แบบไดนามิก
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือก nth-* ที่ซับซ้อน
ขอบเขต
การสนับสนุนเบราว์เซอร์
- 118
- 118
- x
- 17.4
Chrome 118 เพิ่มการรองรับ @scope
ซึ่งเป็นกฎกลางที่ให้คุณจับคู่ตัวเลือกขอบเขตกับต้นไม้ส่วนย่อยที่ต้องการของเอกสารได้ การจัดรูปแบบที่กำหนดขอบเขตทำให้คุณระบุองค์ประกอบที่เลือกได้อย่างเฉพาะเจาะจงโดยไม่ต้องเขียนตัวเลือกที่เจาะจงเกินไปหรือเชื่อมโยงองค์ประกอบเหล่านั้นเข้ากับโครงสร้าง DOM อย่างแน่นหนา
แผนผังย่อยที่กำหนดขอบเขตจะกำหนดโดยรากที่กำหนดขอบเขต (ขอบเขตบน) และขีดจำกัดขอบเขตที่ไม่บังคับ (ขอบเขตล่าง)
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
กฎรูปแบบที่วางไว้ในบล็อกขอบเขตจะกำหนดเป้าหมายเฉพาะองค์ประกอบภายในแผนผังย่อยที่ตัดออก ตัวอย่างเช่น กฎรูปแบบที่กำหนดขอบเขตต่อไปนี้จะกำหนดเป้าหมายเฉพาะองค์ประกอบ <img>
ที่อยู่ระหว่างองค์ประกอบ .card
และคอมโพเนนต์ที่ซ้อนกันซึ่งจับคู่โดยตัวเลือก [data-component]
@scope (.card) to ([data-component]) {
img { … }
}
ในการสาธิตต่อไปนี้ องค์ประกอบ <img>
ในคอมโพเนนต์ภาพสไลด์ไม่ตรงกันเนื่องจากขีดจำกัดขอบเขตที่ใช้
ภาพหน้าจอสาธิตขอบเขต
![ภาพหน้าจออ้างอิงสำหรับการสาธิต @scope ภาพหน้าจออ้างอิงสำหรับการสาธิต @scope](https://developer.chrome.com/static/blog/css-wrapped-2023/image/at-scope.png?authuser=0000&hl=th)
การสาธิตขอบเขตแบบสด
@scope
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @scope
ได้ในบทความ "วิธีใช้ @scope
เพื่อจำกัดการเข้าถึงของตัวเลือก" ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับตัวเลือก :scope
, วิธีจัดการความเฉพาะเจาะจง ขอบเขตแบบไม่ใช้ล่วงหน้า และผลของการเรียงลำดับแบบซ้อนจาก @scope
การซ้อน
ก่อนการซ้อน ตัวเลือกทั้งหมดจำเป็นต้องประกาศอย่างชัดเจน โดยแยกออกจากกัน ซึ่งทำให้เกิดการทำซ้ำ สไตล์ชีตจำนวนมาก และประสบการณ์การเขียนที่กระจัดกระจาย ตอนนี้คุณจะต่อตัวเลือกกับกฎสไตล์ที่เกี่ยวข้องซึ่งจัดกลุ่มอยู่ภายในได้
dl {
/* dt styles */
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
/* same as */
dt {
/* dt styles */
}
dl dt {
/* dl dt styles */
}
dl dd {
/* dl dd styles */
}
การวาง Screencast
การสาธิตการใช้งาน Nesting แบบสด
การซ้อนสามารถลดน้ำหนักของสไตล์ชีต ลดค่าใช้จ่ายของตัวเลือกที่เกิดซ้ำ และรวมสไตล์ของคอมโพเนนต์ไว้ในที่เดียว ไวยากรณ์เปิดตัวครั้งแรกโดยมีข้อจำกัดการใช้งาน &
ในที่ต่างๆ แต่ถูกยกเลิกด้วยการอัปเดตไวยากรณ์ที่ผ่อนคลายที่ซ้อนกัน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการซ้อน
ตารางย่อย
CSS subgrid
ช่วยให้คุณสร้างตารางกริดที่ซับซ้อนขึ้นโดยมีการจัดแนวระหว่างเลย์เอาต์ย่อยที่ดีขึ้นได้ วิธีนี้จะช่วยให้ตารางกริดที่อยู่ในตารางกริดอีกตารางหนึ่งใช้แถวและคอลัมน์ของตารางกริดด้านนอกเป็นของตัวเองได้ โดยใช้ subgrid
เป็นค่าสำหรับแถวหรือคอลัมน์ของตารางกริด
Screencast แบบย่อย
การสาธิต Subgrid แบบสด
ตารางย่อยมีประโยชน์อย่างยิ่งสำหรับการจัดแนวข้างเคียงให้สัมพันธ์กับเนื้อหาแบบไดนามิกของกันและกัน วิธีนี้จะช่วยให้ก็อปปี้ไรท์เตอร์ ผู้เขียน UX และนักแปลพยายามสร้างสำเนาโปรเจ็กต์ที่ "ลงตัว" ในเลย์เอาต์ได้ เมื่อใช้ตารางกริดย่อย คุณจะปรับเลย์เอาต์ให้พอดีกับเนื้อหาได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับตารางย่อย
การพิมพ์
การออกแบบตัวอักษรบนเว็บมีการอัปเดตที่สำคัญ 2-3 รายการในปี 2023 การเพิ่มประสิทธิภาพแบบต่อเนื่องที่ดีอย่างยิ่งคือพร็อพเพอร์ตี้ text-wrap
คุณสมบัตินี้ช่วยให้สามารถปรับเลย์เอาต์ของตัวอักษร ซึ่งสร้างขึ้นในเบราว์เซอร์โดยไม่ต้องเขียนสคริปต์เพิ่มเติม บอกลาความยาวของบรรทัดที่ไม่คุ้นเคยและมาพบกับแบบอักษรที่คาดเดาได้มากกว่าเดิม
ตัวอักษรเบื้องต้น
ตั้งแต่ช่วงต้นปีใน Chrome 110 พร็อพเพอร์ตี้ initial-letter
เป็นฟีเจอร์ CSS ขนาดเล็กแต่ทรงพลังซึ่งจะกำหนดการจัดรูปแบบตำแหน่งของตัวอักษรเริ่มต้น คุณจัดตำแหน่งตัวอักษรในสถานะยกขึ้นได้ พร็อพเพอร์ตี้ยอมรับอาร์กิวเมนต์ 2 รายการ ได้แก่ อาร์กิวเมนต์แรกสำหรับวางตัวอักษรในย่อหน้าที่เกี่ยวข้องในระดับลึกเท่าใด และอาร์กิวเมนต์ที่ 2 คือการเพิ่มตัวอักษรไว้เหนือย่อหน้า คุณยังสามารถทำทั้ง 2 อย่างพร้อมกันได้ ดังเช่นในการสาธิตต่อไปนี้
ภาพหน้าจอตัวอักษรเริ่มต้น
![ภาพหน้าจอของการสาธิตสำหรับตัวอักษรเบื้องต้น](https://developer.chrome.com/static/blog/css-wrapped-2023/image/initial-letter.png?authuser=0000&hl=th)
การสาธิตแบบตัวอักษรเริ่มต้น
initial-letter
สำหรับองค์ประกอบเทียม ::first-letter
เพื่อดูการเปลี่ยนแปลงดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอักษรแรกเริ่ม
text-wrap: สมดุลและน่ารัก
ในฐานะนักพัฒนาซอฟต์แวร์ คุณจะไม่ทราบขนาดสุดท้าย ขนาดแบบอักษร หรือแม้กระทั่งภาษาของบรรทัดแรกหรือย่อหน้า ตัวแปรทั้งหมดที่จำเป็นสำหรับการตัดข้อความที่มีประสิทธิภาพและสวยงามจะอยู่ในเบราว์เซอร์ เนื่องจากเบราว์เซอร์ทราบปัจจัยทั้งหมด เช่น ขนาดแบบอักษร ภาษา และพื้นที่ที่จัดสรรไว้ เบราว์เซอร์นี้จึงเหมาะสมอย่างยิ่งสำหรับการจัดการรูปแบบข้อความขั้นสูงและคุณภาพสูง
ซึ่งเป็นที่มาของเทคนิคการตัดข้อความแบบใหม่ 2 แบบ ได้แก่ เทคนิค balance
และอีก pretty
แบบ ค่า balance
จะพยายามสร้างบล็อกข้อความที่กลมกลืนกันในขณะที่ pretty
พยายามป้องกันเด็กกำพร้าและดูแลให้มีเครื่องหมายยัติภังค์ที่เหมาะสม งานทั้งสองแบบนี้มักทำกันด้วยมือ และเป็นอะไรที่น่าทึ่งมากที่ได้ทำงานให้กับเบราว์เซอร์และทำงานได้กับภาษาใดๆ ที่แปล
Screencast ที่มีการตัดข้อความ
การสาธิตการใช้การตัดข้อความแบบสด
balance
และ pretty
บนส่วนหัวและย่อหน้า ลองแปลเดโมเป็นภาษาอื่นดูข้อมูลเพิ่มเติมเกี่ยวกับ text-wrap: balance
สี
2023 เป็นปีแห่งสีสันสำหรับแพลตฟอร์มเว็บ พื้นที่สีและฟังก์ชันใหม่ที่เปิดใช้การกำหนดธีมสีได้แบบไดนามิก จึงไม่มีสิ่งใดมาขวางคุณในการสร้างธีมสีสดใสอันเขียวชอุ่มที่ผู้ใช้ควรจะได้รับ และยังปรับแต่งให้เป็นธีมได้อีกด้วย
พื้นที่สี HD (ระดับสี 4)
ตั้งแต่ฮาร์ดแวร์ไปจนถึงซอฟต์แวร์ CSS ไปจนถึงแสงไฟกะพริบ เป็นงานที่ต้องอาศัยการทำงานอย่างหนักเพื่อให้คอมพิวเตอร์ของเราสามารถแสดงสีต่างๆ ได้สวยงามดังที่สายตามนุษย์ของเรามองเห็นได้ ในปี 2023 เรามีสีใหม่ๆ รวมถึงสีที่มากขึ้น พื้นที่สีใหม่ ฟังก์ชันสี และความสามารถใหม่ๆ
CSS และสีทำสิ่งต่อไปนี้ได้แล้ว
- ตรวจสอบว่าฮาร์ดแวร์หน้าจอของผู้ใช้ใช้สี HDR แบบขอบเขตกว้างได้หรือไม่
- ตรวจสอบว่าเบราว์เซอร์ของผู้ใช้เข้าใจไวยากรณ์สี เช่น Oklch หรือ Display P3 หรือไม่
- ระบุสี HDR ใน Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ และอื่นๆ
- สร้างการไล่ระดับสีด้วยสี HDR
- แทรกการไล่ระดับสีในพื้นที่สีสำรอง
- ผสมสีด้วย color-mix()
- สร้างตัวแปรสีด้วยไวยากรณ์สีที่เกี่ยวข้อง
Screencast สี 4
การสาธิตสี 4
เรียนรู้เพิ่มเติมเกี่ยวกับสี 4 และพื้นที่สี
ฟังก์ชันผสมสี
การผสมสีเป็นงานที่คลาสสิกและ CSS ก็ทำได้เช่นกันในปี 2023 คุณไม่เพียงสามารถผสมสีขาวหรือดำให้เป็นสีเดียวกันแต่ยังต้องโปร่งใส และทั้งหมดนี้จะทำในพื้นที่สีใดก็ได้ที่คุณเลือก ซึ่งเป็นคุณลักษณะสีพื้นฐานและคุณลักษณะสีขั้นสูง
สี-ผสม() Screencast
color-mix() การสาธิต
คุณสามารถมอง color-mix()
ว่าเป็นช่วงเวลาหนึ่งจากการไล่ระดับสี ตำแหน่งที่การไล่ระดับสีแสดงขั้นตอนทั้งหมดที่ใช้ในการเปลี่ยนจากสีน้ำเงินเป็นสีขาว color-mix()
จะแสดงเพียงขั้นตอนเดียว สิ่งต่างๆ จะก้าวหน้าขึ้นเมื่อคุณเริ่มที่จะพิจารณาพื้นที่สี และเรียนรู้ว่าพื้นที่สีที่ผสมนั้นมีความแตกต่างกันอย่างไรกับผลลัพธ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับ color-mix()
ไวยากรณ์สีสัมพัทธ์
ไวยากรณ์สีสัมพัทธ์ (RCS) เป็นวิธีการเสริมของ color-mix()
ในการสร้างรายละเอียดปลีกย่อยของสี วิธีนี้มีประสิทธิภาพมากกว่า color-mix() เล็กน้อยแต่เป็นกลยุทธ์ที่ต่างกันในการทำงานกับสี color-mix()
อาจผสมสีขาวเพื่อสร้างสีอ่อน โดย RCS จะให้สิทธิ์เข้าถึงช่องทางความสว่างอย่างแม่นยำ และใช้ calc()
ในช่องเพื่อลดหรือเพิ่มความสว่างแบบเป็นโปรแกรม
Screencast ของ RCS
การสาธิต RCS แบบสด
RCS ให้คุณดำเนินการปรับแต่งสีแบบสัมพัทธ์และสัมบูรณ์ การเปลี่ยนแปลงแบบสัมพัทธ์คือการนำค่าปัจจุบันของความอิ่มตัวหรือความสว่างไปแก้ไขด้วย calc()
การเปลี่ยนแปลงสัมบูรณ์คือการเปลี่ยนแปลงค่าช่องด้วยค่าใหม่ใหม่ทั้งหมด เช่น การตั้งค่าความทึบแสงเป็น 50% ไวยากรณ์นี้จะมีเครื่องมือที่เป็นประโยชน์สำหรับการกำหนดธีม ตัวแปรในช่วงเวลาต่างๆ และอื่นๆ อีกมากมาย
ดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์สีสัมพัทธ์
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้รับการพัฒนาในปี 2023 ปีบุกเบิกนี้เปิดใช้ฟีเจอร์ใหม่ที่เปลี่ยนวิธีสร้างประสบการณ์การใช้งานเว็บที่ตอบสนองตามอุปกรณ์ไปอย่างสิ้นเชิง และทำให้เกิดรูปแบบใหม่ของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ตามคอมโพเนนต์ การรวมกันของคำค้นหาคอนเทนเนอร์และ :has()
รองรับคอมโพเนนต์ที่เป็นเจ้าของการจัดรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์และสมเหตุสมผลโดยอิงตามขนาดระดับบนสุด รวมถึงการแสดงหรือสถานะของผู้เผยแพร่โฆษณาย่อย ซึ่งหมายความว่าในที่สุดแล้วคุณจะแยกเลย์เอาต์ระดับหน้าเว็บออกจากเลย์เอาต์ระดับคอมโพเนนต์ได้ และเขียนตรรกะเพียงครั้งเดียวเพื่อใช้คอมโพเนนต์ได้ทุกที่
กำหนดขนาดคำค้นหาคอนเทนเนอร์
แทนที่จะใช้ข้อมูลขนาดส่วนกลางของวิวพอร์ตเพื่อนำรูปแบบ CSS ไปใช้ การค้นหาคอนเทนเนอร์จะรองรับการค้นหาขององค์ประกอบระดับบนสุดภายในหน้าเว็บ ซึ่งหมายความว่าคอมโพเนนต์สามารถจัดรูปแบบแบบไดนามิกในการออกแบบหลายเลย์เอาต์และในหลายมุมมอง การค้นหาคอนเทนเนอร์สำหรับขนาดเริ่มคงที่ในเบราว์เซอร์สมัยใหม่ทั้งหมดในวันวาเลนไทน์ของปีนี้ (14 กุมภาพันธ์)
หากต้องการใช้ฟีเจอร์นี้ ให้ตั้งค่าการควบคุมองค์ประกอบที่คุณค้นหาก่อน จากนั้นใช้ @container
ที่มีพารามิเตอร์ขนาดเพื่อใช้รูปแบบในลักษณะเดียวกับคำค้นหาสื่อ คุณจะได้รับขนาดการค้นหาคอนเทนเนอร์ควบคู่ไปกับการค้นหาคอนเทนเนอร์ ในการสาธิตต่อไปนี้ มีการใช้ขนาดการค้นหาคอนเทนเนอร์ cqi
(แสดงขนาดของคอนเทนเนอร์แบบอินไลน์) เพื่อกำหนดขนาดส่วนหัวของการ์ด
@container Screencast
การสาธิต @container
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การค้นหาคอนเทนเนอร์
จัดรูปแบบการค้นหาคอนเทนเนอร์
พบการใช้งานการค้นหารูปแบบบางส่วนใน Chrome 111 การค้นหารูปแบบช่วยให้คุณค้นหาค่าของคุณสมบัติที่กำหนดเองในองค์ประกอบระดับบนสุดได้เมื่อใช้ @container style()
เช่น ค้นหาหากมีค่าของพร็อพเพอร์ตี้ที่กำหนดเอง หรือตั้งเป็นค่าที่เจาะจง เช่น @container style(--rain: true)
ภาพหน้าจอการค้นหารูปแบบ
![ภาพหน้าจอการสาธิตสำหรับการ์ดสภาพอากาศของการค้นหาคอนเทนเนอร์รูปแบบ](https://developer.chrome.com/static/blog/css-wrapped-2023/image/stylecq.png?authuser=0000&hl=th)
การสาธิตการค้นหารูปแบบ
แม้ว่าสิ่งนี้จะฟังดูคล้ายกับการใช้ชื่อคลาสใน CSS แต่การค้นหารูปแบบก็มีข้อดีบางอย่าง อย่างแรกคือเมื่อใช้การค้นหารูปแบบ คุณสามารถอัปเดตค่าใน CSS ตามความจำเป็นสำหรับสถานะจำลอง นอกจากนี้ เมื่อใช้งานเวอร์ชันต่อๆ ไป คุณจะค้นหาช่วงของค่าได้เพื่อกําหนดรูปแบบที่ใช้ เช่น style(60 <= --weather <= 70)
และสไตล์ตามคู่พร็อพเพอร์ตี้-ค่า เช่น style(font-style: italic)
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การค้นหารูปแบบ
:has() option
นักพัฒนาซอฟต์แวร์ขอ "ตัวเลือกหลัก" ใน CSS มาเกือบ 20 ปีแล้ว ด้วยตัวเลือก :has()
ที่จัดส่งใน Chrome 105 ก็ทำให้พร้อมใช้งานแล้ว เช่น การใช้ .card:has(img.hero)
จะเลือกองค์ประกอบ .card
ที่มีรูปภาพหลักเป็นเด็ก
ภาพหน้าจอสาธิต :has()
![ภาพหน้าจออ้างอิงสำหรับการสาธิต :has() ภาพหน้าจออ้างอิงสำหรับการสาธิต :has()](https://developer.chrome.com/static/blog/css-wrapped-2023/image/has-demo-1.png?authuser=0000&hl=th)
การสาธิตการใช้งาน :has() แบบสด
:has()
: การ์ดที่ไม่มี/มีรูปภาพเนื่องจาก :has()
ยอมรับรายการตัวเลือกแบบสัมพัทธ์เป็นอาร์กิวเมนต์ คุณจึงเลือกได้มากกว่าองค์ประกอบระดับบนสุด เมื่อใช้ combinator ต่างๆ ของ CSS ไม่เพียงแต่จะขึ้นไปถึงแผนผัง DOM เท่านั้น แต่ยังทำการเลือกแบบไซด์ทางได้อีกด้วย ตัวอย่างเช่น li:has(+ li:hover)
จะเลือกองค์ประกอบ <li>
ที่อยู่ก่อนองค์ประกอบ <li>
ที่วางเมาส์เหนือองค์ประกอบอยู่
:has() Screencast
การสาธิต :has()
:has()
: ชาร์จดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS :has()
อัปเดตคิวรี่สื่อ
คำค้นหาสื่อ update
ให้คุณปรับ UI ตามอัตราการรีเฟรชของอุปกรณ์ได้ ฟีเจอร์นี้สามารถรายงานค่า fast
, slow
หรือ none
ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ต่างๆ
อุปกรณ์ส่วนใหญ่ที่คุณออกแบบไว้มีแนวโน้มที่จะมีอัตราการรีเฟรชที่เร็ว ซึ่งรวมถึงเดสก์ท็อปและอุปกรณ์เคลื่อนที่ส่วนใหญ่ eReader และอุปกรณ์ เช่น ระบบการชำระเงินพลังงานต่ำ อาจมีอัตราการรีเฟรชช้า การรู้ว่าอุปกรณ์ไม่สามารถจัดการภาพเคลื่อนไหวหรือการอัปเดตบ่อยๆ ได้ หมายความว่าคุณสามารถประหยัดการใช้งานแบตเตอรี่หรือการอัปเดตมุมมองที่ผิดพลาด
อัปเดต Screencast
อัปเดตการสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (อัปเดต)
คิวรี่สื่อสคริปต์
คุณสามารถใช้คิวรี่สื่อของสคริปต์เพื่อตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่ การทำเช่นนี้มีประโยชน์มากสำหรับการปรับปรุงแบบก้าวหน้า ก่อนการค้นหาสื่อนี้ กลยุทธ์ในการตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่คือการวางคลาส nojs
ใน HTML และนำออกด้วย JavaScript คุณนำสคริปต์เหล่านี้ออกเนื่องจาก CSS มีวิธีตรวจหา JavaScript และปรับให้เหมาะสมได้แล้ว
ดูวิธีเปิดและปิดใช้ JavaScript ในหน้าเว็บสำหรับการทดสอบผ่าน Chrome DevTools ที่นี่
การเขียนสคริปต์ Screencast
การสาธิตการเขียนสคริปต์
ลองพิจารณาการเปลี่ยนธีมบนเว็บไซต์ คำค้นหาสื่อที่ใช้สคริปต์สามารถช่วยให้การเปลี่ยนทำงานได้ตามความต้องการของระบบเนื่องจากไม่มี JavaScript ให้ใช้งาน หรือพิจารณาใช้คอมโพเนนต์สวิตช์ หากมี JavaScript อยู่แล้วก็สามารถปัดสวิตช์ด้วยท่าทางสัมผัสแทนการเปิดหรือปิดเพียงอย่างเดียว มีโอกาสมากมายในการอัปเกรด UX หากมีการใช้สคริปต์ พร้อมทั้งให้ประสบการณ์ขั้นพื้นฐานที่สำคัญหากปิดใช้การเขียนสคริปต์
ดูข้อมูลเพิ่มเติมเกี่ยวกับ script
การค้นหาสื่อที่มีความโปร่งใสน้อยลง
อินเทอร์เฟซที่ไม่ทึบแสงอาจทำให้เกิดอาการปวดศีรษะหรือมีปัญหาในการมองเห็นจากความบกพร่องทางการมองเห็นประเภทต่างๆ ด้วยเหตุนี้ Windows, macOS และ iOS จึงมีค่ากำหนดของระบบที่สามารถลดหรือนำความโปร่งใสออกจาก UI คิวรี่สื่อสำหรับ prefers-reduced-transparency
นี้เข้ากันได้ดีกับคำค้นหาสื่ออื่นๆ ที่ต้องการซึ่งทำให้คุณใช้ความคิดสร้างสรรค์ได้ในขณะที่ปรับเปลี่ยนให้เหมาะกับผู้ใช้
Screencast ที่มีความโปร่งใสลดลง
การสาธิตการลดความโปร่งใส
ในบางกรณี คุณสามารถใช้เลย์เอาต์อื่นซึ่งไม่มีเนื้อหาซ้อนทับเนื้อหาอื่นๆ ได้ ในกรณีอื่นๆ อาจปรับความทึบแสงของสีเป็นทึบหรือเกือบทึบได้ บล็อกโพสต์ต่อไปนี้มีการสาธิตที่สร้างแรงบันดาลใจเพิ่มเติม ซึ่งปรับให้เข้ากับความต้องการของผู้ใช้ ลองพิจารณาดูหากคุณสงสัยเกี่ยวกับช่วงเวลาที่คำค้นหาสื่อนี้มีค่า
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (prefers-reduced-transparency)
การโต้ตอบ
การโต้ตอบคือหลักสำคัญของประสบการณ์ในโลกดิจิทัล โดยช่วยให้ผู้ใช้ได้รับความคิดเห็นเกี่ยวกับสิ่งที่พวกเขาคลิกและตำแหน่งที่อยู่ในพื้นที่เสมือน ปีนี้มีการเปิดตัวฟีเจอร์ที่น่าสนใจหลายอย่าง ซึ่งช่วยให้การโต้ตอบต่างๆ เขียนและนำไปใช้ได้ง่ายขึ้น ช่วยให้เส้นทางของผู้ใช้ราบรื่นและมีประสบการณ์การใช้งานเว็บที่ซับซ้อนมากขึ้น
ดูการเปลี่ยน
การเปลี่ยนของการดูมีผลอย่างมากต่อประสบการณ์ของผู้ใช้หน้าเว็บ ด้วย View Transitions API คุณสามารถสร้างการเปลี่ยนภาพระหว่างสถานะของหน้า 2 แบบในแอปพลิเคชันหน้าเดียว การเปลี่ยนเหล่านี้อาจเป็นการเปลี่ยนหน้าแบบเต็ม หรือสิ่งเล็กๆ บนหน้าเว็บ เช่น การเพิ่มหรือนำรายการใหม่ออกจากรายการ
หัวใจสำคัญของ View Transitions API คือฟังก์ชัน document.startViewTranstion
ส่งฟังก์ชันที่อัปเดต DOM เป็นสถานะใหม่ และ API จะดูแลทุกอย่างให้คุณ ซึ่งทำได้โดยถ่ายสแนปชอตก่อนและหลัง จากนั้นสลับไปมาระหว่าง 2 อย่าง การใช้ CSS ช่วยให้คุณควบคุมสิ่งที่จะจับภาพและปรับแต่งว่าจะให้สแนปชอตเหล่านี้เคลื่อนไหวอย่างไร
VT Screencast
การสาธิต VT
View Transitions API for Single Page Applications ที่จัดส่งใน Chrome 111 ดูข้อมูลเพิ่มเติมเกี่ยวกับดูการเปลี่ยน
ฟังก์ชันการค่อยๆ เปลี่ยนเชิงเส้น
การสนับสนุนเบราว์เซอร์
- 113
- 113
- 112
- 17.2
อย่าปล่อยให้ชื่อของฟังก์ชันนี้หลอกคุณ ฟังก์ชัน linear()
(อย่าสับสนกับlinear
คีย์เวิร์ด) ช่วยให้คุณสร้างฟังก์ชันการค่อยๆ เปลี่ยนที่ซับซ้อนได้อย่างง่ายดาย โดยอาจทำให้ความแม่นยำลดลง
ก่อนวันที่ linear()
ซึ่งจัดส่งใน Chrome 113 จะสร้างเอฟเฟกต์การตีกลับหรือสปริงใน CSS ไม่ได้ linear()
คุณสามารถประมาณการค่อยๆ เปลี่ยนเหล่านี้ได้โดยทำให้การค่อยๆ เปลี่ยนง่ายขึ้นโดยลดความซับซ้อนของจุดต่างๆ แล้วใส่การประมาณค่าแบบเชิงเส้นระหว่างจุดเหล่านี้
linear()
ใช้จุดเหล่านี้และประมาณค่าระหว่างจุดเหล่านี้แบบเชิงเส้นScreencast เชิงเส้นแบบค่อยๆ เปลี่ยน
การสาธิตการค่อยๆ เปลี่ยนแบบเชิงเส้น
linear()
เรียนรู้เพิ่มเติมเกี่ยวกับ linear()
หากต้องการสร้างเส้นโค้ง linear()
ให้ใช้เครื่องมือสร้างการค่อยๆ เปลี่ยนเชิงเส้น
สิ้นสุดการเลื่อน
อินเทอร์เฟซหลายอย่างมีการโต้ตอบกับการเลื่อน และบางครั้งอินเทอร์เฟซอาจต้องซิงค์ข้อมูลที่เกี่ยวข้องกับตำแหน่งการเลื่อนปัจจุบัน หรือดึงข้อมูลตามสถานะปัจจุบัน ก่อนเหตุการณ์ scrollend
คุณต้องใช้วิธีการหมดเวลาที่ไม่ถูกต้องซึ่งอาจเริ่มทำงานขณะที่นิ้วของผู้ใช้ยังอยู่บนหน้าจอ เมื่อใช้เหตุการณ์ scrollend
คุณจะมีเหตุการณ์ Scrollend ที่มีกำหนดเวลาสมบูรณ์ซึ่งจะทำความเข้าใจว่าผู้ใช้ยังคงใช้ท่าทางสัมผัสตรงกลางอยู่หรือไม่
Screencast แบบ Scrollend
การสาธิต Scrollend
เบราว์เซอร์นี้สำคัญที่จะต้องเป็นเจ้าของเพราะ JavaScript ไม่สามารถติดตามการปรากฏของนิ้วบนหน้าจอระหว่างการเลื่อนได้ เพียงแต่ข้อมูลจะไม่พร้อมใช้งานเท่านั้น ตอนนี้สามารถลบโค้ดที่พยายามสิ้นสุดการเลื่อนส่วนที่ไม่ถูกต้องแล้วแทนที่ด้วยเหตุการณ์ที่ความแม่นยำสูงซึ่งเบราว์เซอร์เป็นเจ้าของได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ scrollend
ภาพเคลื่อนไหวที่ใช้การเลื่อน
ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเป็นฟีเจอร์ที่น่าตื่นเต้นใน Chrome 115 ซึ่งช่วยให้คุณนำภาพเคลื่อนไหวของ CSS หรือภาพเคลื่อนไหวที่สร้างด้วย Web Animations API ที่มีอยู่มาจับคู่กับออฟเซ็ตการเลื่อนของตัวเลื่อนได้ ในขณะที่คุณเลื่อนขึ้นและลงหรือเลื่อนซ้ายและขวาในแนวนอน ภาพเคลื่อนไหวที่ลิงก์จะกรอไปข้างหน้าและถอยหลังเพื่อสนองตอบโดยตรง
ScrollTimeline ช่วยให้คุณสามารถติดตามความคืบหน้าโดยรวมของแถบเลื่อนตามที่แสดงในการสาธิตต่อไปนี้ ขณะที่คุณเลื่อนลงจนสุดหน้าเว็บ ข้อความจะแสดงตัวทีละอักขระ
SDA Screencast
การสาธิต SDA
ViewTimeline ช่วยให้คุณสามารถติดตามองค์ประกอบขณะที่ข้ามแถบเลื่อนได้ ซึ่งทำงานคล้ายกับวิธีที่ IntersectionObserver ติดตามองค์ประกอบ ในการสาธิตต่อไปนี้ แต่ละภาพจะแสดงให้เห็นตัวเองนับตั้งแต่ที่เข้าสู่แถบเลื่อนจนกระทั่งอยู่กึ่งกลาง
Screencast การสาธิต SDA
การสาธิต SDA แบบสด
เนื่องจากภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนสามารถทำงานร่วมกับภาพเคลื่อนไหว CSS และ Web Animations API คุณจึงได้รับประโยชน์จากข้อดีทั้งหมดของ API เหล่านี้ ซึ่งรวมถึงความสามารถในการทำให้ภาพเคลื่อนไหวเหล่านี้ทำงานออกจากเทรดหลัก ตอนนี้คุณสามารถสร้างภาพเคลื่อนไหวที่ลื่นไหลได้เพราะต้องเลื่อนและเลื่อนออกไปยังชุดข้อความหลักผ่านโค้ดเพิ่มเติมเพียงไม่กี่บรรทัด แล้วตรงไหนไม่ชอบ
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ใช้การเลื่อนได้ โปรดอ่านบทความนี้พร้อมรายละเอียดทั้งหมด หรือ ไปที่ Scroll-driven-animations.style ซึ่งมีการสาธิตมากมาย
ไฟล์แนบไทม์ไลน์ที่เลื่อนเวลาออกไป
เมื่อใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS กลไกการค้นหาเพื่อค้นหาแถบเลื่อนที่ควบคุมจะเดินขึ้นไปบนโครงสร้าง DOM เสมอ ซึ่งทำให้มีการจำกัดให้เลื่อนเฉพาะระดับบนเท่านั้น อย่างไรก็ตาม บ่อยครั้งที่องค์ประกอบที่จำเป็นต้องทำเป็นภาพเคลื่อนไหวจะไม่ใช่องค์ประกอบย่อยของแถบเลื่อน แต่เป็นองค์ประกอบที่อยู่ในแผนผังย่อยที่ต่างกันโดยสิ้นเชิง
หากต้องการอนุญาตให้องค์ประกอบที่เคลื่อนไหวค้นหาไทม์ไลน์การเลื่อนที่มีชื่อของบุคคลที่ไม่ใช่ระดับบน ให้ใช้พร็อพเพอร์ตี้ timeline-scope
ในระดับบนสุดที่แชร์ การดำเนินการนี้อนุญาตให้แนบ scroll-timeline
หรือ view-timeline
ที่มีชื่อนั้นด้วย ทำให้เกิดขอบเขตที่กว้างขึ้น เมื่อเรียบร้อยแล้ว บุตรหลานของผู้ปกครองทุกคนที่แชร์จะใช้ไทม์ไลน์ที่มีชื่อนั้นได้
![การแสดงภาพโครงสร้างย่อย DOM โดยใช้ขอบเขตไทม์ไลน์ในระดับบนสุดที่แชร์ การแสดงภาพโครงสร้างย่อย DOM โดยใช้ขอบเขตไทม์ไลน์ในระดับบนสุดที่แชร์](https://developer.chrome.com/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=0000&hl=th)
timeline-scope
ในระดับบนสุดที่แชร์ องค์ประกอบที่ใช้เป็น animation-timeline
scroll-timeline
ที่ประกาศในแถบเลื่อน
การสาธิต Screencast
การสาธิตแบบสด
เรียนรู้เพิ่มเติมเกี่ยวกับ timeline-scope
ภาพเคลื่อนไหวของคุณสมบัติที่ไม่ต่อเนื่อง
ความสามารถใหม่อีกอย่างหนึ่งในปี 2023 คือความสามารถในการสร้างภาพเคลื่อนไหวแบบแยกต่างหาก เช่น การสร้างภาพเคลื่อนไหวไปและกลับจาก display: none
จาก Chrome 116 คุณจะใช้ display
และ content-visibility
ในกฎคีย์เฟรมได้ นอกจากนี้ คุณยังเปลี่ยนพร็อพเพอร์ตี้แบบแยกกันได้ที่จุด 50% แทนที่จะเป็นจุด 0% ซึ่งทำได้ด้วยการใช้พร็อพเพอร์ตี้ transition-behavior
ที่ใช้คีย์เวิร์ด allow-discrete
หรือในพร็อพเพอร์ตี้ transition
เป็นชวเลข
ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง Screencast
ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง การสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนภาพเคลื่อนไหวแบบแยกกัน
@การเริ่มต้น-สไตล์
กฎ CSS @starting-style
สร้างขึ้นจากความสามารถใหม่บนเว็บสำหรับการแสดงภาพเคลื่อนไหวไปยังและจาก display: none
กฎนี้ระบุวิธีการสร้างรูปแบบ "ก่อนเปิด" ให้องค์ประกอบซึ่งเบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบดังกล่าวจะเปิดในหน้า ซึ่งมีประโยชน์มากสำหรับการเข้าสู่ภาพเคลื่อนไหว และการสร้างภาพเคลื่อนไหวในองค์ประกอบต่างๆ เช่น การเปิดปิดหรือกล่องโต้ตอบ นอกจากนี้ยังมีประโยชน์สำหรับเวลาใดก็ตามที่คุณกำลังสร้างองค์ประกอบ และต้องการให้องค์ประกอบนั้นสามารถสร้างภาพเคลื่อนไหวเข้ามาได้ ลองดูตัวอย่างต่อไปนี้ซึ่งจะทำให้แอตทริบิวต์ popover
เคลื่อนไหว (ดูส่วนถัดไป) ในมุมมองและไปยังเลเยอร์บนสุดอย่างราบรื่นจากภายนอกวิวพอร์ต
@เริ่มต้น Screencast
@starting-style การสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @starting-style และภาพเคลื่อนไหวอื่นๆ ในรายการ
ซ้อนทับ
คุณเพิ่มคุณสมบัติ CSS overlay
ใหม่ไปยังการเปลี่ยนได้เพื่อเปิดใช้องค์ประกอบที่มีสไตล์เลเยอร์ชั้นบนสุด เช่น popover
และ dialog
เพื่อทำให้เคลื่อนไหวออกจากเลเยอร์บนสุดได้อย่างราบรื่น หากไม่เปลี่ยนการซ้อนทับ องค์ประกอบจะกลับไปเป็นการตัด เปลี่ยนรูปแบบ และปิดทับทันที และคุณจะไม่เห็นการเปลี่ยนฉากเกิดขึ้น ในทำนองเดียวกัน overlay
จะช่วยให้ ::backdrop
เคลื่อนไหวได้อย่างลื่นไหลเมื่อเพิ่มลงในองค์ประกอบเลเยอร์ด้านบน
การวางซ้อน Screencast
การสาธิตสดซ้อนทับ
ดูข้อมูลเพิ่มเติมเกี่ยวกับการวางซ้อนและภาพเคลื่อนไหวการออกอื่นๆ
องค์ประกอบ
2023 เป็นปีทองที่ทั้งสไตล์และองค์ประกอบ HTML เข้ามาบรรจบกัน ทำให้มีหน้า Landing Page ของ popover
รวมถึงงานอื่นๆ ที่ต้องทำเพิ่มเติมในส่วนของการวางตำแหน่ง Anchor และอนาคตของเมนูการจัดรูปแบบแบบเลื่อนลง คอมโพเนนต์เหล่านี้ช่วยให้สร้างรูปแบบ UI ทั่วไปได้ง่ายขึ้น โดยไม่ต้องอาศัยไลบรารีเพิ่มเติมหรือสร้างระบบการจัดการสถานะของตัวเองใหม่ตั้งแต่ต้นทุกครั้ง
ป๊อปอัป
Popover API ช่วยคุณสร้างองค์ประกอบที่วางซ้อนอยู่บนหน้าอื่นๆ ที่เหลือของหน้า โดยอาจรวมถึงเมนู การเลือก และเคล็ดลับเครื่องมือ คุณสร้างป๊อปอัปอย่างง่ายได้โดยการเพิ่มแอตทริบิวต์ popover
และ id
ลงในองค์ประกอบที่ปรากฏขึ้น แล้วเชื่อมต่อแอตทริบิวต์ id
ขององค์ประกอบกับปุ่มเรียกใช้โดยใช้ popovertarget="my-popover"
Popover API รองรับรายการต่อไปนี้
- เลื่อนไปยังชั้นบนสุด ป๊อปโอเวอร์จะปรากฏบนเลเยอร์แยกต่างหากเหนือส่วนที่เหลือของหน้าเว็บ คุณจึงไม่ต้องลองเล่นกับดัชนี z
- ฟังก์ชันปิดไฟ การคลิกนอกบริเวณป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
- การจัดการโฟกัสเริ่มต้น การเปิดป็อปโอเวอร์จะทำให้แท็บถัดไปหยุดภายในป๊อปอัป
- แป้นพิมพ์ลัดที่เข้าถึงได้ การกดปุ่ม
esc
หรือสลับ 2 ครั้งจะเป็นการปิดป๊อปอัปและโฟกัสกลับไปที่ - การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับทริกเกอร์ป๊อปโอเวอร์อย่างมีความหมาย
Screencast แบบป๊อปโอเวอร์
เดโมแบบสดของ Popover
กฎแนวนอนในการเลือก
การเปลี่ยนแปลงเล็กน้อยของ HTML ใน Chrome และ Safari ในปีนี้คือความสามารถในการเพิ่มองค์ประกอบกฎแนวนอน (แท็ก <hr>
) ลงในองค์ประกอบ <select>
เพื่อช่วยแบ่งเนื้อหา ก่อนหน้านี้ การใส่แท็ก <hr>
ลงในส่วน Select จะไม่แสดงผล แต่ปีนี้ทั้ง Safari และ Chrome รองรับฟีเจอร์นี้ ซึ่งทำให้แยกเนื้อหาภายในองค์ประกอบ <select>
ได้ดียิ่งขึ้น
เลือกภาพหน้าจอ
![ภาพหน้าจอของชั่วโมงที่เลือกซึ่งมีธีมสว่างและมืดใน Chrome](https://developer.chrome.com/static/blog/css-wrapped-2023/image/hrselect.jpg?authuser=0000&hl=th)
เลือกการสาธิตแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ ชั่วโมงในรายการที่เลือก
:คลาสสมมติที่ใช้ได้ของผู้ใช้และไม่ถูกต้อง
ในปีนี้จะมีความเสถียรในทุกเบราว์เซอร์ โดย :user-valid
และ :user-invalid
จะทำงานคล้ายกับคลาสซูโดของ :valid
และ :invalid
แต่จะจับคู่การควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสำคัญเท่านั้น ตัวควบคุมแบบฟอร์มที่จำเป็นและว่างเปล่าจะตรงกับ :invalid
แม้ว่าผู้ใช้ยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม การควบคุมเดียวกันจะไม่ตรงกับ :user-invalid
จนกว่าผู้ใช้จะเปลี่ยนแปลงอินพุตและปล่อยให้อยู่ในสถานะที่ไม่ถูกต้อง
ตัวเลือกใหม่เหล่านี้จะช่วยให้ไม่จำเป็นต้องเขียนโค้ดการเก็บสถานะเพื่อติดตามข้อมูลที่ผู้ใช้เปลี่ยนแปลงอีกต่อไป
:user-* Screencast
:user-* การสาธิตแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้องค์ประกอบสมมติสำหรับการตรวจสอบแบบฟอร์ม user-*
แอคคอร์เดียนสุดพิเศษ
การสนับสนุนเบราว์เซอร์
- 120
- 120
- x
- 17.2
รูปแบบ UI ทั่วไปบนเว็บคือคอมโพเนนต์แอคคอร์เดียน หากต้องการใช้รูปแบบนี้ คุณต้องรวมองค์ประกอบ <details>
2-3 รายการเข้าด้วยกัน โดยมักจะจัดกลุ่มองค์ประกอบเหล่านี้ด้วยภาพเพื่อบ่งบอกว่าทั้ง 2 องค์ประกอบอยู่ร่วมกัน
ฟีเจอร์ใหม่ใน Chrome 120 รองรับแอตทริบิวต์ name
ในองค์ประกอบ <details>
เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details>
หลายรายการที่มีค่า name
เดียวกันจะสร้างกลุ่มความหมาย องค์ประกอบในกลุ่มจะเปิดพร้อมกันได้สูงสุด 1 องค์ประกอบ โดยเมื่อคุณเปิดองค์ประกอบ <details>
รายการหนึ่งจากกลุ่ม องค์ประกอบที่เปิดอยู่ก่อนหน้านี้จะปิดโดยอัตโนมัติ หีบเพลงประเภทนี้เรียกว่าแอกคอร์เดียนพิเศษ
องค์ประกอบ <details>
ที่เป็นส่วนหนึ่งของแอคคอร์เดียนพิเศษไม่จำเป็นต้องเป็นรายการข้างเคียง ซึ่งอาจกระจัดกระจายอยู่ทั่วทั้งเอกสาร
CSS ได้รับการพัฒนาอย่างมากในช่วง 2-3 ปีที่ผ่านมา โดยเฉพาะอย่างยิ่งในช่วงปี 2023 หากคุณเพิ่งเริ่มใช้ CSS หรือแค่ต้องการทบทวนความรู้เบื้องต้น โปรดดูหลักสูตรเรียนรู้ CSS แบบไม่เสียค่าใช้จ่าย และหลักสูตรฟรีอื่นๆ ที่ web.dev
ขอให้มีความสุขในช่วงเทศกาลวันหยุดและหวังว่าคุณจะมีโอกาสนำฟีเจอร์ CSS และ UI ใหม่ที่ยอดเยี่ยมเหล่านี้ไปใช้กับงานของคุณในเร็วๆ นี้
⇾ ทีม DevRel ของ Chrome UI