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

สรุป CSS: 2023

CSS Wrapped: 2023

วิธีข้ามไปยังเนื้อหา

รากฐานทางสถาปัตยกรรม
ฟังก์ชันตรีโกณมิติ
การเลือก nth-* แบบซับซ้อน
ขอบเขต
การซ้อน

การพิมพ์
จดหมายเริ่มต้น
ยอดคงเหลือ/ความน่ารักของการตัดข้อความ

สี
ระดับสี 4
ฟังก์ชันผสมสี
ไวยากรณ์สีสัมพัทธ์

การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
การค้นหาคอนเทนเนอร์
การค้นหารูปแบบ
:มีตัวเลือก
อัปเดตคําค้นหาสื่อ
การค้นหาสื่อที่ใช้สคริปต์
การค้นหาสื่อเพื่อความโปร่งใส

การโต้ตอบ
ดูการเปลี่ยน
ฟังก์ชันการค่อยๆ เปลี่ยนเชิงเส้น
Scrollend
ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน
ไฟล์แนบของไทม์ไลน์ที่เลื่อนออกไป
การเปลี่ยนพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง
กฎรูปแบบเริ่มต้น
ภาพเคลื่อนไหวซ้อนทับ

คอมโพเนนต์
ป๊อปอัป
Hr ในบางประเทศ
คลาสเทียมที่ผู้ใช้ถูกต้อง/ไม่ถูกต้อง
Accordion พิเศษ

ว้าว ปี 2023 เป็นปีทองของ CSS

ตั้งแต่ #Interop2023 ไปจนถึงหน้า Landing Page ใหม่มากมายในพื้นที่ CSS และ UI ที่เปิดใช้ความสามารถที่นักพัฒนาซอฟต์แวร์เคยคิดว่าเป็นไปไม่ได้บนแพลตฟอร์มเว็บ ปัจจุบันเบราว์เซอร์สมัยใหม่ทุกรุ่นรองรับการค้นหาคอนเทนเนอร์ ตารางกริดย่อย ตัวเลือก :has() และพื้นที่สีและฟังก์ชันใหม่มากมาย เรารองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบ CSS เท่านั้นใน Chrome และสร้างภาพเคลื่อนไหวระหว่างมุมมองเว็บได้อย่างราบรื่นด้วยการเปลี่ยนมุมมอง ยิ่งไปกว่านั้น เรายังมีรูปแบบพื้นฐานใหม่ๆ จำนวนมากที่ประสบความสำเร็จสําหรับนักพัฒนาซอฟต์แวร์ เช่น การซ้อน CSS และรูปแบบที่กำหนดขอบเขต

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

รากฐานทางสถาปัตยกรรม

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

ฟังก์ชันตรีโกณมิติ

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

แหล่งที่มา

Chrome 111 เพิ่มการรองรับฟังก์ชันตรีโกณมิติ sin(), cos(), tan(), asin(), acos(), atan() และ atan2() เพื่อให้พร้อมใช้งานในเครื่องมือหลักทั้งหมด ฟังก์ชันเหล่านี้มีประโยชน์มากสำหรับภาพเคลื่อนไหวและเลย์เอาต์ ตัวอย่างเช่น ตอนนี้การจัดวางองค์ประกอบในวงกลมรอบจุดศูนย์กลางที่เลือกทำได้ง่ายขึ้นมาก

การสาธิตฟังก์ชันตรีโกณมิติ

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันตรีโกณมิติใน CSS

การเลือก nth-* แบบซับซ้อน

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

ด้วยตัวเลือกคลาสเทียม :nth-child() คุณสามารถเลือกองค์ประกอบใน DOM ตามดัชนีได้ การใช้ไมโครซินแทกซ์ An+B ช่วยให้คุณควบคุมองค์ประกอบที่ต้องการเลือกได้อย่างละเอียด

