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

สรุป CSS: 2023

CSS Wrapped: 2023

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

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

การจัดวางตัวอักษร
Initial-letter
สมดุล/ความเรียบร้อยของการตัดข้อความขึ้นบรรทัดใหม่

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

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

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

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

ว้าว ปี 2023 เป็นปีที่สำคัญอย่างยิ่งสำหรับ CSS

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

การสาธิตการใช้งานกริดย่อยแบบเรียลไทม์

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

ตารางย่อยมีประโยชน์อย่างยิ่งในการปรับแนวแถว/คอลัมน์ย่อยให้สอดคล้องกับเนื้อหาแบบไดนามิกของแถว/คอลัมน์ย่อยอื่นๆ วิธีนี้ช่วยให้นักเขียนโฆษณา นักเขียน 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

การสาธิต Color 4

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

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

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

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

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

แหล่งที่มา

ข้อความค้นหาสื่อ 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 Query นี้เมื่อใด

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

การสาธิต Linear-easing

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

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

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

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

แหล่งที่มา

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

Screencast แบบเลื่อน

การสาธิตการเลื่อน

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

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

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

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

แหล่งที่มา

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

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

SDA Screencast

สาธิต SDA

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

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

หน้าจอการสาธิต SDA

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

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

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

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

ไฟล์แนบไทม์ไลน์ที่เลื่อนเวลา

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

แหล่งที่มา

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

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

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

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

:user-* Screencast

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

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

Accordion พิเศษ

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

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

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

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

องค์ประกอบ <details> ที่อยู่ใน Accordion แบบพิเศษไม่จำเป็นต้องเป็นองค์ประกอบพี่น้อง โดยอาจกระจายอยู่ในเอกสาร

สรุป

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 ตารางย่อย

การสาธิตการใช้งานกริดย่อยแบบเรียลไทม์

การพิมพ์

ภาพหน้าจอตัวอักษรเริ่มต้น

การสาธิตตัวอักษรตัวแรก

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

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

Screencast ของ Color 4

การสาธิต Color 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 แบบการไล่ระดับเชิงเส้น

การสาธิต Linear-easing

Screencast แบบเลื่อน

การสาธิตการเลื่อน

SDA Screencast

สาธิต SDA

หน้าจอการสาธิต SDA

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

หน้าจอสาธิต

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

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

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

@starting-style Screencast

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

วางซ้อน Screencast

การสาธิตการใช้งานแบบสดของการวางซ้อน

Screencast แบบป๊อปอัป

การสาธิตป๊อปอัปแบบเรียลไทม์

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

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

:user-* Screencast

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