สรุป CSS ในปี 2023
ข้ามไปยังเนื้อหา:
- การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
- การค้นหาคอนเทนเนอร์
- การค้นหารูปแบบ
- :มีเครื่องมือเลือก
- อัปเดตคิวรี่สื่อ
- คิวรี่สื่อสคริปต์
- การค้นหาสื่อเพื่อความโปร่งใส
ว้าว ปี 2023 เป็นปีที่ยอดเยี่ยมสำหรับ CSS
ตั้งแต่ #Interop2023 ไปจนถึงหน้า Landing Page ใหม่ๆ มากมายใน CSS และ UI ที่เปิดโอกาสให้นักพัฒนาซอฟต์แวร์มีความสามารถที่ครั้งหนึ่งเคยคิดว่าเป็นไปไม่ได้ในแพลตฟอร์มบนเว็บ ปัจจุบันเบราว์เซอร์สมัยใหม่ทุกเบราว์เซอร์รองรับคำค้นหาคอนเทนเนอร์ ตารางย่อย ตัวเลือก :has()
และพื้นที่สีและฟังก์ชันใหม่ๆ มากมายนับไม่ถ้วน เรารองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนของ CSS เท่านั้น และการสร้างภาพเคลื่อนไหวที่ราบรื่นระหว่างมุมมองเว็บต่างๆ ด้วยการเปลี่ยนมุมมอง ยิ่งไปกว่านั้น เรายังมีพื้นฐานใหม่ๆ มากมายที่นำมาใช้เพื่อให้นักพัฒนาซอฟต์แวร์ได้รับประสบการณ์การใช้งานที่ดีขึ้น เช่น การซ้อน CSS และรูปแบบที่กำหนดขอบเขต
ปีที่ผ่านมานั้นสุดๆ ไปเลย เราจึงต้องการสิ้นสุดปีแห่งความสำเร็จนี้ในการเฉลิมฉลองและรับทราบถึงความทุ่มเทของทุกนักพัฒนาเบราว์เซอร์และชุมชนเว็บที่ทำให้ทั้งหมดนี้เป็นจริงขึ้นมาได้
รากฐานสถาปัตยกรรม
เรามาเริ่มที่การอัปเดตภาษาและความสามารถของ CSS หลักกัน ฟีเจอร์เหล่านี้เป็นฟีเจอร์ที่เป็นรากฐานของวิธีเขียนและจัดระเบียบสไตล์ และช่วยให้นักพัฒนาแอปมีพลังที่ยอดเยี่ยม
ฟังก์ชันตรีโกณมิติ
Chrome 111 เพิ่มการรองรับฟังก์ชันตรีโกณมิติ sin()
, cos()
, tan()
, asin()
, acos()
, atan()
และ atan2()
ทำให้ฟังก์ชันเหล่านี้พร้อมใช้งานในเครื่องมือหลักๆ ทั้งหมด ฟังก์ชันเหล่านี้มีประโยชน์มากสำหรับวัตถุประสงค์ของภาพเคลื่อนไหวและเลย์เอาต์ ตัวอย่างเช่น ตอนนี้คุณสามารถจัดองค์ประกอบในวงกลมรอบจุดศูนย์กลางที่เลือกได้ง่ายขึ้นมาก
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันตรีโกณมิติใน CSS
การเลือก n-* ที่ซับซ้อน
การสนับสนุนเบราว์เซอร์
- 111
- 111
- 113
- 9
ตัวเลือกคลาส Pseudo ของ :nth-child()
ช่วยให้คุณเลือกองค์ประกอบใน DOM ตามดัชนีได้ การใช้An+B
ไวยากรณ์สั้นๆ ช่วยให้คุณควบคุมองค์ประกอบที่คุณต้องการเลือกอย่างละเอียดได้
โดยค่าเริ่มต้น การกด :nth-*()
จะนำองค์ประกอบย่อยทั้งหมดมาพิจารณา สำหรับ Chrome 111 คุณจะเลือกส่งรายการตัวเลือกไปยัง :nth-child()
และ :nth-last-child()
หรือไม่ก็ได้ วิธีนี้ช่วยให้คุณกรองรายการย่อยไว้ล่วงหน้าได้ก่อนที่ An+B
จะดำเนินการดังกล่าว
ในการสาธิตต่อไปนี้ ตรรกะ 3n+1
จะใช้กับตุ๊กตาขนาดเล็กเท่านั้นโดยการกรองออกล่วงหน้าโดยใช้ of .small
ใช้เมนูแบบเลื่อนลงเพื่อเปลี่ยนตัวเลือกที่ใช้แบบไดนามิก
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือก nth-* ที่ซับซ้อน
ขอบเขต
การสนับสนุนเบราว์เซอร์
- 118
- 118
- x
- 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
ได้ในบทความ "วิธีใช้ @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
การสาธิตการใช้งาน Nesting แบบสด
การซ้อนสามารถลดน้ำหนักของสไตล์ชีต ลดค่าใช้จ่ายของตัวเลือกที่เกิดซ้ำ และรวมสไตล์ของคอมโพเนนต์ไว้ในที่เดียว ไวยากรณ์เปิดตัวครั้งแรกโดยมีข้อจำกัดการใช้งาน &
ในที่ต่างๆ แต่ถูกยกเลิกด้วยการอัปเดตไวยากรณ์ที่ผ่อนคลายที่ซ้อนกัน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการซ้อน
ตารางย่อย
CSS subgrid
ช่วยให้คุณสร้างตารางกริดที่ซับซ้อนขึ้นโดยมีการจัดแนวระหว่างเลย์เอาต์ย่อยที่ดีขึ้นได้ วิธีนี้จะช่วยให้ตารางกริดที่อยู่ในตารางกริดอีกตารางหนึ่งใช้แถวและคอลัมน์ของตารางกริดด้านนอกเป็นของตัวเองได้ โดยใช้ subgrid
เป็นค่าสำหรับแถวหรือคอลัมน์ของตารางกริด
Screencast แบบย่อย
การสาธิต Subgrid แบบสด
ตารางย่อยมีประโยชน์อย่างยิ่งสำหรับการจัดแนวข้างเคียงให้สัมพันธ์กับเนื้อหาแบบไดนามิกของกันและกัน วิธีนี้จะช่วยให้ก็อปปี้ไรท์เตอร์ ผู้เขียน UX และนักแปลพยายามสร้างสำเนาโปรเจ็กต์ที่ "ลงตัว" ในเลย์เอาต์ได้ เมื่อใช้ตารางกริดย่อย คุณจะปรับเลย์เอาต์ให้พอดีกับเนื้อหาได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับตารางย่อย
การพิมพ์
การออกแบบตัวอักษรบนเว็บมีการอัปเดตที่สำคัญ 2-3 รายการในปี 2023 การเพิ่มประสิทธิภาพแบบต่อเนื่องที่ดีอย่างยิ่งคือพร็อพเพอร์ตี้ text-wrap
คุณสมบัตินี้ช่วยให้สามารถปรับเลย์เอาต์ของตัวอักษร ซึ่งสร้างขึ้นในเบราว์เซอร์โดยไม่ต้องเขียนสคริปต์เพิ่มเติม บอกลาความยาวของบรรทัดที่ไม่คุ้นเคยและมาพบกับแบบอักษรที่คาดเดาได้มากกว่าเดิม
ตัวอักษรเบื้องต้น
ตั้งแต่ช่วงต้นปีใน Chrome 110 พร็อพเพอร์ตี้ initial-letter
เป็นฟีเจอร์ CSS ขนาดเล็กแต่ทรงพลังซึ่งจะกำหนดการจัดรูปแบบตำแหน่งของตัวอักษรเริ่มต้น คุณจัดตำแหน่งตัวอักษรในสถานะยกขึ้นได้ พร็อพเพอร์ตี้ยอมรับอาร์กิวเมนต์ 2 รายการ ได้แก่ อาร์กิวเมนต์แรกสำหรับวางตัวอักษรในย่อหน้าที่เกี่ยวข้องในระดับลึกเท่าใด และอาร์กิวเมนต์ที่ 2 คือการเพิ่มตัวอักษรไว้เหนือย่อหน้า คุณยังสามารถทำทั้ง 2 อย่างพร้อมกันได้ ดังเช่นในการสาธิตต่อไปนี้
ภาพหน้าจอตัวอักษรเริ่มต้น
การสาธิตแบบตัวอักษรเริ่มต้น
ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอักษรแรกเริ่ม
text-wrap: สมดุลและน่ารัก
ในฐานะนักพัฒนาซอฟต์แวร์ คุณจะไม่ทราบขนาดสุดท้าย ขนาดแบบอักษร หรือแม้กระทั่งภาษาของบรรทัดแรกหรือย่อหน้า ตัวแปรทั้งหมดที่จำเป็นสำหรับการตัดข้อความที่มีประสิทธิภาพและสวยงามจะอยู่ในเบราว์เซอร์ เนื่องจากเบราว์เซอร์ทราบปัจจัยทั้งหมด เช่น ขนาดแบบอักษร ภาษา และพื้นที่ที่จัดสรรไว้ เบราว์เซอร์นี้จึงเหมาะสมอย่างยิ่งสำหรับการจัดการรูปแบบข้อความขั้นสูงและคุณภาพสูง
ซึ่งเป็นที่มาของเทคนิคการตัดข้อความแบบใหม่ 2 แบบ ได้แก่ เทคนิค balance
และอีก pretty
แบบ ค่า balance
จะพยายามสร้างบล็อกข้อความที่กลมกลืนกันในขณะที่ pretty
พยายามป้องกันเด็กกำพร้าและดูแลให้มีเครื่องหมายยัติภังค์ที่เหมาะสม งานทั้งสองแบบนี้มักทำกันด้วยมือ และเป็นอะไรที่น่าทึ่งมากที่ได้ทำงานให้กับเบราว์เซอร์และทำงานได้กับภาษาใดๆ ที่แปล
Screencast ที่มีการตัดข้อความ
การสาธิตการใช้การตัดข้อความแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับ 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 สี 4
การสาธิตสี 4
เรียนรู้เพิ่มเติมเกี่ยวกับสี 4 และพื้นที่สี
ฟังก์ชันผสมสี
การผสมสีเป็นงานที่คลาสสิกและ CSS ก็ทำได้เช่นกันในปี 2023 คุณไม่เพียงสามารถผสมสีขาวหรือดำให้เป็นสีเดียวกันแต่ยังต้องโปร่งใส และทั้งหมดนี้จะทำในพื้นที่สีใดก็ได้ที่คุณเลือก ซึ่งเป็นคุณลักษณะสีพื้นฐานและคุณลักษณะสีขั้นสูง
สี-ผสม() Screencast
color-mix() การสาธิต
คุณสามารถมอง 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
ที่มีพารามิเตอร์ขนาดเพื่อใช้รูปแบบในลักษณะเดียวกับคำค้นหาสื่อ คุณจะได้รับขนาดการค้นหาคอนเทนเนอร์ควบคู่ไปกับการค้นหาคอนเทนเนอร์ ในการสาธิตต่อไปนี้ มีการใช้ขนาดการค้นหาคอนเทนเนอร์ cqi
(แสดงขนาดของคอนเทนเนอร์แบบอินไลน์) เพื่อกำหนดขนาดส่วนหัวของการ์ด
@container Screencast
การสาธิต @container
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การค้นหาคอนเทนเนอร์
จัดรูปแบบการค้นหาคอนเทนเนอร์
พบการใช้งานการค้นหารูปแบบบางส่วนใน Chrome 111 การค้นหารูปแบบช่วยให้คุณค้นหาค่าของคุณสมบัติที่กำหนดเองในองค์ประกอบระดับบนสุดได้เมื่อใช้ @container style()
เช่น ค้นหาหากมีค่าของพร็อพเพอร์ตี้ที่กำหนดเอง หรือตั้งเป็นค่าที่เจาะจง เช่น @container style(--rain: true)
ภาพหน้าจอการค้นหารูปแบบ
การสาธิตการค้นหารูปแบบ
แม้ว่าสิ่งนี้จะฟังดูคล้ายกับการใช้ชื่อคลาสใน CSS แต่การค้นหารูปแบบก็มีข้อดีบางอย่าง อย่างแรกคือเมื่อใช้การค้นหารูปแบบ คุณสามารถอัปเดตค่าใน CSS ตามความจำเป็นสำหรับสถานะจำลอง นอกจากนี้ เมื่อใช้งานเวอร์ชันต่อๆ ไป คุณจะค้นหาช่วงของค่าได้เพื่อกําหนดรูปแบบที่ใช้ เช่น style(60 <= --weather <= 70)
และสไตล์ตามคู่พร็อพเพอร์ตี้-ค่า เช่น style(font-style: italic)
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การค้นหารูปแบบ
:has() option
นักพัฒนาซอฟต์แวร์ขอ "ตัวเลือกหลัก" ใน CSS มาเกือบ 20 ปีแล้ว ด้วยตัวเลือก :has()
ที่จัดส่งใน Chrome 105 ก็ทำให้พร้อมใช้งานแล้ว เช่น การใช้ .card:has(img.hero)
จะเลือกองค์ประกอบ .card
ที่มีรูปภาพหลักเป็นเด็ก
ภาพหน้าจอสาธิต :has()
การสาธิตการใช้งาน :has() แบบสด
เนื่องจาก :has()
ยอมรับรายการตัวเลือกแบบสัมพัทธ์เป็นอาร์กิวเมนต์ คุณจึงเลือกได้มากกว่าองค์ประกอบระดับบนสุด เมื่อใช้ combinator ต่างๆ ของ CSS ไม่เพียงแต่จะขึ้นไปถึงแผนผัง DOM เท่านั้น แต่ยังทำการเลือกแบบไซด์ทางได้อีกด้วย ตัวอย่างเช่น li:has(+ li:hover)
จะเลือกองค์ประกอบ <li>
ที่อยู่ก่อนองค์ประกอบ <li>
ที่วางเมาส์เหนือองค์ประกอบอยู่
:has() Screencast
การสาธิต :has()
ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS :has()
อัปเดตคิวรี่สื่อ
คำค้นหาสื่อ update
ให้คุณปรับ UI ตามอัตราการรีเฟรชของอุปกรณ์ได้ ฟีเจอร์นี้สามารถรายงานค่า fast
, slow
หรือ none
ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ต่างๆ
อุปกรณ์ส่วนใหญ่ที่คุณออกแบบไว้มีแนวโน้มที่จะมีอัตราการรีเฟรชที่เร็ว ซึ่งรวมถึงเดสก์ท็อปและอุปกรณ์เคลื่อนที่ส่วนใหญ่ eReader และอุปกรณ์ เช่น ระบบการชำระเงินพลังงานต่ำ อาจมีอัตราการรีเฟรชช้า การรู้ว่าอุปกรณ์ไม่สามารถจัดการภาพเคลื่อนไหวหรือการอัปเดตบ่อยๆ ได้ หมายความว่าคุณสามารถประหยัดการใช้งานแบตเตอรี่หรือการอัปเดตมุมมองที่ผิดพลาด
อัปเดต Screencast
อัปเดตการสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (อัปเดต)
คิวรี่สื่อสคริปต์
คุณสามารถใช้คิวรี่สื่อของสคริปต์เพื่อตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่ การทำเช่นนี้มีประโยชน์มากสำหรับการปรับปรุงแบบก้าวหน้า ก่อนการค้นหาสื่อนี้ กลยุทธ์ในการตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่คือการวางคลาส nojs
ใน HTML และนำออกด้วย JavaScript คุณนำสคริปต์เหล่านี้ออกเนื่องจาก CSS มีวิธีตรวจหา JavaScript และปรับให้เหมาะสมได้แล้ว
ดูวิธีเปิดและปิดใช้ JavaScript ในหน้าเว็บสำหรับการทดสอบผ่าน Chrome DevTools ที่นี่
การเขียนสคริปต์ Screencast
การสาธิตการเขียนสคริปต์
ลองพิจารณาการเปลี่ยนธีมบนเว็บไซต์ คำค้นหาสื่อที่ใช้สคริปต์สามารถช่วยให้การเปลี่ยนทำงานได้ตามความต้องการของระบบเนื่องจากไม่มี JavaScript ให้ใช้งาน หรือพิจารณาใช้คอมโพเนนต์สวิตช์ หากมี JavaScript อยู่แล้วก็สามารถปัดสวิตช์ด้วยท่าทางสัมผัสแทนการเปิดหรือปิดเพียงอย่างเดียว มีโอกาสมากมายในการอัปเกรด UX หากมีการใช้สคริปต์ พร้อมทั้งให้ประสบการณ์ขั้นพื้นฐานที่สำคัญหากปิดใช้การเขียนสคริปต์
ดูข้อมูลเพิ่มเติมเกี่ยวกับ script
การค้นหาสื่อที่มีความโปร่งใสน้อยลง
อินเทอร์เฟซที่ไม่ทึบแสงอาจทำให้เกิดอาการปวดศีรษะหรือมีปัญหาในการมองเห็นจากความบกพร่องทางการมองเห็นประเภทต่างๆ ด้วยเหตุนี้ Windows, macOS และ iOS จึงมีค่ากำหนดของระบบที่สามารถลดหรือนำความโปร่งใสออกจาก UI คิวรี่สื่อสำหรับ prefers-reduced-transparency
นี้เข้ากันได้ดีกับคำค้นหาสื่ออื่นๆ ที่ต้องการซึ่งทำให้คุณใช้ความคิดสร้างสรรค์ได้ในขณะที่ปรับเปลี่ยนให้เหมาะกับผู้ใช้
Screencast ที่มีความโปร่งใสลดลง
การสาธิตการลดความโปร่งใส
ในบางกรณี คุณสามารถใช้เลย์เอาต์อื่นซึ่งไม่มีเนื้อหาซ้อนทับเนื้อหาอื่นๆ ได้ ในกรณีอื่นๆ อาจปรับความทึบแสงของสีเป็นทึบหรือเกือบทึบได้ บล็อกโพสต์ต่อไปนี้มีการสาธิตที่สร้างแรงบันดาลใจเพิ่มเติม ซึ่งปรับให้เข้ากับความต้องการของผู้ใช้ ลองพิจารณาดูหากคุณสงสัยเกี่ยวกับช่วงเวลาที่คำค้นหาสื่อนี้มีค่า
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (prefers-reduced-transparency)
การโต้ตอบ
การโต้ตอบคือหลักสำคัญของประสบการณ์ในโลกดิจิทัล โดยช่วยให้ผู้ใช้ได้รับความคิดเห็นเกี่ยวกับสิ่งที่พวกเขาคลิกและตำแหน่งที่อยู่ในพื้นที่เสมือน ปีนี้มีการเปิดตัวฟีเจอร์ที่น่าสนใจหลายอย่าง ซึ่งช่วยให้การโต้ตอบต่างๆ เขียนและนำไปใช้ได้ง่ายขึ้น ช่วยให้เส้นทางของผู้ใช้ราบรื่นและมีประสบการณ์การใช้งานเว็บที่ซับซ้อนมากขึ้น
ดูการเปลี่ยน
การเปลี่ยนของการดูมีผลอย่างมากต่อประสบการณ์ของผู้ใช้หน้าเว็บ ด้วย View Transitions API คุณสามารถสร้างการเปลี่ยนภาพระหว่างสถานะของหน้า 2 แบบในแอปพลิเคชันหน้าเดียว การเปลี่ยนเหล่านี้อาจเป็นการเปลี่ยนหน้าแบบเต็ม หรือสิ่งเล็กๆ บนหน้าเว็บ เช่น การเพิ่มหรือนำรายการใหม่ออกจากรายการ
หัวใจสำคัญของ View Transitions API คือฟังก์ชัน document.startViewTranstion
ส่งฟังก์ชันที่อัปเดต DOM เป็นสถานะใหม่ และ API จะดูแลทุกอย่างให้คุณ ซึ่งทำได้โดยถ่ายสแนปชอตก่อนและหลัง จากนั้นสลับไปมาระหว่าง 2 อย่าง การใช้ CSS ช่วยให้คุณควบคุมสิ่งที่จะจับภาพและปรับแต่งว่าจะให้สแนปชอตเหล่านี้เคลื่อนไหวอย่างไร
VT Screencast
การสาธิต VT
View Transitions API for Single Page Applications ที่จัดส่งใน Chrome 111 ดูข้อมูลเพิ่มเติมเกี่ยวกับดูการเปลี่ยน
ฟังก์ชันการค่อยๆ เปลี่ยนเชิงเส้น
การสนับสนุนเบราว์เซอร์
- 113
- 113
- 112
- 17.2
อย่าปล่อยให้ชื่อของฟังก์ชันนี้หลอกคุณ ฟังก์ชัน linear()
(อย่าสับสนกับlinear
คีย์เวิร์ด) ช่วยให้คุณสร้างฟังก์ชันการค่อยๆ เปลี่ยนที่ซับซ้อนได้อย่างง่ายดาย โดยอาจทำให้ความแม่นยำลดลง
ก่อนวันที่ linear()
ซึ่งจัดส่งใน Chrome 113 จะสร้างเอฟเฟกต์การตีกลับหรือสปริงใน CSS ไม่ได้ linear()
คุณสามารถประมาณการค่อยๆ เปลี่ยนเหล่านี้ได้โดยทำให้การค่อยๆ เปลี่ยนง่ายขึ้นโดยลดความซับซ้อนของจุดต่างๆ แล้วใส่การประมาณค่าแบบเชิงเส้นระหว่างจุดเหล่านี้
Screencast เชิงเส้นแบบค่อยๆ เปลี่ยน
การสาธิตการค่อยๆ เปลี่ยนแบบเชิงเส้น
เรียนรู้เพิ่มเติมเกี่ยวกับ linear()
หากต้องการสร้างเส้นโค้ง linear()
ให้ใช้เครื่องมือสร้างการค่อยๆ เปลี่ยนเชิงเส้น
สิ้นสุดการเลื่อน
อินเทอร์เฟซหลายอย่างมีการโต้ตอบกับการเลื่อน และบางครั้งอินเทอร์เฟซอาจต้องซิงค์ข้อมูลที่เกี่ยวข้องกับตำแหน่งการเลื่อนปัจจุบัน หรือดึงข้อมูลตามสถานะปัจจุบัน ก่อนเหตุการณ์ scrollend
คุณต้องใช้วิธีการหมดเวลาที่ไม่ถูกต้องซึ่งอาจเริ่มทำงานขณะที่นิ้วของผู้ใช้ยังอยู่บนหน้าจอ เมื่อใช้เหตุการณ์ scrollend
คุณจะมีเหตุการณ์ Scrollend ที่มีกำหนดเวลาสมบูรณ์ซึ่งจะทำความเข้าใจว่าผู้ใช้ยังคงใช้ท่าทางสัมผัสตรงกลางอยู่หรือไม่
Screencast แบบ Scrollend
การสาธิต Scrollend
เบราว์เซอร์นี้สำคัญที่จะต้องเป็นเจ้าของเพราะ JavaScript ไม่สามารถติดตามการปรากฏของนิ้วบนหน้าจอระหว่างการเลื่อนได้ เพียงแต่ข้อมูลจะไม่พร้อมใช้งานเท่านั้น ตอนนี้สามารถลบโค้ดที่พยายามสิ้นสุดการเลื่อนส่วนที่ไม่ถูกต้องแล้วแทนที่ด้วยเหตุการณ์ที่ความแม่นยำสูงซึ่งเบราว์เซอร์เป็นเจ้าของได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ scrollend
ภาพเคลื่อนไหวที่ใช้การเลื่อน
ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเป็นฟีเจอร์ที่น่าตื่นเต้นใน Chrome 115 ซึ่งช่วยให้คุณนำภาพเคลื่อนไหวของ CSS หรือภาพเคลื่อนไหวที่สร้างด้วย Web Animations API ที่มีอยู่มาจับคู่กับออฟเซ็ตการเลื่อนของตัวเลื่อนได้ ในขณะที่คุณเลื่อนขึ้นและลงหรือเลื่อนซ้ายและขวาในแนวนอน ภาพเคลื่อนไหวที่ลิงก์จะกรอไปข้างหน้าและถอยหลังเพื่อสนองตอบโดยตรง
ScrollTimeline ช่วยให้คุณสามารถติดตามความคืบหน้าโดยรวมของแถบเลื่อนตามที่แสดงในการสาธิตต่อไปนี้ ขณะที่คุณเลื่อนลงจนสุดหน้าเว็บ ข้อความจะแสดงตัวทีละอักขระ
SDA Screencast
การสาธิต SDA
ViewTimeline ช่วยให้คุณสามารถติดตามองค์ประกอบขณะที่ข้ามแถบเลื่อนได้ ซึ่งทำงานคล้ายกับวิธีที่ IntersectionObserver ติดตามองค์ประกอบ ในการสาธิตต่อไปนี้ แต่ละภาพจะแสดงให้เห็นตัวเองนับตั้งแต่ที่เข้าสู่แถบเลื่อนจนกระทั่งอยู่กึ่งกลาง
Screencast การสาธิต SDA
การสาธิต SDA แบบสด
เนื่องจากภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนสามารถทำงานร่วมกับภาพเคลื่อนไหว CSS และ Web Animations API คุณจึงได้รับประโยชน์จากข้อดีทั้งหมดของ API เหล่านี้ ซึ่งรวมถึงความสามารถในการทำให้ภาพเคลื่อนไหวเหล่านี้ทำงานออกจากเทรดหลัก ตอนนี้คุณสามารถสร้างภาพเคลื่อนไหวที่ลื่นไหลได้เพราะต้องเลื่อนและเลื่อนออกไปยังชุดข้อความหลักผ่านโค้ดเพิ่มเติมเพียงไม่กี่บรรทัด แล้วตรงไหนไม่ชอบ
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ใช้การเลื่อนได้ โปรดอ่านบทความนี้พร้อมรายละเอียดทั้งหมด หรือ ไปที่ Scroll-driven-animations.style ซึ่งมีการสาธิตมากมาย
ไฟล์แนบไทม์ไลน์ที่เลื่อนเวลาออกไป
เมื่อใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS กลไกการค้นหาเพื่อค้นหาแถบเลื่อนที่ควบคุมจะเดินขึ้นไปบนโครงสร้าง DOM เสมอ ซึ่งทำให้มีการจำกัดให้เลื่อนเฉพาะระดับบนเท่านั้น อย่างไรก็ตาม บ่อยครั้งที่องค์ประกอบที่จำเป็นต้องทำเป็นภาพเคลื่อนไหวจะไม่ใช่องค์ประกอบย่อยของแถบเลื่อน แต่เป็นองค์ประกอบที่อยู่ในแผนผังย่อยที่ต่างกันโดยสิ้นเชิง
หากต้องการอนุญาตให้องค์ประกอบที่เคลื่อนไหวค้นหาไทม์ไลน์การเลื่อนที่มีชื่อของบุคคลที่ไม่ใช่ระดับบน ให้ใช้พร็อพเพอร์ตี้ timeline-scope
ในระดับบนสุดที่แชร์ การดำเนินการนี้อนุญาตให้แนบ scroll-timeline
หรือ view-timeline
ที่มีชื่อนั้นด้วย ทำให้เกิดขอบเขตที่กว้างขึ้น เมื่อเรียบร้อยแล้ว บุตรหลานของผู้ปกครองทุกคนที่แชร์จะใช้ไทม์ไลน์ที่มีชื่อนั้นได้
การสาธิต Screencast
การสาธิตแบบสด
เรียนรู้เพิ่มเติมเกี่ยวกับ timeline-scope
ภาพเคลื่อนไหวของคุณสมบัติที่ไม่ต่อเนื่อง
ความสามารถใหม่อีกอย่างหนึ่งในปี 2023 คือความสามารถในการสร้างภาพเคลื่อนไหวแบบแยกต่างหาก เช่น การสร้างภาพเคลื่อนไหวไปและกลับจาก display: none
จาก Chrome 116 คุณจะใช้ display
และ content-visibility
ในกฎคีย์เฟรมได้ นอกจากนี้ คุณยังเปลี่ยนพร็อพเพอร์ตี้แบบแยกกันได้ที่จุด 50% แทนที่จะเป็นจุด 0% ซึ่งทำได้ด้วยการใช้พร็อพเพอร์ตี้ transition-behavior
ที่ใช้คีย์เวิร์ด allow-discrete
หรือในพร็อพเพอร์ตี้ transition
เป็นชวเลข
ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง Screencast
ภาพเคลื่อนไหวแบบไม่ต่อเนื่อง การสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนภาพเคลื่อนไหวแบบแยกกัน
@การเริ่มต้น-สไตล์
กฎ CSS @starting-style
สร้างขึ้นจากความสามารถใหม่บนเว็บสำหรับการแสดงภาพเคลื่อนไหวไปยังและจาก display: none
กฎนี้ระบุวิธีการสร้างรูปแบบ "ก่อนเปิด" ให้องค์ประกอบซึ่งเบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบดังกล่าวจะเปิดในหน้า ซึ่งมีประโยชน์มากสำหรับการเข้าสู่ภาพเคลื่อนไหว และการสร้างภาพเคลื่อนไหวในองค์ประกอบต่างๆ เช่น การเปิดปิดหรือกล่องโต้ตอบ นอกจากนี้ยังมีประโยชน์สำหรับเวลาใดก็ตามที่คุณกำลังสร้างองค์ประกอบ และต้องการให้องค์ประกอบนั้นสามารถสร้างภาพเคลื่อนไหวเข้ามาได้ ลองดูตัวอย่างต่อไปนี้ซึ่งจะทำให้แอตทริบิวต์ popover
เคลื่อนไหว (ดูส่วนถัดไป) ในมุมมองและไปยังเลเยอร์บนสุดอย่างราบรื่นจากภายนอกวิวพอร์ต
@เริ่มต้น Screencast
@starting-style การสาธิต
ดูข้อมูลเพิ่มเติมเกี่ยวกับ @starting-style และภาพเคลื่อนไหวอื่นๆ ในรายการ
ซ้อนทับ
คุณเพิ่มคุณสมบัติ CSS overlay
ใหม่ไปยังการเปลี่ยนได้เพื่อเปิดใช้องค์ประกอบที่มีสไตล์เลเยอร์ชั้นบนสุด เช่น popover
และ dialog
เพื่อทำให้เคลื่อนไหวออกจากเลเยอร์บนสุดได้อย่างราบรื่น หากไม่เปลี่ยนการซ้อนทับ องค์ประกอบจะกลับไปเป็นการตัด เปลี่ยนรูปแบบ และปิดทับทันที และคุณจะไม่เห็นการเปลี่ยนฉากเกิดขึ้น ในทำนองเดียวกัน overlay
จะช่วยให้ ::backdrop
เคลื่อนไหวได้อย่างลื่นไหลเมื่อเพิ่มลงในองค์ประกอบเลเยอร์ด้านบน
การวางซ้อน Screencast
การสาธิตสดซ้อนทับ
ดูข้อมูลเพิ่มเติมเกี่ยวกับการวางซ้อนและภาพเคลื่อนไหวการออกอื่นๆ
องค์ประกอบ
2023 เป็นปีทองที่ทั้งสไตล์และองค์ประกอบ HTML เข้ามาบรรจบกัน ทำให้มีหน้า Landing Page ของ popover
รวมถึงงานอื่นๆ ที่ต้องทำเพิ่มเติมในส่วนของการวางตำแหน่ง Anchor และอนาคตของเมนูการจัดรูปแบบแบบเลื่อนลง คอมโพเนนต์เหล่านี้ช่วยให้สร้างรูปแบบ UI ทั่วไปได้ง่ายขึ้น โดยไม่ต้องอาศัยไลบรารีเพิ่มเติมหรือสร้างระบบการจัดการสถานะของตัวเองใหม่ตั้งแต่ต้นทุกครั้ง
ป๊อปอัป
Popover API ช่วยคุณสร้างองค์ประกอบที่วางซ้อนอยู่บนหน้าอื่นๆ ที่เหลือของหน้า โดยอาจรวมถึงเมนู การเลือก และเคล็ดลับเครื่องมือ คุณสร้างป๊อปอัปอย่างง่ายได้โดยการเพิ่มแอตทริบิวต์ popover
และ id
ลงในองค์ประกอบที่ปรากฏขึ้น แล้วเชื่อมต่อแอตทริบิวต์ id
ขององค์ประกอบกับปุ่มเรียกใช้โดยใช้ popovertarget="my-popover"
Popover API รองรับรายการต่อไปนี้
- เลื่อนไปยังชั้นบนสุด ป๊อปโอเวอร์จะปรากฏบนเลเยอร์แยกต่างหากเหนือส่วนที่เหลือของหน้าเว็บ คุณจึงไม่ต้องลองเล่นกับดัชนี z
- ฟังก์ชันปิดไฟ การคลิกนอกบริเวณป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
- การจัดการโฟกัสเริ่มต้น การเปิดป็อปโอเวอร์จะทำให้แท็บถัดไปหยุดภายในป๊อปอัป
- แป้นพิมพ์ลัดที่เข้าถึงได้ การกดปุ่ม
esc
หรือสลับ 2 ครั้งจะเป็นการปิดป๊อปอัปและโฟกัสกลับไปที่ - การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับทริกเกอร์ป๊อปโอเวอร์อย่างมีความหมาย
Screencast แบบป๊อปโอเวอร์
เดโมแบบสดของ Popover
กฎแนวนอนในการเลือก
การเปลี่ยนแปลงเล็กน้อยของ HTML ใน Chrome และ Safari ในปีนี้คือความสามารถในการเพิ่มองค์ประกอบกฎแนวนอน (แท็ก <hr>
) ลงในองค์ประกอบ <select>
เพื่อช่วยแบ่งเนื้อหา ก่อนหน้านี้ การใส่แท็ก <hr>
ลงในส่วน Select จะไม่แสดงผล แต่ปีนี้ทั้ง Safari และ Chrome รองรับฟีเจอร์นี้ ซึ่งทำให้แยกเนื้อหาภายในองค์ประกอบ <select>
ได้ดียิ่งขึ้น
เลือกภาพหน้าจอ
เลือกการสาธิตแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ ชั่วโมงในรายการที่เลือก
:คลาสสมมติที่ใช้ได้ของผู้ใช้และไม่ถูกต้อง
ในปีนี้จะมีความเสถียรในทุกเบราว์เซอร์ โดย :user-valid
และ :user-invalid
จะทำงานคล้ายกับคลาสซูโดของ :valid
และ :invalid
แต่จะจับคู่การควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสำคัญเท่านั้น ตัวควบคุมแบบฟอร์มที่จำเป็นและว่างเปล่าจะตรงกับ :invalid
แม้ว่าผู้ใช้ยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม การควบคุมเดียวกันจะไม่ตรงกับ :user-invalid
จนกว่าผู้ใช้จะเปลี่ยนแปลงอินพุตและปล่อยให้อยู่ในสถานะที่ไม่ถูกต้อง
ตัวเลือกใหม่เหล่านี้จะช่วยให้ไม่จำเป็นต้องเขียนโค้ดการเก็บสถานะเพื่อติดตามข้อมูลที่ผู้ใช้เปลี่ยนแปลงอีกต่อไป
:user-* Screencast
:user-* การสาธิตแบบสด
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้องค์ประกอบสมมติสำหรับการตรวจสอบแบบฟอร์ม user-*
แอคคอร์เดียนสุดพิเศษ
การสนับสนุนเบราว์เซอร์
- 120
- 120
- x
- 17.2
รูปแบบ UI ทั่วไปบนเว็บคือคอมโพเนนต์แอคคอร์เดียน หากต้องการใช้รูปแบบนี้ คุณต้องรวมองค์ประกอบ <details>
2-3 รายการเข้าด้วยกัน โดยมักจะจัดกลุ่มองค์ประกอบเหล่านี้ด้วยภาพเพื่อบ่งบอกว่าทั้ง 2 องค์ประกอบอยู่ร่วมกัน
ฟีเจอร์ใหม่ใน Chrome 120 รองรับแอตทริบิวต์ name
ในองค์ประกอบ <details>
เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details>
หลายรายการที่มีค่า name
เดียวกันจะสร้างกลุ่มความหมาย องค์ประกอบในกลุ่มจะเปิดพร้อมกันได้สูงสุด 1 องค์ประกอบ โดยเมื่อคุณเปิดองค์ประกอบ <details>
รายการหนึ่งจากกลุ่ม องค์ประกอบที่เปิดอยู่ก่อนหน้านี้จะปิดโดยอัตโนมัติ หีบเพลงประเภทนี้เรียกว่าแอกคอร์เดียนพิเศษ
องค์ประกอบ <details>
ที่เป็นส่วนหนึ่งของแอคคอร์เดียนพิเศษไม่จำเป็นต้องเป็นรายการข้างเคียง ซึ่งอาจกระจัดกระจายอยู่ทั่วทั้งเอกสาร
CSS ได้รับการพัฒนาอย่างมากในช่วง 2-3 ปีที่ผ่านมา โดยเฉพาะอย่างยิ่งในช่วงปี 2023 หากคุณเพิ่งเริ่มใช้ CSS หรือแค่ต้องการทบทวนความรู้เบื้องต้น โปรดดูหลักสูตรเรียนรู้ CSS แบบไม่เสียค่าใช้จ่าย และหลักสูตรฟรีอื่นๆ ที่ web.dev
ขอให้มีความสุขในช่วงเทศกาลวันหยุดและหวังว่าคุณจะมีโอกาสนำฟีเจอร์ CSS และ UI ใหม่ที่ยอดเยี่ยมเหล่านี้ไปใช้กับงานของคุณในเร็วๆ นี้
⇾ ทีม DevRel ของ Chrome UI