โดยค่าเริ่มต้น เงื่อนไขเท็จ :nth-*() จะพิจารณาองค์ประกอบย่อยทั้งหมด ตั้งแต่ Chrome 111 เป็นต้นไป คุณสามารถส่งรายการตัวเลือกไปยัง :nth-child() และ :nth-last-child() (ไม่บังคับ) วิธีนี้จะช่วยให้คุณกรองรายชื่อบุตรหลานล่วงหน้าได้ก่อนที่ An+B จะเริ่มดำเนินการ

ในการแสดงตัวอย่างต่อไปนี้ ระบบจะใช้ตรรกะ 3n+1 กับตุ๊กตาขนาดเล็กเท่านั้นโดยกรองตุ๊กตาขนาดเล็กออกก่อนโดยใช้ of .small ใช้เมนูแบบเลื่อนลงเพื่อเปลี่ยนตัวเลือกที่ใช้แบบไดนามิก

การสาธิตการเลือก nth-* แบบซับซ้อน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือก 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 แบบสด

การสาธิต CSS @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

การสาธิตการฝังแบบสด

เปลี่ยนตัวเลือกการฝังแบบผ่อนคลายเพื่อตัดสินผู้ชนะการแข่งขัน

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการฝัง

ตารางกริดย่อย

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

แหล่งที่มา

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

Screencast ย่อย

การสาธิต Subgrid แบบสด

ส่วนหัว เนื้อความ และท้ายกระดาษจะปรับให้สอดคล้องกับขนาดแบบไดนามิกของรายการข้างเคียง

ตารางย่อยมีประโยชน์อย่างยิ่งในการจัดรายการข้างเคียงให้สอดคล้องกับเนื้อหาแบบไดนามิกของกันและกัน วิธีนี้ช่วยให้นักเขียนโฆษณา นักเขียน UX และผู้แปลไม่ต้องพยายามสร้างข้อความโปรเจ็กต์ที่ "พอดี" กับเลย์เอาต์ ตารางกริดย่อยช่วยให้คุณปรับเลย์เอาต์ให้เหมาะกับเนื้อหาได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับตารางย่อย

การพิมพ์

ในปี 2023 ที่ผ่านมา รูปแบบตัวอักษรบนเว็บมีการอัปเดตที่สำคัญหลายรายการ การเพิ่มประสิทธิภาพแบบต่อเนื่องที่ดีเป็นพิเศษคือพร็อพเพอร์ตี้ text-wrap พร็อพเพอร์ตี้นี้ช่วยให้สามารถปรับเลย์เอาต์แบบอักษรซึ่งเขียนขึ้นในเบราว์เซอร์ได้โดยไม่ต้องใช้สคริปต์เพิ่มเติม บอกลาบรรทัดที่มีความยาวไม่สมเหตุสมผลและพบกับแบบอักษรที่คาดเดาได้มากขึ้น

Initial-letter

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

แหล่งที่มา

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

ภาพหน้าจอจดหมายเริ่มต้น

การสาธิตตัวอักษรเริ่มต้น

เปลี่ยนค่าของ initial-letter สำหรับองค์ประกอบเทียม ::first-letter เพื่อดูการเปลี่ยนแปลง

ดูข้อมูลเพิ่มเติมเกี่ยวกับ initial-letter

text-wrap: balance and pretty

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

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

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 ของ Color 4

การสาธิตสี 4

ในการสาธิตต่อไปนี้ คุณสามารถเปรียบเทียบได้โดยการลากแถบเลื่อน ผลของ "ความสมดุล" และ "ความสวยงาม" ต่อส่วนหัวและย่อหน้า ลองแปลการสาธิตเป็นภาษาอื่น

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Color 4 และพื้นที่สี

ฟังก์ชัน color-mix

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

แหล่งที่มา

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

Screencast ของ color-mix()

การสาธิต color-mix()

การสาธิตช่วยให้คุณเลือกสีได้ 2 สี พร้อมตัวเลือกสี พื้นที่สี และจำนวนของแต่ละสีที่ควรใช้ผสมกัน

คุณอาจมองว่า 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 Demo

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

