สรุป CSS: 2023

CSS Wrapped: 2023

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

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

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

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

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

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

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

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

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

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

โปรดสังเกตป้าย Baseline ใหม่ข้างส่วนหัวของฟีเจอร์ ดูข้อมูลเพิ่มเติมที่นี่

• = เพิ่งพร้อมใช้งานในเบราว์เซอร์หลักทุกเวอร์ชันที่เสถียร

• = ความพร้อมใช้งานบางส่วนในเบราว์เซอร์หลักๆ

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

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

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

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

• 111
• 111
• 108
• 15.4

แหล่งที่มา

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

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

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

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

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

• 111
• 111
• 113
• 9

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือก nth-* แบบซับซ้อน

ขอบเขต

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

• 118
• 118
• 
• 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 แบบสด

การสาธิต CSS @scope

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @scope ในบทความ "วิธีใช้ @scope เพื่อจำกัดการเข้าถึงของตัวเลือก" ในบทความนี้ คุณจะได้ทราบเกี่ยวกับตัวเลือก :scope, วิธีที่ระบบจัดการความเฉพาะเจาะจง, ขอบเขตที่ไม่มีช่วงนำหน้า และวิธีที่@scopeส่งผลต่อการแสดงผลตามลำดับขั้น

การซ้อน

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

• 120
• 120
• 117
• 17.2

แหล่งที่มา

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

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

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

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

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

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

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

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

• 117
• 117
• 71
• 16

แหล่งที่มา

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

Screencast ย่อย

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

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

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

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

การพิมพ์

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

Initial-letter

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

• 110
• 110
• x
• 9

แหล่งที่มา

พร็อพเพอร์ตี้ 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)

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

• 111
• 111
• 113
• 15

แหล่งที่มา

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

• 111
• 111
• 113
• 15

แหล่งที่มา

ตั้งแต่ฮาร์ดแวร์ไปจนถึงซอฟต์แวร์ จาก 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

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

• 111
• 111
• 113
• 16.2

แหล่งที่มา

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

การค้นหาคอนเทนเนอร์ขนาด

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

• 105
• 105
• 110
• 16

แหล่งที่มา

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

หากต้องการใช้ฟีเจอร์นี้ ให้ตั้งค่าองค์ประกอบที่คุณกำลังค้นหาก่อน จากนั้นจึงใช้ @container กับพารามิเตอร์ขนาดเพื่อใช้รูปแบบ เช่นเดียวกับคำค้นหาสื่อ นอกจากการค้นหาคอนเทนเนอร์แล้ว คุณยังจะได้รับขนาดข้อความค้นหาคอนเทนเนอร์ด้วย ในการสาธิตต่อไปนี้ ระบบจะใช้ขนาดการค้นหาคอนเทนเนอร์ cqi (แสดงขนาดของคอนเทนเนอร์ในบรรทัด) เพื่อปรับขนาดส่วนหัวของการ์ด

@container Screencast

@container Demo

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

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

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

• 111
• 111
• x
• 18

แหล่งที่มา

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

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

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

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

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

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

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

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

• 105
• 105
• 121
• 15.4

แหล่งที่มา

เป็นเวลาเกือบ 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()

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

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

• 113
• 113
• 102
• 17

แหล่งที่มา

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

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

อัปเดต Screencast

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

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

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

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

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

• 120
• 120
• 113
• 17

แหล่งที่มา

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

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

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

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

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

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

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

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

• 118
• 118
• 
• x

แหล่งที่มา

อินเทอร์เฟซแบบไม่ทึบอาจทําให้ปวดศีรษะหรือทำให้มองเห็นได้ยากสำหรับผู้ที่มีปัญหาด้านการมองเห็นประเภทต่างๆ ด้วยเหตุนี้ Windows, macOS และ iOS จึงมีการตั้งค่าระบบที่สามารถลดหรือนำความโปร่งใสออกจาก UI ได้ คำค้นหาสื่อนี้สำหรับ prefers-reduced-transparency เหมาะกับคำค้นหาสื่ออื่นๆ ตามค่ากำหนดต่างๆ ซึ่งช่วยให้คุณมีความคิดสร้างสรรค์ขณะปรับเปลี่ยนให้เหมาะกับผู้ใช้

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

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

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

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

