สรุป CSS: 2023

ส่วนหัวของ CSS Wrapped

สรุป CSS ปี 2023

ข้ามไปยังเนื้อหา

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

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

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

พื้นฐานด้านสถาปัตยกรรม

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

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

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

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

การเลือก nth-* ที่ซับซ้อน

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

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

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

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

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

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

ขอบเขต

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: 146.
  • Safari: 17.4.

Source

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 Live

การสาธิต @scopeCSS

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

การซ้อน

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

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

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

การสาธิตการใช้งานการซ้อน

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

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

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

ตารางย่อย

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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

Screencast ของตารางย่อย

การสาธิตการใช้งาน Subgrid

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

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

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

การพิมพ์

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

Initial-letter

Browser Support

  • Chrome: 110.
  • Edge: 110.
  • Firefox: not supported.
  • Safari: 9.

Source

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

ตอนนี้ CSS และสีสามารถทำสิ่งต่อไปนี้ได้ - ตรวจสอบว่าฮาร์ดแวร์หน้าจอของผู้ใช้รองรับสี HDR แบบช่วงกว้างหรือไม่ - ตรวจสอบว่าเบราว์เซอร์ของผู้ใช้เข้าใจไวยากรณ์สี เช่น Oklch หรือ Display P3 หรือไม่ - ระบุสี HDR ใน Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ และอื่นๆ - สร้างการไล่ระดับสีด้วยสี HDR - แทรกการไล่ระดับสีในพื้นที่สีอื่น - ผสมสีด้วย color-mix() - สร้างตัวแปรสีด้วยไวยากรณ์สีที่เกี่ยวข้อง

Screencast สี 4

การสาธิตสี 4

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

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

ฟังก์ชันผสมสี

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Source

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

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

@container Screencast

@container Demo

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

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

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

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

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

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

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

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

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

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

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

การสาธิต CSS :has(): การ์ดที่ไม่มี/มีรูปภาพ

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

:has() Screencast

การสาธิต :has()

การสาธิต CSS :has(): Dock

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

อัปเดต Media Query

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

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

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

อัปเดต Screencast

อัปเดตเดโม

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

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

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

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 113.
  • Safari: 17.

Source

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

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

การเขียนสคริปต์สำหรับ Screencast

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

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

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

การค้นหาสื่อที่มีความโปร่งใสน้อยลง

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

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

Screencast ความโปร่งใสที่ลดลง

การสาธิตความโปร่งใสที่ลดลง

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

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

การโต้ตอบ

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

การเปลี่ยนมุมมอง

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

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

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

VT Screencast

การสาธิต VT

การสาธิต View Transitions

View Transitions API สำหรับ Single Page Application เปิดตัวใน Chrome 111 ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมอง

ฟังก์ชันการเปลี่ยนเชิงเส้น

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

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

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

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

Screencast ที่มีการเปลี่ยนผ่านเชิงเส้น

การสาธิตการเปลี่ยนเชิงเส้น

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

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

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: 26.2.

Source

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

Screencast ของ Scrollend

การสาธิต Scrollend

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

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

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

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

Screencast ของ SDA

การสาธิต SDA

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

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

Screencast การสาธิต SDA

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

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

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

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

การแนบลำดับเวลาที่เลื่อนออกไป

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: not supported.
  • Safari: 26.

Source

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

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

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

Screencast การสาธิต

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

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

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

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

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

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

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

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

@starting-style

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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

@starting-style Screencast

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

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

ซ้อนทับ

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

วางซ้อน Screencast

การสาธิตการใช้งานแบบสดของฟีเจอร์วางซ้อน

ดูข้อมูลเพิ่มเติมเกี่ยวกับภาพซ้อนทับและภาพเคลื่อนไหวอื่นๆ ที่ใช้เมื่อออกจากแอป

คอมโพเนนต์

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

ป๊อปโอเวอร์

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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

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

Screencast ป๊อปโอเวอร์

การสาธิตการใช้งานป๊อปโอเวอร์แบบสด

เส้นแนวนอนในองค์ประกอบ Select

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

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

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

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

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

:user-valid และคลาสเทียมที่ไม่ถูกต้อง

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Source

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

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

:user-* Screencast

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

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

แอคคอร์เดียนสุดพิเศษ

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

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

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

การสาธิต Accordion สุดพิเศษ

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

สรุป

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

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

⇾ ทีม DevRel ของ UI ใน Chrome

Una Kravets
Bramus
Adam Argyle