การค้นหาคอนเทนเนอร์รูปแบบ

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

แหล่งที่มา

การค้นหาสไตล์พร้อมใช้งานแล้วใน Chrome 111 โดยมีการนำไปใช้งานเพียงบางส่วน เมื่อใช้การค้นหารูปแบบในปัจจุบัน คุณจะค้นหาค่าของพร็อพเพอร์ตี้ที่กำหนดเองในองค์ประกอบระดับบนสุดได้เมื่อใช้ @container style() เช่น ค้นหาว่าค่าพร็อพเพอร์ตี้ที่กำหนดเองมีอยู่หรือไม่ หรือตั้งค่าเป็นค่าที่เจาะจง เช่น @container style(--rain: true)

ภาพหน้าจอการค้นหาสไตล์

ภาพหน้าจอการสาธิตสำหรับคำค้นหาของคอนเทนเนอร์สไตล์ในการ์ดสภาพอากาศ

การสาธิตการค้นหาสไตล์

เปลี่ยนสี เปลี่ยนฉาก แต่ละรายการใช้ไวยากรณ์สีสัมพัทธ์เพื่อสร้างตัวแปรจากสีฐาน

แม้ว่าวิธีนี้จะคล้ายกับการใช้ชื่อคลาสใน CSS แต่การค้นหาสไตล์มีข้อดีบางอย่าง ข้อแรกคือการใช้การค้นหาสไตล์ช่วยให้คุณอัปเดตค่าใน CSS ได้ตามความจําเป็นสําหรับสถานะจำลอง นอกจากนี้ ในการใช้งานเวอร์ชันในอนาคต คุณจะค้นหาช่วงของค่าเพื่อระบุสไตล์ที่ใช้ได้ เช่น style(60 <= --weather <= 70) และสไตล์ตามคู่พร็อพเพอร์ตี้-ค่า เช่น style(font-style: italic)

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

ตัวเลือก:has()

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

แหล่งที่มา

เป็นเวลาเกือบ 20 ปีที่นักพัฒนาซอฟต์แวร์ต้องการ "ตัวเลือกหลัก" ใน CSS ซึ่งตอนนี้คุณทำสิ่งเหล่านี้ได้แล้วด้วยตัวเลือก :has() ที่มาพร้อมกับ Chrome 105 เช่น การใช้ .card:has(img.hero) จะเลือกองค์ประกอบ .card ที่มีรูปภาพหลักเป็นองค์ประกอบย่อย

ภาพหน้าจอการสาธิต :has()

การสาธิตการใช้งานแบบสดของ :has()

ตัวอย่าง CSS :has(): การ์ดที่ไม่มี/มีรูปภาพ

เนื่องจาก :has() ยอมรับรายการตัวเลือกแบบสัมพัทธ์เป็นอาร์กิวเมนต์ คุณจึงเลือกได้มากกว่าองค์ประกอบหลัก การใช้คอมบิเนเตอร์ CSS ต่างๆ ไม่เพียงช่วยให้คุณไปยังส่วนบนของต้นไม้ DOM ได้ แต่ยังทำการเลือกในแนวราบได้ด้วย ตัวอย่างเช่น li:has(+ li:hover) จะเลือกองค์ประกอบ <li> ที่อยู่ก่อนองค์ประกอบ <li> ที่วางเมาส์เหนือองค์ประกอบในปัจจุบัน

:has() Screencast

:has() สาธิต

การสาธิต CSS :has(): แถบ

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS :has()

อัปเดตคําค้นหาสื่อ

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

แหล่งที่มา

คิวรี่สื่อ update ให้คุณปรับ UI ตามอัตราการรีเฟรชของอุปกรณ์ ฟีเจอร์นี้จะรายงานค่า fast, slow หรือ none ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ต่างๆ

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

อัปเดต Screencast

อัปเดตการสาธิต

จำลอง (โดยเลือกตัวเลือกตัวเลือก) ค่าความเร็วในการอัปเดตและดูว่าส่งผลต่อเป็ดอย่างไร

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (update)

