สรุป CSS: 2023

ส่วนหัวที่ตัดของ CSS

CSS สิ้นสุดปี 2023

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

ว้าว ปี 2023 เป็นปีอันยิ่งใหญ่ของ CSS

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

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

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

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

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

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: 108
  • Safari: 15.4

แหล่งที่มา

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

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

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

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

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: 113
  • Safari: 9.

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

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

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

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

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

ขอบเขต

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

  • Chrome: 118.
  • ขอบ: 118
  • Firefox: อยู่หลังธง
  • Safari: 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 วิธีจัดการความจำเพาะ ขอบเขตที่ไม่มีการกำหนดล่วงหน้า และผลจาก Cascade ของ @scope

การฝัง

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

  • Chrome: 120
  • ขอบ: 120
  • Firefox: 117
  • Safari: 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

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

เปลี่ยนตัวเลือกการซ้อนกลุ่มแบบผ่อนคลายเพื่อเลือกผู้ชนะของการแข่งขัน

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

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

ตารางย่อย

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

  • Chrome: 117.
  • ขอบ: 117
  • Firefox: 71
  • Safari: 16.

แหล่งที่มา

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

Screencast ย่อย

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

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

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

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

การพิมพ์

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

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

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

  • Chrome: 110.
  • ขอบ: 110
  • Firefox: ไม่สนับสนุน
  • Safari: 9.

แหล่งที่มา

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

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

ภาพหน้าจอของการสาธิตการใช้ตัวอักษรเริ่มต้น

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

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

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

การตัดข้อความ: สร้างสมดุลและดูดี

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

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

ใส่ข้อความ Screencast

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

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

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

สี

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

พื้นที่สี HD (ระดับสี 4)

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: 113
  • Safari: 15.

แหล่งที่มา

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: 113
  • Safari: 15.

แหล่งที่มา

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

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

Screencast สีที่ 4

การสาธิตสี 4

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับสี 4 และช่องว่างสี

ฟังก์ชันมิกซ์สี

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: 113
  • Safari: 16.2

แหล่งที่มา

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

color-mix() Screencast

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

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

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

  • Chrome: 105
  • ขอบ: 105
  • Firefox: 110
  • Safari: 16.

แหล่งที่มา

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

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

@container Screencast

การสาธิต @container

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

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

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: ไม่สนับสนุน
  • Safari: 18.

แหล่งที่มา

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

ภาพหน้าจอของการค้นหารูปแบบ

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

การสาธิตการค้นหารูปแบบ

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

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

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

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

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

  • Chrome: 105
  • ขอบ: 105
  • Firefox: 121
  • Safari: 15.4

แหล่งที่มา

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

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

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

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

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

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

:has() Screencast

:has() สาธิต

การสาธิต CSS :has(): แท่นชาร์จ

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

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

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

  • Chrome: 113
  • ขอบ: 113
  • Firefox: 102
  • Safari: 17.

แหล่งที่มา

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

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

อัปเดต Screencast

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

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

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

การค้นหาสื่อการเขียน

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

  • Chrome: 120
  • ขอบ: 120
  • Firefox: 113
  • Safari: 17.

แหล่งที่มา

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

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

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

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

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

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

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

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

  • Chrome: 118.
  • ขอบ: 118
  • Firefox: อยู่หลังธง
  • Safari: ไม่รองรับ

แหล่งที่มา

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

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

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

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

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

การโต้ตอบ

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

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

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

  • Chrome: 111.
  • ขอบ: 111
  • Firefox: ไม่สนับสนุน
  • Safari: 18.

แหล่งที่มา

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

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

Screencast ของ VT

การสาธิต VT

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

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

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

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

  • Chrome: 113
  • ขอบ: 113
  • Firefox: 112
  • Safari: 17.2

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

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

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

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

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

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

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

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

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

  • Chrome: 114
  • ขอบ: 114
  • Firefox: 109
  • Safari: ไม่รองรับ

แหล่งที่มา

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

Screencast ของ Scrollend

การสาธิต Scrollend

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

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

ภาพเคลื่อนไหวแบบเลื่อน

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

  • Chrome: 115
  • ขอบ: 115
  • Firefox: อยู่หลังธง
  • Safari: ไม่รองรับ

แหล่งที่มา

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

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

Screencast แบบ SDA

การสาธิต SDA

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

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

Screencast การสาธิต SDA

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

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

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

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

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

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

  • Chrome: 116
  • ขอบ: 116
  • Firefox: ไม่สนับสนุน
  • Safari: ไม่รองรับ

แหล่งที่มา

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

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

วันที่ การแสดงภาพแผนผังย่อย DOM ที่มีขอบเขตไทม์ไลน์ที่ใช้กับระดับบนสุดที่แชร์
เมื่อประกาศ 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

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

  • Chrome: 117.
  • ขอบ: 117
  • Firefox: 129
  • Safari: 17.5

แหล่งที่มา

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

Screencast แบบ @starting

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

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

โฆษณาซ้อนทับ

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

  • Chrome: 117.
  • ขอบ: 117
  • Firefox: ไม่สนับสนุน
  • Safari: ไม่รองรับ

แหล่งที่มา

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

วางซ้อน Screencast

การสาธิตโอเวอร์เลย์แบบสด

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

ส่วนประกอบ

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

ป๊อปโอเวอร์

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

  • Chrome: 114
  • ขอบ: 114
  • Firefox: 125
  • Safari: 17.

แหล่งที่มา

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

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

Screencast ใน Popover

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

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

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

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

ภาพหน้าจอของชั่วโมงที่เลือกด้วยธีมสว่างและมืดใน Chrome

เลือกการสาธิตแบบสด

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

:คลาสจำลองที่ใช้ได้และไม่ถูกต้อง

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

  • Chrome: 119
  • ขอบ: 119
  • Firefox: 88
  • Safari: 16.5

แหล่งที่มา

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

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

:ผู้ใช้-* Screencast

:user-* การสาธิตแบบสด

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

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

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

  • Chrome: 120
  • ขอบ: 120
  • Firefox: 130
  • Safari: 17.2

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

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

การสาธิตสุดพิเศษสำหรับหีบเพลง

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

สรุป

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

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

⇾ ทีม Chrome UI

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub