CSS สิ้นสุดปี 2023
ข้ามไปยังเนื้อหา:
- การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
- การค้นหาคอนเทนเนอร์
- การค้นหารูปแบบ
- :มีตัวเลือก
- อัปเดตคำค้นหาสื่อ
- การค้นหาสื่อการเขียน
- การค้นหาสื่อความโปร่งใส
ว้าว ปี 2023 เป็นปีอันยิ่งใหญ่ของ CSS
นับตั้งแต่ #Interop2023 ไปจนถึงหน้า Landing Page ใหม่ๆ มากมายใน CSS และพื้นที่ UI ที่ช่วยให้นักพัฒนาซอฟต์แวร์มีความสามารถที่นักพัฒนาคิดว่าเป็นไปไม่ได้บนแพลตฟอร์มเว็บ ตอนนี้เบราว์เซอร์สมัยใหม่ทุกเบราว์เซอร์รองรับคำค้นหาคอนเทนเนอร์ ตารางกริดย่อย ตัวเลือก :has()
และพื้นที่สีและฟังก์ชันใหม่มากมาย เรารองรับการใช้งานใน Chrome สำหรับภาพเคลื่อนไหวแบบเลื่อนแบบ CSS เท่านั้น และสร้างภาพเคลื่อนไหวระหว่างมุมมองเว็บได้อย่างราบรื่นด้วยการเปลี่ยนมุมมอง ยิ่งไปกว่านั้น เรายังมีรูปแบบพื้นฐานใหม่ๆ จำนวนมากที่ประสบความสำเร็จสําหรับนักพัฒนาซอฟต์แวร์ เช่น การซ้อน CSS และรูปแบบที่กำหนดขอบเขต
ปีที่ผ่านมานั้นสุดๆ ไปเลย ดังนั้น เราจึงขอจบปีแห่งความสำเร็จนี้ เพื่อเป็นการเฉลิมฉลองและทราบถึงความทุ่มเทของนักพัฒนาเบราว์เซอร์และชุมชนเว็บที่ทำให้ทั้งหมดนี้เป็นจริงขึ้นมา
พื้นฐานสถาปัตยกรรม
เรามาเริ่มกันที่การอัปเดตภาษาและความสามารถของ CSS หลัก ฟีเจอร์เหล่านี้เป็นฟีเจอร์ที่เป็นพื้นฐานต่อวิธีที่คุณเขียนและจัดระเบียบสไตล์ และช่วยให้นักพัฒนาซอฟต์แวร์สร้างพลังที่ยอดเยี่ยมได้
ฟังก์ชันตรีโกณมิติ
Chrome 111 เพิ่มการรองรับฟังก์ชันตรีโกณมิติ sin()
, cos()
, tan()
, asin()
, acos()
, atan()
และ atan2()
จึงทำให้พร้อมใช้งานในเครื่องมือหลักทั้งหมด ฟังก์ชันเหล่านี้มีประโยชน์มากสำหรับภาพเคลื่อนไหวและเลย์เอาต์ ตัวอย่างเช่น ตอนนี้การจัดวางองค์ประกอบในวงกลมรอบจุดศูนย์กลางที่เลือกทำได้ง่ายขึ้นมาก
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันตรีโกณมิติใน CSS
การเลือก n-th-* ที่ซับซ้อน
การรองรับเบราว์เซอร์
- 111
- 111
- 113
- 9
ด้วยตัวเลือกคลาสเทียม :nth-child()
คุณสามารถเลือกองค์ประกอบใน DOM ตามดัชนีได้ การใช้ An+B
Microsyntax ช่วยให้คุณควบคุมองค์ประกอบที่ต้องการเลือกอย่างละเอียดได้
โดยค่าเริ่มต้น เพลย์ลิสต์ :nth-*()
จะนำองค์ประกอบย่อยทั้งหมดมาพิจารณา เมื่อใช้ Chrome 111 คุณสามารถส่งรายการตัวเลือกไปยัง :nth-child()
และ :nth-last-child()
(ไม่บังคับ) วิธีนี้ช่วยให้คุณกรองรายการบุตรหลานล่วงหน้าก่อนที่ An+B
จะดําเนินการได้
ในการสาธิตต่อไปนี้ ตรรกะ 3n+1
จะมีผลกับตุ๊กตาขนาดเล็กเท่านั้นโดยการกรองตุ๊กตาออกล่วงหน้าโดยใช้ of .small
ใช้เมนูแบบเลื่อนลงเพื่อเปลี่ยนตัวเลือกที่ใช้แบบไดนามิก
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือก nth-* ที่ซับซ้อน
ขอบเขต
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=5&hl=th)
การสาธิตขอบเขตแบบสดๆ
@scope
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @scope
ในบทความ "วิธีใช้ @scope
เพื่อจำกัดการเข้าถึงของตัวเลือก" ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับตัวเลือก :scope
วิธีจัดการความจำเพาะ ขอบเขตที่ไม่มีการกำหนดล่วงหน้า และผลจาก Cascade ของ @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 และนักแปลไม่ต้องพยายามสร้างโครงการที่ "เหมาะสม" ลงในเลย์เอาต์ เลย์เอาต์แบบตารางกริดช่วยให้ปรับเลย์เอาต์ให้พอดีกับเนื้อหาได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับตารางกริดย่อย
การพิมพ์
การออกแบบตัวอักษรบนเว็บได้รับการอัปเดตที่สำคัญบางส่วนในปี 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=5&hl=th)
การสาธิตตัวอักษรเริ่มต้น
initial-letter
สำหรับองค์ประกอบสมมติ ::first-letter
เพื่อดูการเปลี่ยนแปลงดูข้อมูลเพิ่มเติมเกี่ยวกับจดหมายเริ่มต้น
การตัดข้อความ: สร้างสมดุลและดูดี
ในฐานะนักพัฒนาซอฟต์แวร์ คุณไม่ทราบขนาดสุดท้าย ขนาดแบบอักษร หรือแม้แต่ภาษาของบรรทัดแรกหรือย่อหน้า ตัวแปรทั้งหมดที่จำเป็นสำหรับการจัดการข้อความอย่างมีประสิทธิภาพและสวยงามจะอยู่ในเบราว์เซอร์ และเนื่องจากเบราว์เซอร์รู้ปัจจัยต่างๆ ทั้งหมด เช่น ขนาดแบบอักษร ภาษา และพื้นที่ที่จัดสรร จึงทำให้เบราว์เซอร์นี้เป็นตัวเลือกที่ดีในการจัดการเลย์เอาต์ข้อความขั้นสูงและมีคุณภาพสูง
ซึ่งเป็นที่มาของเทคนิคการตัดข้อความแบบใหม่ 2 รายการ ได้แก่ balance
และอีกแบบหนึ่งคือ pretty
ค่า balance
จะพยายามสร้างบล็อกข้อความที่กลมกลืนกัน ขณะที่ pretty
จะพยายามป้องกันไม่ให้เด็กกำพร้าและดูแลให้มีเครื่องหมายขีดกลางอย่างเหมาะสม โดยปกติงานทั้งสองนี้ทำเองด้วยมือ และเป็นเรื่องน่าประทับใจมากที่จะมอบงานให้กับเบราว์เซอร์และใช้งานร่วมกับทุกภาษาที่แปลได้
ใส่ข้อความ Screencast
การสาธิตการตัดข้อความแบบสด
balance
และ pretty
บนส่วนหัวและย่อหน้า ลองแปลการสาธิตเป็นภาษาอื่นดูข้อมูลเพิ่มเติมเกี่ยวกับการตัดข้อความ: ยอดคงเหลือ
สี
ปี 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 และช่องว่างสี
ฟังก์ชันมิกซ์สี
การผสมสีเป็นงานคลาสสิก และในปี 2023 CSS ก็ทำได้เช่นกัน คุณไม่เพียงต้องผสมสีขาวหรือดำลงในสีใดสีหนึ่งเท่านั้น แต่ยังต้องทำให้โปร่งใส และทำทั้งหมดนี้ในพื้นที่สีใดก็ได้ที่เลือกด้วย แต่เป็นฟีเจอร์สีพื้นฐานและฟีเจอร์สีขั้นสูงไปพร้อมกัน
color-mix() 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=5&hl=th)
การสาธิตการค้นหารูปแบบ
แม้ว่าจะฟังดูคล้ายกับการใช้ชื่อคลาสใน CSS แต่การค้นหารูปแบบมีข้อดีบางอย่าง ประการแรกคือคุณสามารถอัปเดตค่าใน CSS ได้ตามต้องการสำหรับสถานะจำลอง นอกจากนี้ คุณจะค้นหาช่วงของค่าเพื่อกำหนดรูปแบบที่ใช้ เช่น style(60 <= --weather <= 70)
และรูปแบบตามคู่พร็อพเพอร์ตี้-ค่า เช่น style(font-style: italic)
ได้ในเวอร์ชันในอนาคตของการติดตั้งใช้งาน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้คำค้นหารูปแบบ
ตัวเลือก:has()
เป็นเวลาเกือบ 20 ปีแล้วที่นักพัฒนาซอฟต์แวร์ขอ "ตัวเลือกหลัก" ใน CSS ตอนนี้คุณสามารถใช้ตัวเลือก :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=5&hl=th)
:has() การสาธิตแบบสด
:has()
: การ์ดที่ไม่มี/มีรูปภาพเนื่องจาก :has()
ยอมรับรายการตัวเลือกแบบสัมพัทธ์เป็นอาร์กิวเมนต์ คุณจึงเลือกได้มากกว่าองค์ประกอบระดับบนสุดเป็นอย่างมาก การใช้ CSS Combinator ที่หลากหลายไม่เพียงเพิ่มโครงสร้าง DOM แต่ยังเลือกข้างด้วยได้ ตัวอย่างเช่น li:has(+ li:hover)
จะเลือกองค์ประกอบ <li>
ที่อยู่ก่อนองค์ประกอบ <li>
ที่วางเมาส์เหนือองค์ประกอบในปัจจุบัน
:has() Screencast
:has() สาธิต
:has()
: แท่นชาร์จดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS :has()
อัปเดตคำค้นหาสื่อ
คิวรี่สื่อ update
ให้คุณปรับ UI ตามอัตราการรีเฟรชของอุปกรณ์ ฟีเจอร์ดังกล่าวสามารถรายงานค่า fast
, slow
หรือ none
ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ที่แตกต่างกัน
อุปกรณ์ส่วนใหญ่ที่คุณออกแบบให้มีแนวโน้มที่จะมีอัตราการรีเฟรชเร็ว ซึ่งรวมถึงเดสก์ท็อปและอุปกรณ์เคลื่อนที่ส่วนใหญ่ eReader และอุปกรณ์ต่างๆ เช่น ระบบการชำระเงินพลังงานต่ำ อาจมีอัตราการรีเฟรชช้า หากทราบว่าอุปกรณ์รับภาพเคลื่อนไหวหรืออัปเดตเป็นประจำไม่ได้ หมายความว่าคุณสามารถประหยัดการใช้งานแบตเตอรี่หรือการอัปเดตมุมมองที่ผิดพลาดได้
อัปเดต Screencast
อัปเดตการสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (update)
การค้นหาสื่อการเขียน
คิวรี่สื่อที่เป็นสคริปต์สามารถใช้เพื่อตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่ วิธีนี้เหมาะอย่างยิ่งสำหรับการปรับปรุงแบบต่อเนื่อง ก่อนการค้นหาสื่อนี้ กลยุทธ์ในการตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่คือการวางคลาส nojs
ใน HTML แล้วนำออกด้วย JavaScript คุณสามารถนำสคริปต์เหล่านี้ออกได้เนื่องจากตอนนี้ CSS มีวิธีตรวจหา JavaScript และปรับเปลี่ยนตามความเหมาะสม
ดูวิธีเปิดและปิดใช้ JavaScript ในหน้าเว็บสำหรับการทดสอบผ่านเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่นี่
การเขียนสคริปต์ 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 คุณสามารถควบคุมสิ่งที่จะบันทึกและปรับแต่งรูปแบบภาพเคลื่อนไหวของสแนปชอตเหล่านี้ตามต้องการ
Screencast ของ VT
การสาธิต 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
คุณจะมีเหตุการณ์การเลื่อนสิ้นสุดที่มีเวลาเหมาะสม ซึ่งจะทราบว่าผู้ใช้ยังคงทำท่าทางสัมผัสอยู่นิ่งๆ หรือไม่
Screencast ของ Scrollend
การสาธิต Scrollend
วิธีนี้สำคัญสำหรับเบราว์เซอร์ เพราะ JavaScript ไม่สามารถติดตามนิ้วที่มีอยู่บนหน้าจอในระหว่างที่เลื่อน ข้อมูลเพียงแค่นั้นก็ไม่พร้อมใช้งาน สามารถลบส่วนของแถบเลื่อนที่ไม่ถูกต้องซึ่งพยายามใช้โค้ดและแทนที่ด้วยเหตุการณ์ความแม่นยําสูงที่เบราว์เซอร์เป็นเจ้าของได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ scrollend
ภาพเคลื่อนไหวแบบเลื่อน
ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนคือฟีเจอร์ที่น่าสนใจใน Chrome 115 ภาพเคลื่อนไหวเหล่านี้ช่วยให้คุณนำภาพเคลื่อนไหว CSS หรือภาพเคลื่อนไหวที่สร้างด้วย Web Animations API ที่มีอยู่มาจับคู่กับออฟเซ็ตการเลื่อนของตัวเลื่อนได้ เมื่อคุณเลื่อนขึ้นและลงหรือซ้ายและขวาในแถบเลื่อนแนวนอน ภาพเคลื่อนไหวที่ลิงก์จะสครับไปข้างหน้าและข้างหลังเพื่อการตอบสนองโดยตรง
คุณสามารถใช้ ScrollTimeline เพื่อติดตามความคืบหน้าโดยรวมของแถบเลื่อน ดังที่แสดงในการสาธิตต่อไปนี้ เมื่อคุณเลื่อนไปจนสุดหน้า ข้อความจะแสดงทีละอักขระ
Screencast แบบ SDA
การสาธิต SDA
ViewTimeline ช่วยให้คุณติดตามองค์ประกอบขณะที่ข้ามแถบเลื่อนได้ ซึ่งทำงานคล้ายกับวิธีที่ IntersectionObserver ติดตามองค์ประกอบ ในการสาธิตต่อไปนี้ รูปภาพแต่ละรูปจะแสดงตัวเองตั้งแต่ที่เข้าสู่แถบเลื่อนจนถึงกึ่งกลาง
Screencast การสาธิต SDA
การสาธิต SDA แบบสด
เนื่องจากภาพเคลื่อนไหวแบบเลื่อนจะทำงานร่วมกับภาพเคลื่อนไหว CSS และ Web Animations API ได้ คุณจึงได้รับประโยชน์จากประโยชน์ทั้งหมดที่ได้จาก API เหล่านี้ ซึ่งรวมถึงความสามารถในการให้ภาพเคลื่อนไหวเหล่านี้ทำงานนอกชุดข้อความหลัก ตอนนี้คุณสร้างภาพเคลื่อนไหวที่ลื่นไหลขึ้นซึ่งขับเคลื่อนโดยการเลื่อนแล้วออกจากชุดข้อความหลักได้ด้วยโค้ดเพิ่มเติมเพียงไม่กี่บรรทัด แล้วไม่ชอบอะไรล่ะ
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวแบบเลื่อน โปรดอ่านบทความนี้ที่มีรายละเอียดทั้งหมดหรือไปที่ Scroll-driven-animations.style ซึ่งมีการสาธิตจำนวนมาก
ไฟล์แนบของไทม์ไลน์ที่เลื่อนออกไป
เมื่อใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS กลไกการค้นหาเพื่อหาตัวเลื่อนการควบคุมจะเดินหน้า DOM Tree ขึ้น โดยจำกัดให้เลื่อนเฉพาะระดับบนเท่านั้น อย่างไรก็ตาม บ่อยครั้งที่องค์ประกอบที่จำเป็นต้องเคลื่อนไหวได้ไม่ใช่องค์ประกอบย่อยของแถบเลื่อน แต่เป็นองค์ประกอบที่อยู่ในแผนผังย่อยที่ไม่เหมือนกันเลย
หากต้องการให้องค์ประกอบที่เคลื่อนไหวค้นหาไทม์ไลน์แบบเลื่อนที่มีชื่อของผู้ที่ไม่ใช่ระดับบนได้ ให้ใช้พร็อพเพอร์ตี้ timeline-scope
ในระดับบนสุดที่แชร์ ซึ่งจะทำให้ scroll-timeline
หรือ view-timeline
ที่กำหนดไว้ซึ่งมีชื่อดังกล่าวแนบกับรายการนี้ได้ ซึ่งทำให้มีขอบเขตที่กว้างขึ้น เมื่อเปิดใช้งานแล้ว ผู้เผยแพร่โฆษณาย่อยทุกรายของผู้เผยแพร่โฆษณาหลักที่แชร์สามารถใช้ไทม์ไลน์ที่มีชื่อนั้นได้
![การแสดงภาพแผนผังย่อย DOM ที่มีขอบเขตไทม์ไลน์ที่ใช้กับระดับบนสุดที่แชร์ การแสดงภาพแผนผังย่อย DOM ที่มีขอบเขตไทม์ไลน์ที่ใช้กับระดับบนสุดที่แชร์](https://developer.chrome.com/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=5&hl=th)
timeline-scope
ในระดับบนสุดที่แชร์ scroll-timeline
ที่ประกาศไว้ในตัวเลื่อนจะพบได้โดยองค์ประกอบที่ใช้องค์ประกอบนี้เป็น animation-timeline
การสาธิต Screencast
การสาธิตแบบสด
เรียนรู้เพิ่มเติมเกี่ยวกับ timeline-scope
ภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง
ความสามารถใหม่อีกอย่างหนึ่งในปี 2023 คือความสามารถในการสร้างภาพเคลื่อนไหวแบบข้อมูลแยกกัน เช่น การสร้างภาพเคลื่อนไหวจาก display: none
เป็นภาพเคลื่อนไหว จาก Chrome 116 คุณจะใช้ display
และ content-visibility
ในกฎคีย์เฟรมได้ และยังเปลี่ยนพร็อพเพอร์ตี้ที่แยกอิสระที่จุด 50% แทนจุด 0% ได้ด้วย ซึ่งทำได้ด้วยพร็อพเพอร์ตี้ transition-behavior
ที่ใช้คีย์เวิร์ด allow-discrete
หรือในพร็อพเพอร์ตี้ transition
ที่เป็นชื่อย่อ
ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง Screencast
ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง สาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนภาพเคลื่อนไหวแบบไม่ต่อเนื่อง
@starting-style
กฎ CSS ของ @starting-style
สร้างขึ้นจากความสามารถใหม่บนเว็บสำหรับให้ภาพเคลื่อนไหวไปและกลับจาก display: none
กฎนี้ให้วิธี "ก่อนเปิด" องค์ประกอบ ที่เบราว์เซอร์สามารถพบได้ก่อนที่องค์ประกอบจะเปิดในหน้า ซึ่งมีประโยชน์มากสำหรับภาพเคลื่อนไหวของรายการ และสำหรับการทำให้องค์ประกอบต่างๆ เช่น ป๊อปอัปหรือกล่องโต้ตอบเคลื่อนไหว นอกจากนี้ยังมีประโยชน์เมื่อคุณสร้างองค์ประกอบและต้องการให้องค์ประกอบเคลื่อนไหวได้ ลองดูตัวอย่างต่อไปนี้ซึ่งจะทำให้แอตทริบิวต์ popover
เคลื่อนไหว (ดูส่วนถัดไป) ในมุมมองและไปยังเลเยอร์บนสุดอย่างราบรื่นจากภายนอกวิวพอร์ต
Screencast แบบ @starting
การสาธิต @starting-style
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @starting-style และภาพเคลื่อนไหวในรายการอื่นๆ
โฆษณาซ้อนทับ
คุณสามารถเพิ่มพร็อพเพอร์ตี้ overlay
ใหม่ของ CSS ลงในการเปลี่ยนเพื่อเปิดใช้องค์ประกอบที่มีรูปแบบเลเยอร์บนสุด เช่น popover
และ dialog
ให้เคลื่อนไหวออกจากเลเยอร์บนได้อย่างราบรื่น ถ้าคุณไม่ซ้อนทับการเปลี่ยน องค์ประกอบจะกลับไปถูกตัด เปลี่ยนรูปแบบ และปิดทับทันที โดยคุณจะไม่เห็นการเปลี่ยนเกิดขึ้น ในทำนองเดียวกัน overlay
จะทำให้ ::backdrop
เคลื่อนไหวได้อย่างราบรื่นเมื่อเพิ่มลงในองค์ประกอบเลเยอร์บนสุด
วางซ้อน Screencast
การสาธิตโอเวอร์เลย์แบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับโฆษณาซ้อนทับและภาพเคลื่อนไหวเพื่อออกอื่นๆ
ส่วนประกอบ
ปี 2023 เป็นปีสำคัญที่ผสมผสานองค์ประกอบรูปแบบและ HTML เข้าด้วยกัน โดยมี popover
Landing Page รวมถึงงานมากมายที่ต้องทำเกี่ยวกับการวางตำแหน่งแท็ก Anchor และอนาคตของเมนูการจัดรูปแบบแบบเลื่อนลง คอมโพเนนต์เหล่านี้ช่วยให้คุณสร้างรูปแบบ UI ทั่วไปได้ง่ายขึ้น โดยไม่ต้องอาศัยไลบรารีเพิ่มเติมหรือสร้างระบบการจัดการสถานะของคุณเองตั้งแต่ต้นทุกครั้ง
ป๊อปโอเวอร์
Popover API ช่วยให้คุณสามารถสร้างองค์ประกอบที่วางอยู่เหนือส่วนที่เหลือของหน้า ซึ่งอาจรวมถึงเมนู ตัวเลือก และเคล็ดลับเครื่องมือ คุณสร้างป๊อปอัปแบบง่ายๆ ได้โดยเพิ่มแอตทริบิวต์ popover
และ id
ลงในองค์ประกอบที่ปรากฏขึ้น แล้วเชื่อมต่อแอตทริบิวต์ id
ของแอตทริบิวต์กับปุ่มเรียกใช้โดยใช้ popovertarget="my-popover"
Popover API รองรับสิ่งต่อไปนี้
- โปรโมชันไปไว้ที่ชั้นบนสุด ป๊อปโอเวอร์จะปรากฏขึ้นอีกชั้นหนึ่งแยกต่างหากเหนือส่วนอื่นๆ ของหน้าเว็บ ดังนั้น คุณไม่จำเป็นต้องหลายครั้งกับดัชนี z
- ฟังก์ชันปิดไฟ การคลิกนอกพื้นที่ที่เปิดขึ้นมาจะเป็นการปิดป๊อปอัปและกลับมาโฟกัส
- การจัดการโฟกัสเริ่มต้น การเปิดป๊อปอัปทำให้แท็บถัดไปหยุดอยู่ข้างในป๊อปโอเวอร์
- การเชื่อมโยงแป้นพิมพ์ที่เข้าถึงได้ การกดปุ่ม
esc
หรือการสลับ 2 ครั้งจะปิดป๊อปอัปและกลับมาโฟกัส - การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับป๊อปอัปทริกเกอร์ตามความหมาย
Screencast ใน Popover
การสาธิตแบบสดของ 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=5&hl=th)
เลือกการสาธิตแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การใช้ชั่วโมงในรายการที่เลือก
:คลาสสมมติที่ใช้ได้และไม่ถูกต้อง
เสถียรในทุกเบราว์เซอร์ในปีนี้ :user-valid
และ :user-invalid
ทํางานคล้ายกับคลาสจำลอง :valid
และ :invalid
แต่จะจับคู่การควบคุมแบบฟอร์มหลังจากที่ผู้ใช้มีการโต้ตอบกับอินพุตอย่างมาก ตัวควบคุมแบบฟอร์มที่จำเป็นและว่างเปล่าจะตรงกับ :invalid
แม้ว่าผู้ใช้ยังไม่ได้เริ่มโต้ตอบกับหน้านั้นก็ตาม การควบคุมเดียวกันจะไม่ตรงกับ :user-invalid
จนกว่าผู้ใช้จะเปลี่ยนอินพุตและปล่อยให้อยู่ในสถานะที่ไม่ถูกต้อง
ตัวเลือกใหม่เหล่านี้ทำให้ไม่จำเป็นต้องเขียนโค้ดเก็บสถานะเพื่อติดตามอินพุตที่ผู้ใช้เปลี่ยนแปลงอีกต่อไป
:ผู้ใช้-* Screencast
:user-* การสาธิตแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้องค์ประกอบเทียมของการตรวจสอบแบบฟอร์ม user-*
แอคคอร์เดียนสุดพิเศษ
การรองรับเบราว์เซอร์
- 120
- 120
- x
- 17.2
รูปแบบ UI ทั่วไปบนเว็บคือคอมโพเนนต์หีบเพลง หากต้องการใช้รูปแบบนี้ คุณต้องรวมองค์ประกอบ <details>
2-3 รายการเข้าด้วยกัน โดยมักจัดกลุ่มองค์ประกอบเหล่านั้นเข้าด้วยกันเพื่อแสดงว่าเข้ากันได้
ฟีเจอร์ใหม่ใน Chrome 120 คือการรองรับแอตทริบิวต์ name
ในองค์ประกอบ <details>
เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details>
หลายรายการที่มีค่า name
เดียวกันจะสร้างกลุ่มความหมาย องค์ประกอบในกลุ่มจะเปิดได้พร้อมกันสูงสุด 1 รายการ เมื่อคุณเปิดองค์ประกอบ <details>
อันใดอันหนึ่งจากกลุ่ม องค์ประกอบที่เปิดอยู่ก่อนหน้านี้จะปิดโดยอัตโนมัติ หีบเพลงประเภทนี้เรียกว่าแอคคอร์เดียนพิเศษ
องค์ประกอบ <details>
ที่เป็นส่วนหนึ่งของแอคคอร์เดียนพิเศษไม่จำเป็นต้องเป็นองค์ประกอบข้างเคียง ซึ่งอาจกระจัดกระจายอยู่ทั่วเอกสาร
CSS ได้รับความนิยมอย่างมากในช่วง 2-3 ปีที่ผ่านมา โดยเฉพาะอย่างยิ่งในช่วงปี 2023 หากคุณเพิ่งเริ่มใช้ CSS หรือเพียงต้องการทบทวนข้อมูลเบื้องต้น โปรดดูหลักสูตรเรียนรู้เกี่ยวกับ CSS ฟรีของเรา รวมถึงหลักสูตรฟรีอื่นๆ ที่มีให้ที่ web.dev
ขอให้คุณมีความสุขในช่วงเทศกาลวันหยุดและหวังว่าจะมีโอกาสนำฟีเจอร์ CSS และ UI ใหม่ๆ ที่ยอดเยี่ยมเหล่านี้ไปใช้กับงานของคุณในเร็วๆ นี้
⇾ ทีม Chrome UI