การค้นหาสื่อที่ใช้สคริปต์

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

แหล่งที่มา

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

ดูวิธีเปิดและปิดใช้ JavaScript ในหน้าเว็บเพื่อทดสอบผ่านเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่นี่

การเขียนสคริปต์ Screencast

การสาธิตการเขียนสคริปต์

พิจารณาการเปลี่ยนธีมในเว็บไซต์ คําค้นหาสื่อที่ใช้สคริปต์จะช่วยในการเปลี่ยนธีมตามค่ากําหนดของระบบได้ เนื่องจากไม่มี JavaScript หรือลองใช้คอมโพเนนต์สวิตช์ หากมี JavaScript ผู้ใช้จะปัดสวิตช์ด้วยท่าทางสัมผัสแทนการเปิด/ปิดได้ โอกาสในการอัปเกรด UX นั้นมีมากมายหากใช้สคริปต์ได้ ในขณะเดียวกันก็มอบประสบการณ์การใช้งานพื้นฐานที่มีประโยชน์หากปิดใช้การเขียนสคริปต์

ดูข้อมูลเพิ่มเติมเกี่ยวกับสคริปต์

คำค้นหาสื่อแบบลดความโปร่งใส

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

แหล่งที่มา

อินเทอร์เฟซแบบไม่ทึบอาจทําให้ปวดศีรษะหรือทำให้มองเห็นได้ยากสำหรับผู้ที่มีปัญหาด้านการมองเห็นประเภทต่างๆ ด้วยเหตุนี้ 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 Demo

ดูการสาธิตการเปลี่ยนรุ่น

View Transitions API สําหรับแอปพลิเคชันหน้าเว็บเดียวพร้อมใช้งานใน Chrome 111 ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมอง

ฟังก์ชันการผ่อนปรนเชิงเส้น

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

อย่าปล่อยให้ชื่อของฟังก์ชันนี้หลอกลวงคุณ ฟังก์ชัน linear() (โปรดอย่าสับสนกับคีย์เวิร์ด linear) ช่วยให้คุณสร้างฟังก์ชันการโจมตีที่ซับซ้อนได้อย่างง่ายดาย แต่อาจสูญเสียความแม่นยำไปบ้าง

ก่อน linear() ซึ่งเปิดตัวใน Chrome 113 คุณไม่สามารถสร้างเอฟเฟกต์การเด้งหรือสปริงใน CSS ได้ linear()ช่วยให้คุณประมาณค่าการเปลี่ยนเหล่านี้ได้โดยทำให้เป็นชุดจุด จากนั้นประมาณค่าระหว่างจุดเหล่านี้แบบเชิงเส้น

แผนภูมิของเส้นโค้งการค่อยๆ เปลี่ยนการตีกลับที่มีการเพิ่มจุดหลายจุด — กราฟตีกลับต้นฉบับสีน้ำเงินลดความซับซ้อนด้วยชุดประเด็นสำคัญที่แสดงเป็นสีเขียว ฟังก์ชัน `linear()` จะใช้จุดเหล่านี้และหาค่าเฉลี่ยเชิงเส้นระหว่างจุดเหล่านั้น

Screencast แบบเชิงเส้น

การสาธิตการค่อยๆ เปลี่ยนแบบเชิงเส้น

การสาธิต CSS linear()

เรียนรู้เพิ่มเติมเกี่ยวกับ linear() หากต้องการสร้างเส้นโค้ง linear() ให้ใช้เครื่องมือสร้างการค่อยๆ เปลี่ยนแบบเชิงเส้น

การสิ้นสุดการเลื่อน

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

แหล่งที่มา

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

Screencast แบบเลื่อน

การสาธิต Scrollend

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ scrollend

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน

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

แหล่งที่มา

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