การโต้ตอบ

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

ดูทรานซิชัน

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

• 111
• 111
• x
• 18

แหล่งที่มา

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

หัวใจของ View Transitions API คือฟังก์ชัน document.startViewTranstion ผ่านฟังก์ชันที่อัปเดต DOM เป็นสถานะใหม่ แล้ว API จะจัดการทุกอย่างให้คุณ โดยจะใช้ภาพนิ่งก่อนและหลัง จากนั้นจะเปลี่ยนภาพนิ่ง 2 รูปนี้ เมื่อใช้ CSS คุณจะควบคุมสิ่งที่จะบันทึกและปรับแต่งลักษณะภาพนิ่งเหล่านี้ให้เป็นภาพเคลื่อนไหวได้ (ไม่บังคับ)

VT Screencast

VT Demo

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

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

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

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

• 113
• 113
• 112
• 17.2

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

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

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

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

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

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

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

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

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

• 114
• 114
• 109
• x

แหล่งที่มา

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

Screencast แบบเลื่อน

การสาธิต Scrollend

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

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

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

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

• 115
• 115
• 
• x

แหล่งที่มา

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนเป็นฟีเจอร์ที่น่าตื่นเต้นที่มีให้ใช้งานใน 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 ซึ่งมีตัวอย่างมากมาย

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

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

• 116
• 116
• x
• x

แหล่งที่มา

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

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

เมื่อมีการประกาศ 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

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

• 117
• 117
• 129
• 17.5

แหล่งที่มา

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

@starting-style Screencast

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @starting-style และภาพเคลื่อนไหวในรายการอื่นๆ

การวางซ้อน

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

• 117
• 117
• x
• x

แหล่งที่มา

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

วางซ้อน Screencast

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับโฆษณาซ้อนทับและภาพเคลื่อนไหวเพื่อออกอื่นๆ

คอมโพเนนต์

ปี 2023 เป็นปีสำคัญที่ผสมผสานองค์ประกอบรูปแบบและ HTML เข้าด้วยกัน โดยมี popover Landing Page รวมถึงงานมากมายที่ต้องทำเกี่ยวกับการวางตำแหน่งแท็ก Anchor และอนาคตของเมนูแบบเลื่อนลงการจัดรูปแบบ คอมโพเนนต์เหล่านี้ช่วยให้สร้างรูปแบบ UI ทั่วไปได้ง่ายขึ้นโดยไม่ต้องอาศัยไลบรารีเพิ่มเติมหรือสร้างระบบการจัดการสถานะของคุณเองตั้งแต่ต้นทุกครั้ง

ป๊อปอัป

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

• 114
• 114
• 125
• 17

แหล่งที่มา

Popover API ช่วยให้คุณสร้างองค์ประกอบที่วางอยู่ด้านบนของส่วนที่เหลือของหน้า ซึ่งอาจรวมถึงเมนู การเลือก และเคล็ดลับเครื่องมือ คุณสร้างป๊อปอัปง่ายๆ ได้โดยเพิ่มแอตทริบิวต์ popover และ id ลงในองค์ประกอบที่จะปรากฏขึ้น และเชื่อมต่อแอตทริบิวต์ id กับปุ่มเรียกใช้โดยใช้ popovertarget="my-popover" Popover API รองรับรายการต่อไปนี้

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

Screencast แบบป๊อปอัป

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

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

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

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

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

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

:user-valid and invalid pseudo classes

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

• 119
• 119
• 88
• 16.5

แหล่งที่มา

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

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

:ผู้ใช้-* Screencast

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

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

Accordion พิเศษ

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

• 120
• 120
• 130
• 17.2

รูปแบบ 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