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

สรุป CSS: 2023

สรุป CSS ปี 2023

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

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

การออกแบบตัวอักษร
Initial-letter
การตัดข้อความขึ้นบรรทัดใหม่/การจัดรูปแบบข้อความ

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

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

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

คอมโพเนนต์
ป๊อปโอเวอร์
ชม. ในบางรายการ
คลาสเทียมที่ผู้ใช้กำหนดว่าถูกต้อง/ไม่ถูกต้อง
ออร์แกนสุดพิเศษ

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

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

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

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

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

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

Browser Support

Source

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

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

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

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

Browser Support

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

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

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

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

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

ขอบเขต

Browser Support

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 Live

การสาธิต @scopeCSS

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

การซ้อน

Browser Support

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

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

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

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

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

Subgrid

Browser Support

Source

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

Screencast ของ Subgrid

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

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

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

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

การพิมพ์

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

Initial-letter

Browser Support

Source

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

Browser Support

Source

Browser Support

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

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% ไวยากรณ์นี้จะช่วยให้คุณมีเครื่องมือที่มีประโยชน์สำหรับการกำหนดธีม ตัวแปรแบบ Just-In-Time และอื่นๆ

ดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์สีสัมพัทธ์

การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์

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

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

Browser Support

Source

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

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

@container Screencast

การสาธิต @container

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

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

Browser Support

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

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

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

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

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

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

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

Browser Support

Source

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

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

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

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

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

Screencast ของ :has()

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

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

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

อัปเดต Media Query

Browser Support

Source

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

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

อัปเดต Screencast

อัปเดตเดโม

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

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

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

Browser Support

Source

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

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

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

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

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

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

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

Browser Support

Source

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

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

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

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

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

การโต้ตอบ

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

ดูการเปลี่ยนฉาก

Browser Support

Source

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

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

VT Screencast

การสาธิต VT

การสาธิต View Transitions

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

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

Browser Support

Source

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

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

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

Screencast แบบ Linear-easing

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

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

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

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

Browser Support

Source

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

Screencast ของ Scrollend

การสาธิต Scrollend

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

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

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

Browser Support

Source

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

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

Screencast ของ SDA

การสาธิต SDA

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

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

Screencast การสาธิต SDA

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

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

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

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

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

Browser Support

Source

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

Source

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

@starting-style Screencast

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

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

ซ้อนทับ

Browser Support

Source

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

วางซ้อน Screencast

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

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

คอมโพเนนต์

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

Browser Support

Source

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

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

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

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

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

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

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

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

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

Browser Support

Source

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

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

:user-* Screencast

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

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

ออร์แกนสุดพิเศษ

Browser Support

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

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

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

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

สรุป

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

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

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

Una Kravets

Bramus

Adam Argyle

สรุป CSS: 2023 จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

สรุป CSS ปี 2023

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

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

การฝัง Screencast

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

Screencast ของ Subgrid

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

การพิมพ์

ภาพหน้าจอตัวอักษรแรก

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

Screencast ที่ตัดข้อความ

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

Screencast สี 4

การสาธิตสี 4

Screencast ของ color-mix()

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

Screencast ของ RCS

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

@container Screencast

การสาธิต @container

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

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

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

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

Screencast ของ :has()

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

อัปเดต Screencast

อัปเดตเดโม

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

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

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

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

VT Screencast

การสาธิต VT

Screencast แบบ Linear-easing

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

Screencast ของ Scrollend

การสาธิต Scrollend

Screencast ของ SDA

การสาธิต SDA

Screencast การสาธิต SDA

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

Screencast การสาธิต

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

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

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

@starting-style Screencast

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

วางซ้อน Screencast

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

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

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

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

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

:user-* Screencast

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

สรุป CSS: 2023