เมื่อใช้ ScrollTimeline คุณจะติดตามความคืบหน้าโดยรวมของ Scroller ได้ ดังที่แสดงในตัวอย่างต่อไปนี้ เมื่อคุณเลื่อนไปที่ท้ายหน้า ข้อความจะปรากฏขึ้นทีละอักขระ

SDA Screencast

การสาธิต SDA

การสาธิตภาพเคลื่อนไหวที่ทำงานด้วยการปัดของ CSS: ไทม์ไลน์การเลื่อน

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

Screencast การสาธิต SDA

การสาธิตการใช้งาน SDA แบบสด

ภาพตัวอย่างภาพเคลื่อนไหวที่ทำงานด้วยการปัดของ CSS: ไทม์ไลน์ของมุมมอง

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ทำงานตามการเลื่อนได้โดยอ่านบทความนี้ที่มีรายละเอียดทั้งหมด หรือไปที่ scroll-driven-animations.style ซึ่งมีตัวอย่างมากมาย

ไฟล์แนบของไทม์ไลน์ที่เลื่อนออกไป

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

แหล่งที่มา

เมื่อใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS กลไกการค้นหาเพื่อหาตัวเลื่อนการควบคุมจะเดินหน้า DOM Tree ขึ้น โดยจำกัดให้เลื่อนเฉพาะระดับบนเท่านั้น แต่บ่อยครั้งที่องค์ประกอบที่ต้องแสดงภาพเคลื่อนไหวไม่ใช่องค์ประกอบย่อยของ Scroller แต่เป็นองค์ประกอบที่อยู่ในซับต้นไม้อื่นโดยสิ้นเชิง

หากต้องการให้องค์ประกอบภาพเคลื่อนไหวค้นหาไทม์ไลน์การเลื่อนที่มีชื่อขององค์ประกอบที่ไม่ใช่บรรพบุรุษ ให้ใช้พร็อพเพอร์ตี้ timeline-scope ในองค์ประกอบหลักที่แชร์ ซึ่งจะทำให้ scroll-timeline หรือ view-timeline ที่กำหนดไว้ซึ่งมีชื่อดังกล่าวแนบกับรายการนี้ได้ ซึ่งทำให้มีขอบเขตที่กว้างขึ้น เมื่อเปิดใช้งานแล้ว ผู้เผยแพร่โฆษณาย่อยทุกรายของผู้เผยแพร่โฆษณาหลักที่แชร์สามารถใช้ไทม์ไลน์ที่มีชื่อนั้นได้

การแสดงภาพแผนผังย่อย DOM ที่มีขอบเขตไทม์ไลน์ที่ใช้กับระดับบนสุดที่แชร์ — เมื่อมีการประกาศ `timeline-scope` ไว้ในระดับบนสุดที่แชร์ คุณจะเห็น `scroll-timeline` ที่ประกาศไว้ในตัวเลื่อนอยู่ข้างองค์ประกอบที่ใช้เป็น `animation-timeline`

หน้าจอสาธิต

การสาธิตการใช้งานแบบสด

การสาธิตภาพเคลื่อนไหวที่ทำงานตามการเลื่อนของ CSS: การแนบไทม์ไลน์ที่เลื่อนเวลา

เรียนรู้เพิ่มเติมเกี่ยวกับ timeline-scope

ภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง

ความสามารถใหม่อีกอย่างหนึ่งในปี 2023 คือความสามารถในการสร้างภาพเคลื่อนไหวแบบไม่ต่อเนื่อง เช่น การสร้างภาพเคลื่อนไหวจาก display: none ไปยัง display: none ตั้งแต่ Chrome 116 คุณจะใช้ display และ content-visibility ในกฎเฟรมหลักได้ นอกจากนี้ คุณยังเปลี่ยนพร็อพเพอร์ตี้แบบไม่ต่อเนื่องที่จุด 50% แทนที่จะเป็นจุด 0% ได้ด้วย ซึ่งทำได้โดยใช้พร็อพเพอร์ตี้ transition-behavior โดยใช้คีย์เวิร์ด allow-discrete หรือในพร็อพเพอร์ตี้ transition เป็นทางลัด

ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง Screencast

ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง สาธิต

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนภาพเคลื่อนไหวแบบไม่ต่อเนื่อง

@starting-style

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

แหล่งที่มา

กฎ CSS @starting-style สร้างขึ้นจากความสามารถใหม่ๆ ของเว็บสำหรับภาพเคลื่อนไหวจาก display: none ไปยัง display: none กฎนี้มอบวิธีกำหนดสไตล์ "ก่อนเปิด" ให้กับองค์ประกอบซึ่งเบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบจะเปิดในหน้า ซึ่งมีประโยชน์มากสำหรับภาพเคลื่อนไหวของรายการที่เข้ามา และสำหรับภาพเคลื่อนไหวในองค์ประกอบต่างๆ เช่น รายการแบบป๊อปอัปหรือกล่องโต้ตอบ นอกจากนี้ ฟีเจอร์นี้ยังมีประโยชน์เมื่อคุณสร้างองค์ประกอบและต้องการเปิดใช้ภาพเคลื่อนไหวขององค์ประกอบนั้น มาดูตัวอย่างต่อไปนี้ซึ่งทำให้แอตทริบิวต์ popover (ดูส่วนถัดไป) ปรากฏขึ้นและเข้าสู่เลเยอร์บนสุดอย่างราบรื่นจากภายนอกวิวพอร์ต

@starting-style Screencast

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

กฎแนวนอนในรายการที่เลือก

การเปลี่ยนแปลงเล็กๆ น้อยๆ ของ HTML ใน Chrome และ Safari ในปีนี้คือความสามารถในการเพิ่มองค์ประกอบกฎแนวนอน (แท็ก <hr>) ลงในองค์ประกอบ <select> เพื่อช่วยแบ่งเนื้อหาให้เห็นชัดเจน ก่อนหน้านี้ การวางแท็ก <hr> ลงในรายการตัวเลือกจะไม่แสดงผล แต่ปีนี้ทั้ง Safari และ Chrome รองรับฟีเจอร์นี้ ซึ่งช่วยให้แยกเนื้อหาภายในองค์ประกอบ <select> ได้ดียิ่งขึ้น

เลือกภาพหน้าจอ

ภาพหน้าจอของ HR ใน Select ที่มีธีมสว่างและธีมมืดใน Chrome

เลือก "การสาธิตการใช้งานแบบสด"

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ hr ใน select

:user-valid and invalid pseudo classes

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

แหล่งที่มา

:user-valid และ :user-invalid ทำงานได้อย่างเสถียรในทุกเบราว์เซอร์ในปีนี้ โดยมีลักษณะการทำงานคล้ายกับคลาสจำลอง :valid และ :invalid แต่จะจับคู่กับตัวควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสำคัญเท่านั้น ตัวควบคุมแบบฟอร์มที่ต้องกรอกและว่างเปล่าจะตรงกับ :invalid แม้ว่าผู้ใช้จะยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม การควบคุมเดียวกันจะไม่ตรงกับ :user-invalid จนกว่าผู้ใช้จะเปลี่ยนอินพุตและปล่อยไว้ในสถานะไม่ถูกต้อง

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

:ผู้ใช้-* Screencast

:user-* การสาธิตการใช้งานแบบสด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้องค์ประกอบจำลองการตรวจสอบแบบฟอร์ม user-*

Accordion พิเศษ

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

รูปแบบ UI ทั่วไปบนเว็บคือคอมโพเนนต์หีบเพลง หากต้องการใช้รูปแบบนี้ คุณต้องรวมองค์ประกอบ <details> 2-3 รายการเข้าด้วยกัน โดยมักจัดกลุ่มองค์ประกอบเหล่านั้นเข้าด้วยกันเพื่อแสดงว่าเข้ากันได้

ฟีเจอร์ใหม่ใน Chrome 120 คือการรองรับแอตทริบิวต์ name ในองค์ประกอบ <details> เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details> หลายรายการที่มีค่า name เดียวกันจะสร้างกลุ่มความหมาย คุณเปิดองค์ประกอบในกลุ่มได้สูงสุดครั้งละ 1 รายการเท่านั้น เมื่อคุณเปิดองค์ประกอบ <details> รายการใดรายการหนึ่งจากกลุ่ม องค์ประกอบที่เปิดไว้ก่อนหน้านี้จะปิดโดยอัตโนมัติ กล่องคีย์บอร์ดประเภทนี้เรียกว่ากล่องคีย์บอร์ดเฉพาะ

เดโม Accordion สุดพิเศษ

องค์ประกอบ <details> ที่เป็นส่วนหนึ่งของแอคคอร์เดียนพิเศษไม่จำเป็นต้องเป็นองค์ประกอบข้างเคียง ซึ่งอาจกระจัดกระจายอยู่ทั่วเอกสาร

สรุป

CSS ได้รับความนิยมอย่างมากในช่วง 2-3 ปีที่ผ่านมา โดยเฉพาะอย่างยิ่งในช่วงปี 2023 หากคุณเพิ่งเริ่มใช้ CSS หรือต้องการทบทวนพื้นฐาน โปรดดูหลักสูตรเรียนรู้ CSS ฟรีของเรา รวมถึงหลักสูตรอื่นๆ ฟรีที่มีให้ที่ web.dev

เราขอให้คุณมีความสุขในช่วงเทศกาลและหวังว่าคุณจะมีโอกาสได้นำฟีเจอร์ CSS และ UI ใหม่ๆ ที่ยอดเยี่ยมเหล่านี้ไปใช้กับงานของคุณในเร็วๆ นี้

ทีม DevRel ของ UI ของ Chrome

Una Kravets

Bramus

Adam Argyle

สรุป CSS: 2023

CSS Wrapped: 2023

ภาพหน้าจอการสาธิตขอบเขต

การสาธิตการใช้งาน Scope แบบสด

การฝัง Screencast

การสาธิตการฝังแบบสด

Screencast ย่อย

การสาธิต Subgrid แบบสด

การพิมพ์

ภาพหน้าจอจดหมายเริ่มต้น

การสาธิตตัวอักษรเริ่มต้น

Screencast แบบตัดข้อความ

การสาธิตการตัดข้อความแบบสด

Screencast ของ Color 4

การสาธิตสี 4

Screencast ของ color-mix()

การสาธิต color-mix()

Screencast ของ RCS

การสาธิต RCS แบบเรียลไทม์

@container Screencast

@container Demo

ภาพหน้าจอการค้นหาสไตล์

การสาธิตการค้นหาสไตล์

ภาพหน้าจอการสาธิต :has()

การสาธิตการใช้งานแบบสดของ :has()

:has() Screencast

:has() สาธิต

อัปเดต Screencast

อัปเดตการสาธิต

การเขียนสคริปต์ Screencast

การสาธิตการเขียนสคริปต์

Screencast แบบลดความโปร่งใส

การสาธิตการลดระดับการแชร์ข้อมูล

VT Screencast

VT Demo

Screencast แบบเชิงเส้น

การสาธิตการค่อยๆ เปลี่ยนแบบเชิงเส้น

Screencast แบบเลื่อน

การสาธิต Scrollend

SDA Screencast

การสาธิต SDA

Screencast การสาธิต SDA

การสาธิตการใช้งาน SDA แบบสด

หน้าจอสาธิต

การสาธิตการใช้งานแบบสด

ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง Screencast

ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง สาธิต

@starting-style Screencast

การสาธิต @starting-style

วางซ้อน Screencast

การสาธิตโฆษณาซ้อนทับแบบสด

Screencast แบบป๊อปอัป

การสาธิตแบบสดของ Popover

เลือกภาพหน้าจอ

เลือก "การสาธิตการใช้งานแบบสด"

:ผู้ใช้-* Screencast

:user-* การสาธิตการใช้งานแบบสด